自定义的NG2-Charts空屏幕

Question

我在ng2-charts中的线路图上工作。我正在尝试显示图表，如果有数据，如果没有数据，我想显示No Data Available而不是空图。

html

<div style="display: block;" *ngIf="lineChartData">
  <canvas  baseChart width="400" height="400"
    [datasets]="lineChartData"
    [labels]="lineChartLabels"
    [options]="lineChartOptions"
    [colors]="lineChartColors"
    [legend]="lineChartLegend"
    [chartType]="lineChartType"
    [plugins]="lineChartPlugins">
  </canvas>
</div>

ts

public lineChartData: ChartDataSets[] = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
];
public lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];

结帐stackblitz

Answer 1

您必须检查数据变量长度，例如

html

<div style="display: block;" *ngIf="lineChartData[0]['data'].length">
  <canvas baseChart width="400" height="400"
    [datasets]="lineChartData"
    [labels]="lineChartLabels"
    [options]="lineChartOptions"
    [colors]="lineChartColors"
    [legend]="lineChartLegend"
    [chartType]="lineChartType"
    [plugins]="lineChartPlugins">
  </canvas>
</div>
<div *ngIf="lineChartData[0]['data'].length === 0 ">
  No Data Available
</div>

TS

export class AppComponent  {
  public lineChartData: ChartDataSets[] = [
    { data: [], label: 'Series A' },
  ];
}

Answer 2

您可以使用*ngIf的else块：

<div style="display: block;" *ngIf="lineChartData; else elseBlock">
  <canvas baseChart width="400" height="400"
    [datasets]="lineChartData"
    [labels]="lineChartLabels"
    [options]="lineChartOptions"
    [colors]="lineChartColors"
    [legend]="lineChartLegend"
    [chartType]="lineChartType"
    [plugins]="lineChartPlugins">
  </canvas>
</div>
<ng-template #elseBlock>No Data Available.</ng-template>

stackbliz演示在这里。

如果lineChartData可以是空的([](，并且您希望在这种情况下隐藏图表，则可以使用：

<div style="display: block;" *ngIf="lineChartData && lineChartData.length; else elseBlock">

stackblitz演示2在这里。

和/或如果也要守卫data变量，请执行：

<div style="display: block;" *ngIf="lineChartData && lineChartData.length && lineChartData[0].data.length; else elseBlock">

演示。