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

我使用for折线图来显示随时间变化的趋势，但当悬停在数据点上时，它的用途并不清楚

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

我现在这样做是为了在工具提示数据后添加一个“%”，因为我处理的是这样的百分比：

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 + '%';
}

---

请提供您所做工作的示例代码。你希望工具提示上出现什么样的“图例”？为你添加了更多的代码。如果你在这里转到第44行，这可能就是你想要的逻辑。但是我还没有测试过这个问题，我编辑了我自己找到的答案。对于其他一些图表类型，你可以做到这一点：

chartData.labels[tooltipItem.index]