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

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

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

目录结构说明：

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

2、在线 CDN 服务

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

更多详情详见：简数 CDN

1、基础使用

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

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

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

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

  • 更多图表类型扩展模块（highcharts-more.js）
  • 导出功能模块（modules/exporting.js）
  • 金字塔图表类型（modules/funnel.js）
  • 钻取功能模块（modules/drilldown.js）
  • 数据加载功能模块（modules/data.js）
    更多模块可以在下载的资源包的 目录找到，具体的功能我们会在后面的教程中讲解。

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

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

3. Highstock 和 Highmaps

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

1）三款产品简介

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

    2）相关之间的关系

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

3）混合使用（重要）

  1. <script src="http://cdn.hcharts.cn/highstock/highstock.js"></script>

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

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

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

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

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

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

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