Chart.js.Legend不更新第一次调用chart.update()时，图例没有更新。

Question

我在chart.js中更新图例时遇到了麻烦。

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

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

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

在点击按钮时，排序由a->b或反过来。变色这就是我的问题所在。

图例在第一次切换时没有更新。之后，它总是落后于一次切换。

我试着研究如何在图例中明确设置颜色，这样我就可以直接在 updateChart() 函数，但在文档中我只看到了改变字体颜色和图例本身的功能，而没有看到单个标签的颜色。

我希望不需要使用自定义CSS来覆盖...... 这是Chart.js中的一个错误吗？我是不是执行更新的方式不正确？我必须调用generateLegend()吗？

非常感谢你的帮助

Answer 1

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

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

请看一下您修改后的 代码沙盒.

Answer 2

问题是chart.js中的一个bug。

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

两种解决方案都已确认。

v3是alpha版本，有一些突破性的变化--所以从2.x -> 3.x的迁移可能需要一些工作。

调用chart.update()两次当然会造成一些性能开销，但在像这样的小例子上，它一点也不明显。

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

Chart.js.Legend不更新 第一次调用chart.update()时，图例没有更新。