提示:npm 是 nodejs 包管理工具,可以方便的管理和使用 nodejs 包,如果你暂时没有用到,可以跳过本文。

      我们提供的 Highcharts npm 包,包含了 Highcharts、Highstock、Highmaps 及所有的功能模块,通过下面的命令即可完成安装

      1. npm install highcharts --save

      1. 加载 Highcharts

      1. var Highcharts = require(‘highcharts’);
      2. // 在 Highcharts 加载之后加载功能模块
      3. require(‘highcharts/modules/exporting’)(Highcharts);
      4. // 创建图表
      5. Highcharts.chart(‘container’, {
      6. /Highcharts 配置/
      7. });

      2. 加载 Highstock 或 Highmaps

      Highstock 是完全包含 Highcharts的,所以没必要将两个文件都引用;Highmaps 可以单独使用也可以通过地图模块来引用。

      1. var Highcharts = require('highcharts/highstock');
      2. // 加载 地图 模块
      3. require('highcharts/modules/map')(Highcharts);

      如果只需要 Highmaps 功能,那么只需要引用 highmaps.js 即可

      1. var Highcharts = require('highcharts/highmaps');

      3. import 语法

      1. import Highcharts from ‘highcharts/highstock’;
      2. import HighchartsMore from ‘highcharts/highcharts-more’;
      3. import HighchartsDrilldown from ‘highcharts/modules/drilldown’;
      4. import Highcharts3D from ‘highcharts/highcharts-3d’;
      5. HighchartsMore(Highcharts)
      6. HighchartsDrilldown(Highcharts);
      7. Highcharts3D(Highcharts);

      4. TypeScript

      1. import as Highcharts from ‘highcharts’;
      2. // 加载 Highstock 或 Highmaps 方式类似
      3. // import Highcharts from ‘highcharts/highstock’;
      4. // 加载导出模块
      5. import as Exporting from ‘highcharts/modules/exporting’;
      6. // 初始化导出模块
      7. Exporting(Highcharts);
      8. // 其他模块的加载方式同上
      9. // 初始化图表
      10. Highcharts.chart(‘container’, {
      11. // 配置
      12. });

      5. 相关内容

      原文: https://www.hcharts.cn/docs/install-from-npm