angular 使用 highcharts

1.在一个新的angualr项目中，添加hightcharts

• 1.npm install highcharts-angular --save（获取highcharts的下载包）
• 2.npm install highcharts highcharts-angular --save(安装highcharts库)

2.在根目录中（app.module.ts）添加依赖，并注入

• import { HighchartsChartModule } from ‘highcharts-angular‘;
• 在imports中注入 HighchartsChartModule

3.这时候就可以正常的进行使用了

•  在对应的组件中的html文件中的html中写你的展示代码

　　如:

　　<highcharts-chart 
  　　  [Highcharts]="Highcharts"
   　　 [options]="chartOptions"

    　　style="width: 100%; height: 400px; display: block;"
　　></highcharts-chart>

• 在ts中写你的逻辑
  • 1.import * as Highcharts from ‘highcharts‘;
  • 2.
    Highcharts = Highcharts;

            chartOptions = {

                series: [{

                    data: [1, 2, 6]

                }]

        };

这样一个简单的angular使用highcharts的实例就完成了 

如果你还是不懂则请参考：https://www.highcharts.com.cn/docs/highcharts-angular这个链接非常详细，有你需要的东西

angular 使用 highcharts

原文：https://www.cnblogs.com/rockyjs/p/12180114.html