Highcharts配置

Posted 2020-08-16 心知梦圆

一、基础使用

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

二、功能模块的使用

　　功能模块是在 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>

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

　　1、三款产品简介：

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

　　2、产品间的关系：

　　　　Highstock 是完全包含 Highcharts 的，是在 Highcharts 的基础上增加了更多高级功能；

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

　　3、混合使用方法：

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

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

四、主题

　　官方提供图表更换主题功能，引入想应用的主题 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>