Chart.js 点旁边的特定标签

Question

我试图让 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',
      borderColor: '#2196f3', // Add custom color border            
      backgroundColor: '#2196f3', // Add custom color background (Points and Fill)
      data: valuedata,
      pointRadius: 10,
      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',
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Distance',
          fontSize: 16
        },
        gridLines: {
          display: true
        }
      }]
    },
    plugins: {
      datalabels: {
        color: '#d6621e',
        align: 'right',
        offset: 16,
        font: {
          weight: 'bold'
        }
      }
    }
  }

});


myBarChart.update();

Answer 1

好的，我知道了

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];
        }
      }
    }
  }
});

Chart.js 点旁边的特定标签

Chart.js specific label next to point

charts

scatter