Question

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

至少，我希望能够在这里添加一些填充，但如果我还可以缩小这些关键方块，甚至给它们圆角，那将会很棒。

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

我想也许它可以从Legends配置中共享选项，但不是。

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

Answer 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

Chart.js - 折线图工具提示标签

1 个答案: