Chart.js如何根据数值动态修改tooltip的footer字体颜色

解决方案 #

你之前的写法不生效，是因为tooltip渲染时会先读取样式配置，再执行footer文本回调生成内容，你在回调中修改全局配置已经错过了本次渲染的样式读取阶段，只会在下一次tooltip渲染时生效，无法和当前求和值匹配。

Chart.js 3.x及以上版本中，footerColor配置本身支持回调函数，入参和footer回调完全一致，你可以直接在该回调中根据求和值返回对应的颜色即可，不需要自定义HTML tooltip。

写法1：独立计算逻辑（最稳妥）

options: {
  plugins: {
    tooltip: {
      // 保留你原有footer回调不变
      footer: function (tooltipItems) {
        let sum = tooltipItems[0].parsed.y - tooltipItems[1].parsed.y;
        sum = appCore.formatNumber(sum, page.pc(), true, true);
        return `${page.translations['label.sum']}: ${sum}`;
      },
      // 新增footerColor回调
      footerColor: function(tooltipItems) {
        const sum = tooltipItems[0].parsed.y - tooltipItems[1].parsed.y;
        return sum >= 0 ? '#283823' : '#762552';
      }
    }
  }
}

写法2：缓存sum避免重复计算

如果求和逻辑比较复杂，可以把计算结果存在图表实例的自定义属性中复用：

// 图表初始化时新增自定义属性存储临时求和值
chart.instance.__tempTooltipSum = 0;

// tooltip配置修改为：
options: {
  plugins: {
    tooltip: {
      footer: function (tooltipItems) {
        let sum = tooltipItems[0].parsed.y - tooltipItems[1].parsed.y;
        // 存储计算结果
        chart.instance.__tempTooltipSum = sum;
        sum = appCore.formatNumber(sum, page.pc(), true, true);
        return `${page.translations['label.sum']}: ${sum}`;
      },
      footerColor: function() {
        return chart.instance.__tempTooltipSum >= 0 ? '#283823' : '#762552';
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者Christian