Chart.js：图例在第一次调用 chart.update() 时不会更新答案

【问题标题】：Chart.js: Legend doesn't update on first call to chart.update()Chart.js：图例在第一次调用 chart.update() 时不会更新
【发布时间】：2020-06-04 04:45:56
【问题描述】：

我在更新 chart.js 中的图例时遇到问题。

Here's a sandbox to follow along.

我有一个标准条形图，每个标签有两个数据点，例如：

let chartData = {
  apple: {
    a: 1,
    b: 3
  },
  orange: {
    a: 2,
    b: 2
  },
  banana: {
    a: 3,
    b: 1
  }
};

单击按钮时，排序从 a->b 更改或相反。

颜色也会改变，这就是我的问题：

图例不会在第一次切换时更新。之后它总是落后一个切换。

我尝试查看如何在图例中显式设置颜色，以便我可以在 updateChart() 函数中手动更新它们，但在文档中我只看到更改字体颜色和图例本身的能力- 不是单独的标签颜色。

我宁愿不必使用自定义 CSS 来覆盖...这是 Chart.js 中的错误吗？我是否错误地执行了更新？我必须调用 generateLegend() 吗？

非常感谢您的帮助！

【问题讨论】：

标签： chart.js

【解决方案1】：

这是因为您的 labels 最初没有排序。如果在将数据分配给sortedKeys 时对它们进行排序，它将按预期工作。

let sortedKeys = Object.keys(chartData).sort(
  (a, b) => chartData[b][sortByCol] - chartData[a][sortByCol]
);

请查看您修改后的code sandbox。

【讨论】：

刚试了沙箱，我还是看到同样的问题...chart.js的维护者提到这是chart.js中的一个实际错误，已在新版本alpha 3中修复： github.com/chartjs/Chart.js/issues/7457

【解决方案2】：

问题是chart.js 中的一个错误：

https://github.com/chartjs/Chart.js/issues/7457

chart.js 的创建者 Evert Timberg 回复了两个可能的修复：

更新到版本 v3.0.0-alpha 已修复该错误
调用 chart.update() 两次（可能存在性能问题）

两种解决方案都得到确认。

v3 处于 alpha 阶段并且有几个重大更改 - 因此从 2.x -> 3.x 迁移可能需要一些工作。

调用chart.update() 两次当然会导致一些性能开销，但在像这样的较小示例中，它一点也不明显。

感谢 chart.js 的 @etimberg 的帮助！

【讨论】：