折线图不是每次都更新

Question

所以我使用了 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

有什么建议吗？

Answer 1

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

我认为 setState 和 canvas 更新后的渲染不知何故混淆了。

这是更新后的代码：

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();                }

折线图不是每次都更新

Line Chart not updating everytime

reactjs

chart.js2