使用 Ng2-Charts 更新 Charts.js 上的图表数据答案

【问题标题】：Updating Chart Data on Charts.js with Ng2-Charts使用 Ng2-Charts 更新 Charts.js 上的图表数据
【发布时间】：2021-11-08 23:20:09
【问题描述】：

所以我使用 chart.js 和 ng2-charts 为我的平台创建了一些仪表图表，以监控机器油箱内的液位。

我通过外部 API 获取这些值，但我遇到了一个问题，即在我从 API 获取值之前，正在呈现图表。

有没有办法只有在我从 API 获取值或强制图表重新渲染后才能渲染？

<canvas id="hotGauge"
  baseChart
  [labels]="GaugeLabels"
  [chartType]="GaugeType"
  [options]="hotGaugeOptions"
  [colors]="hotGaugeColors"
  [legend]="GaugeLegend"
  [data]="hotGaugeData">


@Component({
  selector: 'app-machine-details',
  templateUrl: './machine-details.component.html',
  styleUrls: ['./machine-details.component.scss'],
  providers: []
})

export class MachineDetailsComponent implements OnInit {
 
 //This the value the Chart gets rendered with, if I equal it to 23 the chart will render 23% and not the expected value from the API
 hot :number;

 hotGaugeData: MultiDataSet=[];  

  constructor(private machinesService: MachinesService) { }

  ngOnInit() {
    //How I get the value from the API
    this.route.params.subscribe(params => {
      this.machinesService.getLastMachineStatusByMac(params.mac).subscribe((res) =>{
        this.hot = Math.floor((res.hotWaterDistance * 100) / 200);
      });
    });

    this.setGraphData();
  }

  setGraphData() {
   this.hotGaugeData=[];
   this.hotGaugeData[0]=[this.hot, 100-this.hot];
  }
}

【问题讨论】：

标签： javascript angular charts chart.js ng2-charts

【解决方案1】：

你可以在你的画布上放置一个ngIf来检查是否有这样的数据：

<canvas id="hotGauge"
  *ngIf="hotGaugeData"
  baseChart
  [labels]="GaugeLabels"
  [chartType]="GaugeType"
  [options]="hotGaugeOptions"
  [colors]="hotGaugeColors"
  [legend]="GaugeLegend"
  [data]="hotGaugeData">

示例：https://codesandbox.io/s/gallant-wiles-c8w4p?file=/src/app/app.component.ts

【讨论】：