Chart.js特定标签旁边的点

问题描述

我正在尝试让chartjs在每个点旁边显示一个特定的标签，例如，在此脚本中，它应该在标签以及鼠标悬停时显示“ TRALALA”，但它显示坐标。如何改为使用特定标签？

谢谢

var valuedata = [{
  x: 3,y: 5
}];
var valuelabel = ['TRALALA'];

var chartData = {
  labels: valuelabel,datasets: [{
    label: 'distance',borderColor: '#2196f3',// Add custom color border            
    backgroundColor: '#2196f3',// Add custom color background (Points and Fill)
    data: valuedata,poinTradius: 10,pointHoverRadius: 12
  }]
};


var myBarChart = new Chart(document.getElementById("myChart1"),{
  type: 'scatter',data: {
    labels: valuelabel,datasets: [{
      label: 'distance',// Add custom color border            
      backgroundColor: '#2196f3',// Add custom color background (Points and Fill)
      data: valuedata,pointHoverRadius: 12
    }]
  },options: {
    legend: {
      display: true
    },title: {
      display: true,text: 'distance of JDPT kanji compared to the equivalent JLPT level'
    },scales: {
      yAxes: [{
        type: 'logarithmic',display: true,scaleLabel: {
          display: true,labelString: 'Count',fontSize: 16
        }
      }],xAxes: [{
        type: 'linear',position: 'bottom',labelString: 'distance',fontSize: 16
        },gridLines: {
          display: true
        }
      }]
    },plugins: {
      datalabels: {
        color: '#d6621e',align: 'right',offset: 16,font: {
          weight: 'bold'
        }
      }
    }
  }

});


myBarChart.update();

解决方法

好吧，我明白了

formatter: function(value,context) {
context.chart.data.labels[context.dataIndex];
}

例如

var myBarChart = new Chart(document.getElementById("bar-chart"),{
  type: 'line',data: {
    labels: ['a','b'],datasets: [{
      data: [10,20]
    }]
  },options: {
    plugins: {
      datalabels: {
        formatter: function(value,context) {
          return context.chart.data.labels[context.dataIndex];
        }
      }
    }
  }
});

charts scatter