Highcharts配置

1、基础使用

<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>

2、功能模块的使用

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

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

　　更多模块能够在下载的资源包的 modules 目录找到。

　　使用方法：

　　<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> 　 <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> 　 <script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>

3、产品间的混合模式使用

　　一、三款产品简介：

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

　　二、产品间的关系：

　　　　Highstock 是彻底包含 Highcharts 的，是在 Highcharts 的基础上增长了更多高级功能；

　　　　Highmaps 则彻底独立，不过官方提供了地图功能模块 map.js （在 Highmaps 资源包的 modules 目录）供 Highcharts 或 Highstock 调用。

　　三、混合使用方法：

• • Highcharts + Highstock 时只须要引入 highstock.js
  • Highcharts + Highmaps 混合使用是须要 引入 highcharts.js + map.js
  • Highstock + Highmaps 或 Highcharts + Highstock + Highmaps 混合使用时需引入 highstock.js + map.js

　　　　注意： Highstock 是彻底包含 Highcharts 的，若是在同一个页面重复引用的话就会报 #16 号错误。

4、主题

　　官方提供图表更换主题功能，引入想应用的主题 JS 文件便可改变图表样式。除默认主题样式外，还提供了多款主题，另外也能够根据须要本身设计图表主题。

　　主题文件放置在资源包的 theme 目录下，能够按需引用。

　　相关示例：

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

　　<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> 　 <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> 　 <script src="http://cdn.hcharts.cn/highcharts/themes/gray.js"></script>