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这个链接非常详细,有你需要的东西
上一篇:javascript-如何在选择过程中禁用工具提示?


下一篇:javascript-我可以在悬停时使用highcharts列堆叠而不突出整个意甲