javascript - 如何从工具提示访问特定数据值 - Chart.js

Question

我正在尝试将对象数组作为数据传递给图形数据，包括 x 的值和每个工具提示中要使用的其他一些值。

在我的数据数组中，每个对象都包含 x 和 value 变量的值。我想在 tooltips 中访问此 value 并最终在鼠标悬停在每个图形数据上时显示的工具提示中显示该值。

这是我的代码:

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['2017/06/12', '2017/06/23', '2017/07/12', '2017/07/23', '2017/08/12', '2017/08/23', '2017/09/12'],
    datasets: [{
      label: 'Values',
      data: [{
          y: 12,
          value: 12
        },
        {
          y: 3,
          value: 13
        },
        {
          y: 1,
          value: 15
        },
        {
          y: -3,
          value: 5
        },
        {
          y: 67,
          value: 18
        },
        {
          y: 12,
          value: 11
        },
        {
          y: 13,
          value: 19
        }
      ],
      fill: false,
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 2
    }]
  },
  options: {
    tooltips: {
      // HERE I WANT TO ACCESS VALUE VARIABLE AND DISPLAY IT IN TOOLTIP
    },
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

Answer 1

Chart.js 工具提示文档有一个 section on Label Callback其中显示了如何指定为给定数据点显示的文本。您需要编写一个提供以下参数的函数:

tooltips: {
  callbacks: {
    label: function(tooltipItem, data) {
      return '...';
    }
  }
}

Tooltip Item Interface 的部分显示通过 tooltipItem 传递给回调的信息。这里重要的是 datasetIndex(项目来自的数据集的索引)和 index(该数据项在数据集中的索引)。使用这些，您可以访问 data 中的正确项目。

将它们放在一起是一个非常简单的示例，在工具提示中访问 y 和 value

Fiddle (删除了 backgroundColor/borderColor，因为它会导致错误):

tooltips: {
  callbacks: {
    label: function(tooltipItem, data) {
      var item = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
      return item.y  + ' ' + item.value;
    }
  }
}