html - Chart.js 中的自定义工具提示样式

Question

有谁知道是否可以设置 Chart.js 工具提示的样式，使值的文本显示得更粗体，而其前面的文本则显示得更粗体？

当前版本:

所需版本:

到目前为止，我已使用多字符串数组的回调来创建必要的行，但我无法正确设置工具提示的样式。

callbacks: {
  label: function (tooltipItem, data) {
    if (tooltipItem.datasetIndex === 1 || tooltipItem.datasetIndex === 2) {
      let line1, line2, line3, line4, line5;
      line1 = data.datasets[tooltipItem.datasetIndex].name;
      line2 = 'Transaction Volume: ' + data.datasets[tooltipItem.datasetIndex].tv[tooltipItem.index];
      line3 = 'YoY%: ' + data.datasets[tooltipItem.datasetIndex].tvYoY[tooltipItem.index];
      line4 = 'Deal Count: ' + data.datasets[tooltipItem.datasetIndex].dc[tooltipItem.index];
      line5 = 'YoY%: ' + data.datasets[tooltipItem.datasetIndex].dcYoY[tooltipItem.index];
      const multistringText = [line1];
      multistringText.push(line2);
      multistringText.push(line3);
      multistringText.push(line4);
      multistringText.push(line5);
      return multistringText;
    }
    ...

工具提示回调工作正常，但它阻止我设计回调的特定部分，我认为是这样吗？我正在努力使用 ChartJS 的自定义工具提示功能来实现相同的功能，该功能的文档非常有限。

Answer 1

为此，您需要渲染 custom tooltip 。有一个good example在 Chart.js 网站上。

这是一项繁重的工作，因为您需要自己处理所有事情(例如定位)，但也是获得如此高度格式化的结果的唯一方法。