Chart.js – 折线图工具提示标签答案

【问题标题】：Chart.js – Line Chart Tooltip LabelsChart.js – 折线图工具提示标签
【发布时间】：2017-03-15 04:15:38
【问题描述】：

当我使用折线图将鼠标悬停在数据集上时，工具提示会在数据集中的每个项目旁边显示一个颜色键。但是，键和文本之间没有间距。

至少，我希望能够在这里添加一些填充，但如果我也可以缩小这些关键方块，甚至给它们圆角，那就太好了。

我没有看到任何控制这个小方块的折线图或工具提示设置。

我认为它可能共享 Legends 配置中的选项，但没有。

JS Bin Example

我正在使用 Chart.bundle.min.js 2.3.0。

【问题讨论】：

标签： chart.js

【解决方案1】：

我做了这样的事情来添加一些填充。不理想，但我不知道其他方法。

  tooltips: {
    callbacks: {
      title: function(tooltipItem, data) {
        return tooltipItem[0].xLabel;
      },
      label: function(tooltipItem, data) {
        return ' ' + data.datasets[tooltipItem.datasetIndex].label + ' ' + tooltipItem.yLabel;
      }

基本上是手动添加填充

return ' ' + ... + tooltipItem.yLabel;

可能更有帮助，请参阅Edit tooltips in ChartJS

【讨论】：