通过 npm 安装

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

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

npm install highcharts --save

1. 加载  Highcharts

var Highcharts = require('highcharts');

// 在 Highcharts 加载之后加载功能模块
require('highcharts/modules/exporting')(Highcharts);
// 创建图表
Highcharts.chart('container', { 
      /*Highcharts 配置*/
});

2. 加载 Highstock 或 Highmaps

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

var Highcharts = require('highcharts/highstock');

// 加载 地图 模块
require('highcharts/modules/map')(Highcharts);

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

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

3. import 语法

import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';

HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);

注意：类似 highcharts-more、drilldown、highcharts-3d ，Highcharts 其他模块都需要初始化（类似 HighchartsMore(Highcharts)）

4. TypeScript

import * as Highcharts from 'highcharts';
// 加载 Highstock 或 Highmaps 方式类似
// import Highcharts from 'highcharts/highstock';

// 加载导出模块
import * as Exporting from 'highcharts/modules/exporting';
// 初始化导出模块
Exporting(Highcharts);

// 其他模块的加载方式同上

// 初始化图表
Highcharts.chart('container', {
  // 配置
});

5. 相关内容

• 在 Vue 中使用 Highcharts
• 在 React 及 Webpack 中使用 Highcharts
• 在 ionic 中使用 Highcharts