动画（onComplete或onProgress）

Question

我正在使用reactjs，我在显示点内的数据集值时遇到问题。我设法编写了正确的代码，但问题是，只有刷新浏览器后，结果才会出现。第一次没用过

我尝试在图表选项中使用动画，并且我使用了onComplete && ononProgress回调。我以为是因为数据中有些异步，所以我尝试了setTimeout但还是一样。

代码：

animation: {
                        onProgress: function(animation) {
                          setTimeout(() => {
                            var ctx = this.chart.ctx;
                            let x = 0;
                            let y = 0;
                            let radius = 0;
                            let data = [];

                            ctx.fillStyle = "white";
                            ctx.font = "20px serif";

                            data = this.data.datasets[0].data;
                            animation.duration = 1;
                            animation.hidden = true;
                            // console.log("animation ==>", animation.easing);
                            // console.log("chart ==>", this.chart);
                            // console.log("this data==>", this.data);
                            data.forEach((element, i) => {
                              if (this.data.datasets[0]._meta[0]) {
                                x = this.data.datasets[0]._meta[0].data[i]._view
                                  .x;
                                y = this.data.datasets[0]._meta[0].data[i]._view
                                  .y;
                                radius = this.data.datasets[0]._meta[0].data[i]
                                  ._view.radius;
                                ctx.fillText(element, x - radius / 2, y);
                              }
                            });
                          }, 0);
                        }
                      }