折线图不是每次都更新答案

【问题标题】：Line Chart not updating everytime折线图不是每次都更新
【发布时间】：2019-01-12 03:16:22
【问题描述】：

所以我正在使用 react-chartjs-2 中的 Line，并且我已经向标签添加了一个 onClick 事件，该事件会模糊除当前行之外的所有行。

这是我的onClick函数代码：

legend:{
             'onClick': function(e, legendItem) {
                var index = legendItem.datasetIndex;
                var ci = this.chart;

                console.log(ci.data.datasets);
                //var alreadyHidden = (ci.data.datasets[index].borderColor === ci.data.datasets[index].accentFadedColor) ? false : true;


                for(var i=0; i< ci.data.datasets.length;i++){
                  if (i !== index) {
                      ci.data.datasets[i].borderColor = ci.data.datasets[i].accentFadedColor;
                  } else if (i == index){
                    ci.data.datasets[i].borderColor = ci.data.datasets[i].accentColor;
                  }
                }

                that.updateValue(index);

                ci.update();

              }

问题是，该函数会在第一次点击时更新图表，但之后不会。虽然我可以通过 console.log() 看到更新值

知道我做错了什么吗？

更新：

显然我的图表工作正常。在 onClick() 内部，我正在调用另一个导致此行为的函数（设置状态）。

这是一个link stackblitz

有什么建议吗？

【问题讨论】：

你能在 stackblitz 中重现这个吗？
@Justcode 更新问题

标签： reactjs chart.js2

【解决方案1】：

显然，只需在 onClick() 内部进行函数调用，但在更新数据集之前就可以解决问题。

我认为 setState 和画布更新后的渲染在某种程度上混淆了。

这是更新后的代码：

legend:{
             'onClick': function(e, legendItem) {
                var index = legendItem.datasetIndex;
                var ci = this.chart;
                that.updateValue(index);
                for(var i=0; i< ci.data.datasets.length;i++){
                  if (i !== index) {
                      ci.data.datasets[i].borderColor = ci.data.datasets[i].accentFadedColor;
                      ci.data.datasets[i].lineWidth = ci.data.datasets[i].highlightedWidth;
                  } else if (i == index){
                    ci.data.datasets[i].borderColor = ci.data.datasets[i].accentColor;
                    ci.data.datasets[i].lineWidth = ci.data.datasets[i].fadedWidth;

                  }
                }
              ci.update();                }

【讨论】：