Chartjs-放慢动画并更新条形图颜色

Question

我正在使用Angular和ng2-charts开发小型分类算法可视化应用。该应用程序使用条形图表示我将要排序的数字。我想为每个步骤更改条形的颜色：默认颜色，比较，交换，交换，恢复为默认颜色。我无法弄清楚如何更新图表以使颜色显示在流程的每个步骤中。 backGroundColor数组正在正确更新。我试图在此处和此处设置一些setTimeout()，然后再设置chart.update()，但是它不起作用。

将如何使其起作用？这是我的代码，仅能看到compareColor，swapColor永远不会出现：

@ViewChild(BaseChartDirective) chart: BaseChartDirective;
public barChartData: ChartDataSets[] = [
 {
   data: new Array(),
   backgroundColor: []
 }
];

bubbleSort() {
    let n = this.barChartData[0].data.length;
    do {
      var swapped = false;
      for (let i = 1; i < n; i++) {
        this.barChartData[0].backgroundColor[i - 1] = this.comparedColor;
        this.barChartData[0].backgroundColor[i] = this.comparedColor;
        this.refresh_chart();

        if (this.barChartData[0].data[i - 1] > this.barChartData[0].data[i]) {
          this.barChartData[0].backgroundColor[i - 1] = this.swapColor;
          this.barChartData[0].backgroundColor[i] = this.swapColor;

          this.refresh_chart();

          const temp = this.barChartData[0].data[i];
          this.barChartData[0].data[i] = this.barChartData[0].data[i - 1];
          this.barChartData[0].data[i - 1] = temp;

          swapped = true;

          this.barChartData[0].backgroundColor[i - 1] = this.comparedColor;
          this.barChartData[0].backgroundColor[i] = this.comparedColor;
        }
      }
    } while (swapped !== false);
    this.chart.chart.update();
  }

  refresh_chart() {
    setTimeout(() => {
      this.chart.chart.update();
    }, 1000);
  }

谢谢

Answer 1

https://www.chartjs.org/docs/latest/configuration/animations.html