Highcharts设置

Highcharts 的运行需要两个 js 文件， highcharts.js 及 jQuery 、 MooTools 、Prototype 、Highcharts Standalone Framework 常用 js 框架中的一个。

引入 js 文件可以是引入本地文件和在线文件，针对不同的 js 框架需要引入的文件有所不同，下面详细说明。

一、引入在线资源

1、jQuery

jQuery 是目前使用最广泛的 JS 框架，无特殊说明，本教程所用的环境及所有例子都是基于 jQuery 的。

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

2、Highcharts Standalone Framework

jQuery 目前用的最广泛，但是其体积过大（100K 以上），在移动端网络带宽有限的情况下，并不是最优选择，如果你的页面没有其他地方需要用到 jQuery，jQuery 仅仅用于 highcharts，这种情况可以考虑使用 Highcharts Standalone Framework ，Highcharts Standalone Framework 压缩后的大小只有 2k 哦。

<script src="https://cdn.hcharts.cn/highcharts/adapters/standalone-framework.js"></script>
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js" ></script>

关于使用 Highcharts Standalone Framework 的实例及注意事项见：https://highcharts.me/article/19

3、MooTool 或 Prototype

使用 MooTools 或 Prototype 需要额外的引入 Highcharts 提供的适配器。 使用 MooTools 需要引入的文件如下：

<script src="https://cdn.hcharts.cn/mootools/MooTools-Core-1.5.1.js"></script>
<script src="https://code.highcharts.com/adapters/mootools-adapter.js"></script>
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script> 

使用 Prototype 需要引入的文件如下：

<script src="https://cdn.hcharts.cn/prototype/prototype-1.7.2.js"></script>
<script src="https://code.highcharts.com/adapters/prototype-adapter.js"></script>
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script> 

二、引入本地文件

上节说到 Highcharts 所有 JS 文件都可以通过下载获得，如果你不想引入在线资源，可以直接引入本地文件。

本地引入文件同在线引入，这里拿 jQuery 来举例说明

三、高级功能

Highcharts 提供了图表导出、图表主题等其他额外功能，这些功能的实现，需要额外引入相关 JS 文件。

1、图表导出功能

导出功能是将图表导出下载为常见图片文件或 PDF 文档的功能，想要使用这个功能，额外引入 exporting.js 即可

<script src="https://cdn.hcharts.cn/highcharts/modules/exporting.js" type="text/javascript"></script> 

2、图表主题

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

Highcharts 提供的主题文件放置在 /js/themes/ 目录下，给图表添加灰色（Gray）主题的代码是：

<script src="https://cdn.hcharts.cn/highcharts/themes/gray.js" type="text/javascript"></script> 

声明: 除非转自他站（如有侵权，请联系处理）外，本文采用 BY-NC-SA 协议进行授权 | 智乐兔
转载请注明：转自《Highcharts设置》
本文地址：https://www.zhiletu.com/archives-5493.html
关注公众号：