Angular 10 - Chart.js 在运行时使用 convas id 在 Array 中绘制图表

问题描述

我需要根据数据库中可用的数据对象绘制图表。为了处理这个问题，我创建了对象数组并使用了 convas ID，我在 Object 中有一个占位符。在 HTML 中，我从 Object 分配 ID。但是，我收到了以下错误 -

未能创建图表：无法从给定项目获取上下文

数据类：

export class SetPressureData {
  popPressure: number;
  seatingPressure: number;
  conclusion: string;
  conclusionOperatorComment: string;
  isSetPressureChartAvailable = false;
  chartName: string;
  showOnCert: boolean=true;
}

我在 .ts 文件中的代码如下：

setPressureTestLinechart: [];
....
if (_testResultTS.sensorId == SensorId.PZT_01 || _testResultTS.sensorId == SensorId.PT_PT05) {
  this.chartName = 'setPressureChart' + this.setPressureDataCount;
  this.setPressureData.chartName = this.chartName;
  this.prepareCharts(this.setPressureTestLinechart,this.chartName,_testResultTS.values,-1,1);
  this.setPressureData.isSetPressureChartAvailable = true;
}

prepareCharts(chartName: Chart,chartCanvas: string,tsSample: TimeSeriesSample[],minValOffset ? : number,maxValOffset ? : number) {
  let timeStamps = [];
  let values = [];
  let minValue = Number.MAX_VALUE;
  let maxValue = Number.MIN_VALUE;

  chartName = new Chart(chartCanvas,{
    type: 'line',data: {
      labels: timeStamps,datasets: [{
        pointRadius: 0,data: values,borderColor: '#3e95cd',}]
    },options: chartOptions
  });
}

我的 HTML 代码如下：

<ng-container *ngIf="certificateData.setPressureResults?.length>0;else pressureTestAborted">
    <div *ngFor="let setPressureData of certificateData.setPressureResults,let i=index">
        <!--Iterate over the Array for all Set Pressure Test Executed -->
        <div id="{{i}}" *ngIf="setPressureData.showOnCert">
            <span>
                <br />
                Test #{{i+1}}
            </span>
            <input type="checkbox" (click)="updateShowFlag(i)" />Please check,if not required on certificate
            <mat-card-content>
                <div style="display: inline-block; vertical-align: top; width: 41%;">
                    <span class="field-label-prep">Pop Pressure:</span><span class="data">{{setPressureData.popPressure}}</span> <span class="units">bar</span><br />
                    <span class="field-label-prep">Seating Pressure:</span> <span class="data">{{setPressureData.seatingPressure}}</span><span class="units">bar</span> <br />
                    <div class="col-style-prep" *ngIf="setPressureData.conclusionOperatorComment">
                        <span class="field-label-prep">Operator Comment:</span><br />
                        <span class="comment">{{setPressureData.conclusionOperatorComment}}</span>
                    </div>
                </div>
                <div style="display: inline-block; width: 48%;">
                    <canvas class="chart-style" height="85" id="{{setPressureData.chartName}}"></canvas>
                    <span class="time-caption">[Time in mm:ss]</span>
                </div>
                <div *ngIf="setPressureData.conclusion!=null" style="display: inline-block; vertical-align: top; width: 11%;">
                    <span
                        class="result-status-column"
                        [ngClass]="{ 'testOpResults-Green': (setPressureData.conclusion === testOperationresults.Approved ||setPressureData.conclusion === testOperationresults.Performed),'testOpResults-Red': setPressureData.conclusion === testOperationresults.Failed,'testOpResults-Orange': setPressureData.conclusion === testOperationresults.Aborted }"
                    >
                        {{setPressureData.conclusion}}
                    </span>
                </div>
            </mat-card-content>
        </div>
    </div>
    <!-- End of Array Iteration-->
</ng-container>

解决方法

问题是 Chart.js 在您创建图表时找不到与指定的 canvas 相匹配的 id。

chartCanvas

由于 new Chart(chartCanvas,{ ... 模板中的 *ngIf 和 *ngFor 指令，HTML 元素仅包含在 canvas 中一次 {{1}数组包含一些元素。 Angular 自动更改检测机制通常负责保持 DOM 与 certificateData.setPressureResults 类中包含的数据同步。

要解决您的问题，您需要在更新 DOM 之后但在创建图表之前手动触发更改检测。这可以通过调用 ChangeDetectorRef.detectChanges() 来完成。

因此，您的 component 类的代码必须更改如下：

certificateData.setPressureResults