chart.js将标签添加到工具提示中

Question

我正在使用chart.js来显示随时间推移的趋势图，但是当将数据点悬停在数据点上时，不清楚它是什么。

有没有办法将数据中的标签添加到工具提示中？

我目前这样做是为了在工具提示数据之后添加一个“％”，因为我正在处理像这样的百分比：

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

所以我想要它，当它们悬停在线上的数据点时，它会说“legend - data％”。

以下是包含数据的代码的完整示例：

    var ctx = document.getElementById('myLineChart');
    var myChart = new Chart.Line(ctx, {
        type: 'bar',
        data: {
  labels: ['Jul-2016','Sep-2016','Oct-2016','Dec-2016','Jan-2017'],
  datasets: [{
  label: 'Ubuntu-based',
        fill: false,
  data: [["Ubuntu-based", "51.37"],["Ubuntu-based", "51.04"],["Ubuntu-based", "50.64"],["Ubuntu-based", "50.29"],["Ubuntu-based", "49.6"]],
  borderColor: '#a6cee3',
  borderWidth: 1
  },{
  label: 'Arch-based',
        fill: false,
  data: [["Arch-based", "28.52"],["Arch-based", "28.53"],["Arch-based", "28.75"],["Arch-based", "29.02"],["Arch-based", "29.16"]],
  borderColor: '#1f78b4',
  borderWidth: 1
  },{
  label: 'Debian',
        fill: false,
  data: [["Debian", "6.73"],["Debian", "6.74"],["Debian", "6.75"],["Debian", "6.82"],["Debian", "6.79"]],
  borderColor: '#b2df8a',
  borderWidth: 1
  },{
  label: 'Fedora',
        fill: false,
  data: [["Fedora", "3.92"],["Fedora", "4.09"],["Fedora", "4.07"],["Fedora", "4.14"],["Fedora", "4.53"]],
  borderColor: '#33a02c',
  borderWidth: 1
  },{
  label: 'openSUSE',
        fill: false,
  data: [["openSUSE", "3.15"],["openSUSE", "3.05"],["openSUSE", "2.98"],["openSUSE", "3.03"],["openSUSE", "3.02"]],
  borderColor: '#fb9a99',
  borderWidth: 1
  },{
  label: 'Gentoo',
        fill: false,
  data: [["Gentoo", "3.08"],["Gentoo", "2.98"],["Gentoo", "3.04"],["Gentoo", "3.03"],["Gentoo", "2.91"]],
  borderColor: '#e31a1c',
  borderWidth: 1
  },{
  label: 'SteamOS',
        fill: false,
  data: [["SteamOS", "1.26"],["SteamOS", "1.62"],["SteamOS", "1.58"],["SteamOS", "1.57"],["SteamOS", "1.67"]],
  borderColor: '#fdbf6f',
  borderWidth: 1
  },{
  label: 'Slackware',
        fill: false,
  data: [["Slackware", "0.63"],["Slackware", "0.58"],["Slackware", "0.52"],["Slackware", "0.49"],["Slackware", "0.61"]],
  borderColor: '#ff7f00',
  borderWidth: 1
  },{
  label: 'Mageia',
        fill: false,
  data: [["Mageia", "0.63"],["Mageia", "0.65"],["Mageia", "0.61"],["Mageia", "0.58"],["Mageia", "0.59"]],
  borderColor: '#cab2d6',
  borderWidth: 1
  },{
  label: 'Solus',
        fill: false,
  data: [["Solus", "0.42"],["Solus", "0.45"],["Solus", "0.61"],["Solus", "0.64"],["Solus", "0.92"]],
  borderColor: '#6a3d9a',
  borderWidth: 1
  },{
  label: 'Sabayon',
        fill: false,
  data: [["Sabayon", "0.21"],["Sabayon", "0.19"],["Sabayon", "0.24"],["Sabayon", "0.23"],["Sabayon", "0.22"]],
  borderColor: '',
  borderWidth: 1
  },{
  label: 'Chakra',
        fill: false,
  data: [["Chakra", "0.07"],["Chakra", "0.06"],["Chakra", "0.06"],["Chakra", "0.06"],["Chakra", "0.05"]],
  borderColor: '',
  borderWidth: 1
  },{
  label: 'Netrunner',
        fill: false,
  data: [["Netrunner", "0.06"],["Netrunner", "0.06"],["Netrunner", "0.05"]],
  borderColor: '',
  borderWidth: 1
  }]
        },
        options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        },
                    scaleLabel: {
                display: true,
                labelString: 'Percentage of users'
            }
      }]
    },
            tooltips:
            {
                callbacks: {
                    label: function(tooltipItem, data) {
          var value = data.datasets[0].data[tooltipItem.index];
                        var label = data.labels[tooltipItem.index];
          return label + value + '%';
            }
            },
            },
    }
    });

因此，当您将鼠标悬停在“基于Ubuntu”数据列中的数据点时，工具提示中将包含“基于Ubuntu”。

编辑：

答案是将回调更改为此

label: function(tooltipItem, data) {
      var value = data.datasets[tooltipItem.datasetIndex].data[0];
      var label = data.datasets[tooltipItem.datasetIndex].label;
      return label + ' ' + value + '%';
}