文件下载与使用

优质

小牛编辑

135浏览

2023-12-01

我们提供资源包、CDN 服务、 Npm 包、Bower 包的形式来获得所需的文件或源代码。

一、文件下载

1、资源包

我们提供完整的 Highcharts 资源包，包含实例文件、所有的 js 压缩版及源码等。

到我们的下载中心页面即可获取最新的资源包。

解压下载得到的压缩包，进入相应的目录查看所有包含文件，Highcharts 提供的文件目录如下图所示：

Highcharts 资源包目录结构

目录结构说明：

|-- examples           例子
|-- gfx                例子用到的图片资源
|-- graphics           例子用到的图片资源 
|-- code               所有 js 文件及源代码
    |-- css            Highcharts css 文件（只用于 CSS 版本 Highcharts） 
    |-- lib            相关的库文件
    |-- modules        功能模块文件目录
    |-- themes         主题文件目录
    |-- highcharts.js              highcharts 主文件
    |-- highcharts.src.js          highcharts 主文件源码
    |-- highcharts-3d.js           highcharts 3d 功能文件
    |-- highcharts-3d.src.js       highcharts 3d 功能文件源码
    |-- highcharts-more.js         highcharts 增加功能文件
    |-- highcharts-more.src.js     highcharts 增加功能文件源码
    |-- readme.txt                 源代码目录说明文件
|-- index.htm          例子入口文件 
|-- license.pdf        使用协议文档
|-- readme.txt         说明文件

建议初学者从我们提供的例子代码入手，我们提供的丰富例子可以让你轻松入门。

2、在线 CDN 服务

您也可以直接引用我们的在线 CDN 服务，我们的 CDN 服务已经累计为上千个项目、企业提供稳定的服务，目前我们的 CDN 提供所有相关的文件，并提供 Https 协议访问，您可以不用下载即可享受高速的 CDN 服务。

更多详情详见：简数 CDN

3、在线实例

另外这里有简单例子，供兼容性测试

二、文件的使用

1、基础使用

Highcharts 最基本的运行只需要一个 JS 文件，即 highcharts.js，例如引入下面的文件即可创建基础的图表了。

<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>

注：Highcharts 从 4.2.0 开始，已经不依赖 jQuery（参考例子），如果你的页面中不需要 jQuery，那么无需引入；不依赖 jQuery 的原因是我们将去掉了适配器并支持 CommonJS 模块标准，也就是说 Highcharts 可以在所有 CommonJS 规范下的环境中运行（例如 Nodejs），这也使得我们的产品可以结合目前市面上常用的库使用，例如 React、Browserify 、Webpack、Vue、AngularJS 等。

2、功能模块

功能模块是在 Highcharts 主要功能的基础做的扩展，是由官方发布的功能包，常用功能模块有：

更多图表类型扩展模块（highcharts-more.js）
3D 图表模块（highcharts-3d.js）
导出功能模块（modules/exporting.js）
金字塔图表类型（modules/funnel.js）
钻取功能模块（modules/drilldown.js）
数据加载功能模块（modules/data.js）

更多模块可以在下载的资源包的 modules 目录找到，具体的功能我们会在后面的教程中讲解。

使用功能模块很简单，只需要引入对应的文件即可，唯一需要注意的是保证 highcharts.js 的引用顺序是在功能模块之前。

例如启用导出功能时需要引入的文件及顺序是：

<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script> 
<script src="http://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>

3. Highstock 和 Highmaps

Highstock 和 Highmaps 是另外两款针对不同使用场景的图表产品，三款产品之间相互独立又有密切关系，他们关系和混合使用的说明如下

1）三款产品简介

Highcharts 基础图表
Highstock 股票及大数据量时间轴图表
Highmaps 地图

2）相关之间的关系

Highstock 是完全包含 Highcharts 的，是在 Highcharts 的基础上增加了更多高级功能；Highmaps 则完全独立，不过我们提供了地图功能模块 map.js （在 Highmaps 资源包的 modules 目录）供 Highcharts 或 Highstock 调用。

