ChartJS 在可见性属性切换后显示错误的数据集答案

【问题标题】：ChartJS showing wrong dataset following visibility property toggleChartJS 在可见性属性切换后显示错误的数据集
【发布时间】：2020-10-14 11:59:46
【问题描述】：

在我的项目中，我有一个表中有十个图表，每个图表显示两个数据集。我想通过单击来切换每个数据集的可见性，这是 ChartJS 中的默认行为。

所有图表都保存在一个数组中，并遵循 ChartJS 的内置切换方法，每个图表都更新为第一个图表的数据集。所以要明确一点，当页面加载时，每个图表都会正确显示，但是如果我让数据集不可见又可见，它就会变得可见但数据错误。

我尝试编写自己的更新函数来切换可见性。

 var option = {

        legend: {
            onClick: ToggleDatasetVisibility,
        }}

然后

function ToggleDatasetVisibility() {

   this.chart.getDatasetMeta(1).hidden = !this.chart.getDatasetMeta(1).hidden;
    //  this.chart.update();
}

然而，同样的事情发生了。更新后，

*注意，我只是切换每个 DatasetMeta 的第二个数据集，所以这就是为什么在这个例子中 1 是硬编码的。那不是有问题的图表。

如果它有用，我们是当页面加载时图表以数据为基础的代码，这里更新显示了正确的数据。

    for (var i = 0; i < 10; i++) {

        var MyArray= await fetch("http://localhost:1234/Demo/FetchResults?model_id=" + i);


        //Add the recorded tunnel data to dataset 0
        LineChartArray[i].data.datasets[0].data = ResultsArray;
        LineChartArray[i].data.datasets[0].label = '';
        LineChartArray[i].data.datasets[1].data = MyArray;
        LineChartArray[i].data.datasets[1].label = 'LabelXYZ';


        LineChartArray[i].update(); //This update updates the graph with the correct data.

    }
}

【问题讨论】：

标签： javascript html chart.js

【解决方案1】：

所以，我不知道图表 JS 是否存在错误或正确确定要更新哪个图表，但我发现渲染方法有效。这会在可见性切换后更新图表，在可见时将正确的数据加载回。我认为这可能是我使用了“this”命令，但它适用于 render 方法。

我刚刚更新了切换功能，

function ToggleDatasetVisibility() {

   this.chart.getDatasetMeta(1).hidden = !this.chart.getDatasetMeta(1).hidden;
   this.chart.render();

}

【讨论】：