无法读取未定义的 HighCharts 的属性“系列”答案

【问题标题】：Cannot read property 'series' of undefined HighCharts无法读取未定义的 HighCharts 的属性“系列”
【发布时间】：2020-06-02 11:51:48
【问题描述】：

想要获取图表类型的完整数据，但我收到此错误无法读取未定义的属性“系列”。

这是component.ts和服务文件

const sampleData: Overview[] = [
      {
        chart: {
          type: 'column',
        },
        title: {
          text: 'Total Predected Revenue Vs Actual Revenue',
        },
        xAxis: {
          categories: [
            '2010',
            '2011',
            '2012',
            '2013',
            '2014',
            '2015',
            '2016',
            '2017',
          ],
          crosshair: true,
        },
        yAxis: {
          min: 0,
        },
        series: [
          {
            name: 'Predected',
            data: [14, 17, 9, 10, 6, 19, 6, 8],
          },
          {
            name: 'Actual',
            data: [65, 74, 44, 66, 9, 23, 36, 51],
          },
        ],
      }
    ];

这是 .ts 文件

data: Overview[] = [];

private onLoaded(state: OverviewLoadedState) {
    const me = this;
    me.data = state.data;
    me.error = false;
    me.loading = false;
    console.log(me.data)
  }

这里是.html

<div *ngIf="data">
        <highcharts-chart style="width: 100%; display: block" [Highcharts]="Highcharts" [options]="data"
            [(update)]="updateDemo" [runOutsideAngular]=true>
        </highcharts-chart>
    </div>

帮我解决这个错误。

【问题讨论】：

在模板中某处显示系列？
您在哪个文件中收到此错误？
你考虑过使用 Highcharts-Angular 官方包装器吗？请通过文档和演示库了解：github.com/highcharts/highcharts-angular

标签： angular highcharts angular9

【解决方案1】：

问题在模板中的 if 条件中，将其更改为：-

<div *ngIf="data?.length > 0">
        <highcharts-chart style="width: 100%; display: block" [Highcharts]="Highcharts" [options]="data"
            [(update)]="updateDemo" [runOutsideAngular]=true>
        </highcharts-chart>
    </div>

因为在空白数组的情况下您的条件也会满足。

【讨论】：