chartjs angular 更新顺序

Question

有一个关于 angular11 环境中的 chartjs 的问题。 我有 2 个图表

appcomponent.html：

<div class="col-sm">
  <canvas id="bl" ></canvas>
</div>
<div class="col-sm">
  <canvas id="bl2" ></canvas>
</div>

app.component.ts：

export class AppComponent {
            testChart: any;
            testChart2: any;
            ...
  constructor(private dataSvc:DataRetrieverService){
    dataSvc.getUsers.subscribe( data=> {
      if(!data) return;
      this.Users = data;
      this.Users.forEach(x => {
        this.UsersLabels.push(x.StoreDateTime);
        this.UsersAmount.push(x.Amount);
        this.CreateCharts();
      })
    })

    dataSvc.getParts.subscribe( data=> {
      if(!data) return;
      this.Parts = data;
      this.Parts.forEach(x => {
        this.PartsLabels.push(x.StoreDateTime);
        this.PartsAmount.push(x.Amount);
        this.CreateCharts();
      })
    })
  }
  
  

  CreateCharts(){
    if(this.testChart){
      this.testChart.destroy()
    }
    if(this.testChart2){
      this.testChart2.destroy()
    }
    
    this.testChart = new Chart('bl', {
      type: 'line',
      data: {
        labels: this.UsersLabels,
        datasets: [
          {
            label: 'Users',
            data: this.UsersAmount,
            borderColor: '#01c38c',
            backgroundColor: '#01c38c',
            fill: false
          }
        ]
      },
      options: {... }
      }
    });

    this.testChart2 = new Chart('bl2', {
      type: 'line',
      data: {
        labels: this.PartsLabels,
        datasets: [
          {
            label: 'Parts',
            data: this.PartsAmount,
            borderColor: '#01c38c',
            backgroundColor: '#01c38c',
            fill: true
          }
        ]
      },
      options: {...
      }
    });

正在创建testChart: 任何正确的事情吗？

为什么我必须在每次从服务中检索数据后调用this.CreateCharts()才能使其正常工作？

我希望如果我在构造函数的最后一步执行this.CreateCharts()它也可以工作，但是我的图表是空的。

Answer 1

您订阅了从dataSvc.getUsers和dataSvc.getParts获得的两个Observable ，相应的结果将异步传递，当然是在constructor调用完成之后。 因此，如果使用给定代码，仅在constructor末尾调用CreateChart() ，您将看到两个空图表，因为UsersLabels 、 UsersAmount 、 PartsLabels和PartsAmount仍然为空 arrays。

然而，每次任何Observable交付新数据时都无需重新创建这两个图表。 您最好将CreateChart()拆分为单独的方法，每个图表一个。 此外，您最好不要使用chart.destroy() ，而是最好简单地更新现有图表data并在之后调用chart.update() 。 请查看 Chart.js 文档的添加或删除数据部分。