在更改数据集的背景颜色并进行更新后，数据集图例颜色不会更新(chartJs框架)

Question

我是chartJS框架中的新手，但这对我来说似乎很奇怪。我有水平条形图和两个基本数据集。问题是，我正在尝试要制作一个按钮，它将更改数据集的背景颜色(在我的案例中，对于数据集1->，但这并不重要，只是测试场景(。当我点击我的按钮时，它会改变图表中条形图的背景色，但不会改变我的数据集图例的背景色。

示例：数据集1的背景颜色为红色。我点击我的按钮，它会将图中条形图的背景颜色更改为绿色(或其他颜色，这并不重要(。数据集1的图例将保持红色。

这是我的代码

Answer 1

首先，下次需要添加代码的短代码片段，而不是Github，包含2个长文件&复杂的数据-这不是自由职业者的任务，但Q：(同样在未来，你可能会删除这个GitHub项目，这个Q将是有意义的

https://stackoverflow.com/help/how-to-ask

update((

在图表被创建。当图表数据或选项发生更改时，chart.js将根据新的数据值和选项设置动画。https://www.chartjs.org/docs/latest/developers/updates.html?h=update

官方脚本示例(通过单击更改颜色和数据(：https://www.chartjs.org/samples/latest/scriptable/bar.html

或她(在scriptable title下(：https://www.chartjs.org/samples/latest/

myHorizontalBar是您的图表对象，因此删除window.(语法错误-检查控制台错误(。

window.myHorizontalBar.update(); /* wrong syntax remove "window." */

"你好世界"示例

/* data */
var data = {
labels: ["Africa", "Asia", "Europe", "America"],
datasets: [{
/* data */
label: "Data label",
backgroundColor: ["red", "#8e5ea2","#3cba9f", '#1d49b8'],
data: [5.0,6.7,7.5, 8.6, 3.3, 4.4, 4.5]
}]
};
var options = {
responsive: true,
title: {
text: 'Hello',
display: true
},
scales: {
xAxes: [{
stacked: false,
ticks: {
},
}],
yAxes: [{
stacked: true,
ticks: {
}
}]
}
};
var myChart = new Chart(document.getElementById("chart"), {
type: 'bar',
data: data,
options: options
});
document.getElementById('submitChange').addEventListener('click', function() {
myChart.data.datasets[0].backgroundColor[0] = "green";
myChart.update();
});

<button id="submitChange">Change Africa color to Green</button>
<canvas id="chart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>