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

猜你喜欢

转载自www.cnblogs.com/rockyjs/p/12180114.html