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。 Chart.js 网站上有一个good example。

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