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