微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