如何从工具提示访问特定数据值-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;

    }

  }

}