Chartjs:更新数据后，常见的可点击图例不起作用

Question

一页中有 2 个图表和 1 个常见图例。可单击此图例以显示/隐藏图表的图形线。这是分叉这个问题。

我试图更新代码上面的数据。这是一种未经改进的方式，但我已经能够更新图表。"图例"文本将在此处隐藏/显示折线图。

但是，在更新数据后，此切换功能不起作用。

请试试这里。

1. 点击"图例"，显示并隐藏图形线--->确定

2. 点击"更改数据"按钮，图形线将被更改--->确定

3. 再次点击"图例"，不会消失图形线-->NG

首先，它调用 DrawChart 函数，该函数绘制参数的数据。

window.onload = function () {
DrawChart(data_A1, data_B1);
clickableCommonLegend();
}  

DrawChart函数通过ChartJS的典型方法绘制折线图。

function DrawChart(data_A, data_B) {
var ctxA = document.getElementById("myChartA").getContext("2d");
var ctxB = document.getElementById("myChartB").getContext("2d");
myChartA = new Chart(ctxA, {
type: 'line',
data:{.....
options:{....
});
myChartB = new Chart(ctxB, {
type: 'line',
data:{.....
options:{....
});

可点击的CommonLegend((是从这个问题分叉出来的。

单击按钮函数，调用"changeData(("。 此函数执行销毁图表并调用"绘制图表">

function changeData() {
myChartA.destroy();
myChartB.destroy();
DrawChart(data_A2, data_B2);
myChartA.update();
myChartB.update();
clickableCommonLegend();
}

我猜 destroy(( 删除所有上下文并通过 document.getElementById("myChartA"(重新定义上下文... 在 DrawChart(( 中。 我认为它 wii 工作正常，但结果不是。

在可点击的通用图例中，

var legendItems = document.querySelector('.legend').innerHTML = myChartA.generateLegend();

图例项会从图表中移除吗？ 但我又叫它了。

如果你让我知道出了什么问题，我就毕业了。

此处提供了当前代码。

Answer 1

我找到了解决方案。

更改更改数据(( 函数

function changeData() {
//  ---NOT WORK---
// myChartA.destroy();
// myChartB.destroy();
// DrawChart(data_A2, data_B2);
// --- OK ---        
myChartA.data.datasets[0].data = data_A2;
myChartB.data.datasets[0].data = data_B2;
myChartA.update();
myChartB.update();
clickableCommonLegend();
}