3）混合使用（重要）

A. Highcharts + Highstock 时只需要引入 highstock.js

<script src="http://cdn.highcharts.com.cn/highstock/highstock.js"></script>

B. Highcharts + Highmaps 混合使用是需要引入 highcharts.js + map.js

<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script> 
<script src="http://cdn.highcharts.com.cn/highmaps/modules/map.js"></script>

C. Highstock + Highmaps 或 Highcharts + Highstock + Highmaps 混合使用时需引入 highstock.js + map.js

<script src="http://cdn.highcharts.com.cn/highstock/highstock.js"></script> 
<script src="http://cdn.highcharts.com.cn/highmaps/modules/map.js"></script>

注意：上面说到的 Highstock 是完全包含 Highcharts 的，如果在同一个页面重复引用的话就会报 #16 号错误。

4. 主题

我们提供图表更换主题功能，引入相应的主题 JS 文件即可改变图表样式。除默认主题样式外，我们提供了多款主题，另外你也可以根据需要自己设计图表主题。

我们提供的主题文件放置在资源包的 themes 目录下，您可以按照自己需要引用。

给图表加上灰色（Gray）主题时需要引用的文件如下：

<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script> 
<script src="http://cdn.highcharts.com.cn/highcharts/themes/gray.js"></script>

以上所有文件均可在我们的简数 CDN 服务页面找到。

5. RequireJS

Highcharts 支持 AMD 模块标准（例如 RequireJS），下面是在 RequireJS 中如何使用 Highcharts 及其模块的示例代码：

<html>

<head>
    <script src="require.js"></script>
    <script>
        require.config({
            packages: [{
                name: 'highcharts',
                main: 'highcharts'
            }],
            paths: {
                // 这里是 Highcharts CDN 路径，可根据实际情况修改
                'highcharts': 'https://code.highcharts.com.cn/highcharts/'
            }
        });
    </script>
</head>

<body>
    <div></div>
    <script>
        require([
            'highcharts',
            'highcharts/highcharts-more',
            'highcharts/modules/exporting',
            'highcharts/modules/accessibility'
        ], function (Highcharts) {
            // 这里是上面的文件加载完毕后执行的代码
            Highcharts.chart('container', {
                chart: {
                    polar: true
                },
                series: [{
                    data: [1, 2, 3, 4, 5]
                }]
            });
        });
    </script>
</body>

</html>

在线试一试

Highstock

对于 Highstock 可以基于上面的方法使用 highcharts.js + modules/stock.js，也可以直接引用 highstock.js，示例如下：

<html>

<head>
    <script src="require.js"></script>
    <script>
        require.config({
            packages: [{
                name: 'highcharts',
                main: 'highcharts'
            }],
            paths: {
                // 这里是 Highcharts CDN 路径，可根据实际情况修改
                'highcharts': 'https://code.highcharts.com.cn/highstock/'
            }
        });
    </script>
</head>

<body>
    <div></div>
    <script>
        require([
            'highcharts/highstock',
        ], function (Highcharts) {
            // 这里是上面的文件加载完毕后执行的代码
            Highcharts.chart('container', {
                chart: {
                    polar: true
                },
                series: [{
                    data: [1, 2, 3, 4, 5]
                }]
            });
        });
    </script>
</body>

</html>

在线试一试

6. ES 模块

自 Highcharts 6.1.0 开始，我们的 CDN 提供了 ECMAScript Modules 支持，您可以不需要借助编译工具在现代的浏览器中直接引用 ES 模块（须在 script 标签中制定 type 为 module）示例如下：

<script type="module">  
    // ES Modules 文件放置在 es-modules 中
    import Highcharts from 'https://code.highcharts.com.cn/highcharts/es-modules/masters/highcharts.js';

    Highcharts.chart('container', {
        //...
    });
</script>