使用 AMD 或 CommonJS 模块安装 Highcharts｜官方技术文档使用说明

Highcharts.js2025-12-09 12:27

使用 AMD 或 CommonJS 模块安装

AMD

Highcharts 兼容 AMD 模块加载器（如 RequireJS）。以下示例演示了如何使用 RequireJS 从我们的 CDN 加载 Highcharts 及两个模块。

html 复制代码

<html>
    <head>
        <script src="require.js"></script>
        <script>
            require.config({
                packages: [{
                    name: 'highcharts',
                    main: 'highcharts'
                }],
                paths: {
                    // Change this to your server if you do not wish to use our CDN.
                    'highcharts': 'https://code.highcharts.com'
                }
            });
        </script>
    </head>
    <body>
        <div id="container"></div>
        <script>
            require([
                'highcharts',
                'highcharts/modules/exporting',
                'highcharts/modules/accessibility'
            ], function (Highcharts) {
                // This function runs when the above files have been loaded.

                // Create a test chart.
                Highcharts.chart('container', {
                    series: [{
                        data: [1,2,3,4,5]
                    }]
                });
            });
        </script>
    </body>
</html>

观看 jsFiddle在线.

使用 AMD 模块时，Highcharts 还允许在同一页面中混合使用多个版本。

CommonJS

Highcharts 使用的是统一模块定义（UMD）模式，因此它支持 CommonJS------这是 Node.js 所使用的模块系统。

以下示例假设你是通过 npm 安装 Highcharts，更多详情请参见使用 npm 安装。

js 复制代码

// Load Highcharts
var Highcharts = require('highcharts');
// Alternatively, this is how to load Highstock. Highmaps and Highcharts Gantt are similar.
// var Highcharts = require('highcharts/highstock');

// Load the exporting module
require('highcharts/modules/exporting');

// Generate the chart
Highcharts.chart('container', {
  // options - see https://api.highcharts.com/highcharts
});