Angular中动态的更新highcharts数据

1、安装以及配置highcharts

• 安装模块：

npm install highcharts-angular --save 

npm install highcharts --save

• app.module.ts配置：
  引入HighchartsChartModule ：import { HighchartsChartModule } from 'highcharts-angular';
  在imports中引入模块：HighchartsChartModule

• 在用到的那个组件中去导入highcharts的配置：

import * as Highcharts from 'highcharts';

export class AppComponent { 
  Highcharts: typeof Highcharts = Highcharts; 
  chartOptions: Highcharts.Options = { 
    series: [{ data: [1, 2, 3], type: 'line' }]
  }
};

• template模板中调用：

<highcharts-chart 
  [Highcharts]="Highcharts" 
  [options]="chartOptions" 
  style="width: 100%; height: 400px; display: block;" 
>
</highcharts-chart>

2、highcharts中新增、修改数据

• 模板中定义一个名称：

<highcharts-chart 
  [Highcharts]="Highcharts" 
  [options]="chartOptions1" 
  #myChart
  style="width: 100%; height: 400px; display: block;" 
></highcharts-chart>

• 使用ViewChild去获取Dom节点：

  @ViewChild("myChart") myChart: any;

• 柱状图增加数据：

this.myChart.chart.addSeries( 
  { 
    name: '夏季', 
    data: [4, 7, 10, 12, 14, 17, 13, 14, 21, 19, 9, 5], 
    color: 'red' 
  } 
);

• 更新数据：
  更新某条数据时：

this.myChart.chart.series[1].update(
  { 
    data: [12, 7, 30, 42, 14, 17, 13, 24, 21, 19, 9, 5] 
  }
);

更新多条数据时：

this.myChart.chart.update(
  { 
    series: [ 
    { 
      name: "春季", 
      data: [43, 10, 12, 14, 17], 
    },
    { 
      name: "夏季", 
      data: [29, 10, 18, 12, 14, 17], 
     }, 
   ], 
});