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这个链接非常详细,有你需要的东西