为什么 Chart.js 工具提示的“labelColor”回调没有应用任何更改？

Question

我正在使用 vue-chartjs 来显示折线图，现在我正在自定义外观。我发现工具提示样式的某些属性不起作用。我目前正在尝试以下方法来根据数据值选择背景颜色。我直接从 Chart.js 文档复制了代码，并放入三元运算符来选择背景颜色。

const options = {
        elements: {
          line: {
            borderColor: '#15c63c',
            borderCapStyle: 'round',
          },
        },
        scales: {
          y: {
            suggestedMin: 0,
            grid: {
              display: false,
              color: 'rgba(150,150,150,.3)',
            },
          },
          x: {
            grid: {
              color: 'rgba(150,150,150,0.1)',
            },
          },
        },
        responsive: true,
        plugins: {
          legend: {
            display: false,
          },
          title: {
            display: true,
            text: 'April 2024',
          },
          tooltip: {
            backgroundColor: 'rgba(225,225,225,0.75)',
            displayColors: false,
            padding: 12,
            titleAlign: 'center',
            caretPadding: 4,
            callbacks: {
              label: function (context) {
                let label = context.dataset.label || ''

                if (context.parsed.y !== null && context.parsed.y >= 0) {
                  const suffix = context.parsed.y === 1 ? '' : 's'
                  label += '+' + context.parsed.y + ' unit' + suffix
                }

                return label
              },
              labelColor: function(context) {
                let backgroundColor = context.parsed.y >= 0 ? 'rgba(21,198,60,0.7)' : 'rgba(204,0,0,0.7)'
                return {
                  borderColor: 'rgb(255,253,250)',
                  backgroundColor: backgroundColor,
                  borderWidth: 2,
                  borderDash: [2, 2],
                  borderRadius: 8,
                }
              },
              labelTextColor: function () {
                return 'rgb(255,253,250)'
              },
            },
          },
        },
        maintainAspectRatio: false,
      }

如果我删除

options.plugins.tooltip.backgroundColor

，则工具提示将使用默认值。 “labelTextColor”回调按预期工作。我还注意到，无论我做什么，我都无法更改工具提示的

borderColor

。我已经尝试过

options.plugins.tooltip.borderColor = 'rgb(255,253,250)'

，但也不起作用。

我还在

console.log(context.parsed.y)

回调中完成了

labelColor

并确认 RGB 值显示在控制台中。

我尝试过查看 SO 以及 GH，但我发现的所有内容似乎都是 4 或 6 年前的内容，不再相关。

Answer 1

@kikon 提供了答案的路线图。

labelColor

回调试图设置我想要隐藏的元素的样式。我将所有边框设置移至工具提示对象的顶层。然后使用 @kikon 的小提琴示例，我做了一个

afterBody

回调来动态设置工具提示的

backgroundColor

。

tooltip: {
            backgroundColor: 'rgba(225,225,225,0.75)',
            borderWidth: 2,
            borderColor: 'rgb(255,253,250)',
            displayColors: false,
            padding: 12,
            titleAlign: 'center',
            caretPadding: 4,
            callbacks: {
              label: context => {
                let label = context.dataset.label || ''

                if (context.parsed.y !== null && context.parsed.y >= 0) {
                  label += '+' + context.parsed.y
                }

                const suffix = context.parsed.y === 1 ? '' : 's'
                label += ' unit' + suffix

                return label
              },
              labelTextColor: () => {
                return 'rgb(255,253,250)'
              },
              afterBody: context => {
                const backgroundColor = context[0].parsed.y >= 0 ? 'rgba(21,198,60,0.7)' : 'rgba(204,0,0,0.7)'
                context[0].chart.tooltip.options.backgroundColor = backgroundColor
              },
            },
          }