HIGHCHARTS
  • 关于我们
    • 关于我们
    • 联系方式
    • 新闻动态
    • 合作伙伴
  • 在线商店
  • 在线实例
    • Highcharts 演示
    • Highcharts Stock 演示
    • Highcharts Maps 演示
    • Highcharts Gantt 演示
    • 图集new
    • 客户案例
  • 文档教程
    • 使用教程
    • API 文档
    • 兼容性
    • 常见错误
    • 更新日志
  • 服务与支持
    • 获取技术支持
    • 下载中心
    • 地图数据
    • 产品规划
  • 产品中心
    • Highcharts
    • Highcharts Stock
    • Highcharts Map
    • Highcharts iOS
    • Highcharts Android
    • JShare
    • 爱图说
    • Highcharts 云服务
    • Highcharts 编辑器
    • 插件扩展
    • 应用扩展
  • 博客
  • 技术社区
  • 快速上手
    • Highcharts 系列软件简介
    • 1 分钟上手 Highcharts
    • 文件下载与使用
    • 通过 npm 安装
    • 通过 Bower 安装
    • 如何设置图表配置选项
    • Highcharts 兼容性
    • Highcharts 使用协议
  • 基础教程
    • 图表主要组成
    • 图表配置
    • 标题
    • 坐标轴
    • 数据列
    • 颜色
    • 数据提示框
    • 图例
    • 版权信息
    • HTML标签
    • 标示线
    • 标示带
    • 图表缩放
    • 语言文字
    • 标签及字符串格式化
    • 钻取功能
    • 3D 图表
    • 响应式
  • 数据处理
    • 数据处理概述
    • 服务端动态渲染图表
    • Ajax 请求数据接口
    • 处理文本或文本数据文件
    • 数据功能模块
  • 图表类型
    • 图表类型
    • 直线图
    • 曲线图
    • 面积图及面积范围图
    • 柱状图和条形图
    • 饼图
    • 范围图
    • 散点图及气泡图
    • 漏斗图及金字塔图
    • 极地图
    • 瀑布图
    • 误差线图
    • 箱线图
  • 高级特性
    • 堆叠图
    • 自由绘图
    • 国际化
  • 图表导出模块
    • 图表导出模块概述
    • 客户端导出
    • 搭建导出服务器
    • 命令行导出
    • 导出 Excel 数据文件
  • 图表设计及样式
    • 图表设计及样式
    • 颜色
    • 主题
  • 插件扩展
    • 插件扩展概述
    • 创建插件
    • 提交插件到官方插件库
  • 地图(Highmaps)
    • 开始使用 Highmaps
    • 地图数据集
    • 经纬度
    • 地图导航器
  • 股票图(Highstock)
    • 开始使用 Highstock
    • 范围选择器
    • 导航器
    • 滚动条
    • K 线图
    • 技术指标
    • 自定义技术指标
  • 官方扩展包(Vue React Angular iOS Android .NET)
    • Highcharts .NET
    • Highcharts Vue
    • Highcharts React
    • Highcharts Angular
    • Highcharts iOS
    • Highcharts Android
收起菜单 教程目录

文件下载与使用

最后修改时间:2022-12-15 18:11

我们提供资源包、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、在线实例

  • Highcharts 在线演示
  • Highstock 在线演示
  • Highmaps 在线演示

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

  • Highcharts 在线演示
  • Highstock 在线演示
  • Highmaps 在线演示

二、文件的使用

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 id="container"></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 id="container"></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>

版权声明

本教程仅用于学习、研究和交流目的,欢迎非商业转载。转载请注明出处及完整的链接。

标题:文件下载与使用 | Highcharts 使用教程

链接:https://www.hcharts.cn/docs/start-download/

   上一篇 下一篇   
  目录
    简数科技微信,同步更新Highcharts教程

    订阅更新

    © 2022 Highcharts 中文官网, 由 简数科技 提供服务, 浙ICP备16004892号-6, 浙公网安备33011002011664号
    在线客服

    选择服务类型

    技术问题

    • 技术社区
    • 技术支持
    • Q Q 群

    商业授权

    • 使用协议
    • 购买授权
    • 申请试用
    • 授权查询

    图表定制

    • 服务内容
    • VIP 专属服务

    销售服务:    技术服务:

    服务热线:0571 - 8620 8605 / 181 0659 5564    邮件:sales@jianshukeji.com

    服务时间:工作日 9:00 ~ 18:00    紧急服务 :7 x 24 响应(仅限电话)

    重要通知!

    尊敬的用户您好:
    由于域名备案调整,我们将于 2023-01-01 ~ 2023-01-07 日陆续停用 highcharts.com.cn 域名,受影响的网站及域名如下:

    网站或服务名称域名替代的网站
    主站www.highcharts.com.cnwww.hcharts.cn
    静态资源服务/CDNcdn.highcharts.com.cn
    code.highcharts.com.cn
    code.hcharts.cn
    img.highcharts.com.cnimg.hcharts.cn
    API 文档api.highcharts.com.cnapi.hcharts.cn
    导出服务export.highcharts.com.cnexport.hcharts.cn

    以上网站服务及 highcharts.com.cn 域名下的网站将于 2023-01-08 日全部下线,未来一段时间将不可访问,后续我们将上线新的网站。

    如果您的应用中有使用到相关服务,请抓紧时间对链接进行调整(特别是静态资源/CDN 服务的链接),以免影响您的网站或应用的正常运行,由此给您带来的不便,敬请谅解。

    如需帮助,请及时与我们联系:0571-86208605 / 18106595564(微信)。

    简数科技 2022-12-22