ChartJs - 页脚颜色动态

Question

是否有机会根据其值更改“页脚”元素的颜色？这是我当前的页脚 - 计算总和的回调，我的目标是将字体颜色更改为红色（如果为负数）。

我试图阻止使用“html - 内容工具提示”，因为它的定位似乎有点棘手，而 canvas 做得很好。

 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”，但该值似乎只能设置一次？我在页脚方法中尝试了以下方法：

chart.instance.options.plugins.tooltip.footerColor = (sum >= 0) ?  '#283823' : '#762552';

“图表”是我在图表初始化期间存储的全局实例。

我希望有人能把我推向正确的方向。

谢谢，克里斯蒂安

Answer 1

我不知道你从哪里得到实例部分，因为如果我记录它，它不在图表上。但是，是的，这是可能的，您可以在全局范围内执行此操作（第一个取消注释的行），您可以在创建时针对特定图表执行此操作（第二个取消注释的行）或在创建后针对特定图表执行此操作（最后一行）

//Chart.defaults.plugins.tooltip.footerColor =  (ctx) => (ctx.tooltip.dataPoints[0].parsed.y > 10 ? 'green' : 'red')

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          footer: () => ('fff')
        },
        //footerColor: (ctx) => (ctx.tooltip.dataPoints[0].parsed.y > 10 ? 'green' : 'red')
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);

chart.options.plugins.tooltip.footerColor = (ctx) => (ctx.tooltip.dataPoints[0].parsed.y > 10 ? 'green' : 'red');
chart.update();

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>

ChartJs - 页脚颜色动态

ChartJs - Footer color dynamically

javascript

chart.js