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工具提示文档有一个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;
    }
  }
}

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

1 个答案: