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（）内部，我正在调用导致此行为的另一个函数（设置state）。

这是一个link，值得一看

有什么建议吗？

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

折线图并非每次都更新

1 个答案: