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

Question

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

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

这是我的代码：

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 工具提示文档有一个关于标签回调的部分，其中显示了如何指定为给定数据点显示的文本。您需要编写一个提供以下参数的函数：

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

工具提示项接口部分向您展示了通过 传递给回调的信息tooltipItem。这里重要的是datasetIndex（该项目来自的数据集的索引）和index（该数据项在数据集中的索引）。使用这些您可以访问 中的正确项目data。

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

小提琴（已删除backgroundColor/ borderColor，因为它会导致错误）：

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