最后修改时间:2022-12-15 18:11
我们提供资源包、CDN 服务、 Npm 包、Bower 包 的形式来获得所需的文件或源代码。
我们提供完整的 Highcharts 资源包,包含实例文件、所有的 js 压缩版及源码等。
到我们的 下载中心 页面即可获取最新的资源包。
解压下载得到的压缩包,进入相应的目录查看所有包含文件,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 说明文件
建议初学者从我们提供的例子代码入手,我们提供的丰富例子可以让你轻松入门。
您也可以直接引用我们的在线 CDN 服务,我们的 CDN 服务已经累计为上千个项目、企业提供稳定的服务,目前我们的 CDN 提供所有相关的文件,并提供 Https 协议访问,您可以不用下载即可享受高速的 CDN 服务。
更多详情详见:简数 CDN
另外这里有简单例子,供兼容性测试
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 等。
功能模块是在 Highcharts 主要功能的基础做的扩展,是由官方发布的功能包,常用功能模块有:
highcharts-more.js
)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>
Highstock 和 Highmaps 是另外两款针对不同使用场景的图表产品,三款产品之间相互独立又有密切关系,他们关系和混合使用的说明如下
Highstock 是完全包含 Highcharts 的,是在 Highcharts 的基础上增加了更多高级功能;Highmaps 则完全独立,不过我们提供了地图功能模块 map.js (在 Highmaps 资源包的 modules 目录)供 Highcharts 或 Highstock 调用。
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 号错误。
我们提供图表更换主题功能,引入相应的主题 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 服务 页面找到。
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 可以基于上面的方法使用 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>
自 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>
本教程仅用于学习、研究和交流目的,欢迎非商业转载。转载请注明出处及完整的链接。
订阅更新
尊敬的用户您好:
由于域名备案调整,我们将于 2023-01-01 ~ 2023-01-07 日陆续停用 highcharts.com.cn 域名,受影响的网站及域名如下:
网站或服务名称 | 域名 | 替代的网站 |
---|---|---|
主站 | www.highcharts.com.cn | www.hcharts.cn |
静态资源服务/CDN | cdn.highcharts.com.cn code.highcharts.com.cn | code.hcharts.cn |
img.highcharts.com.cn | img.hcharts.cn | |
API 文档 | api.highcharts.com.cn | api.hcharts.cn |
导出服务 | export.highcharts.com.cn | export.hcharts.cn |
以上网站服务及 highcharts.com.cn 域名下的网站将于 2023-01-08 日全部下线,未来一段时间将不可访问,后续我们将上线新的网站。
如果您的应用中有使用到相关服务,请抓紧时间对链接进行调整(特别是静态资源/CDN 服务的链接),以免影响您的网站或应用的正常运行,由此给您带来的不便,敬请谅解。
如需帮助,请及时与我们联系:0571-86208605 / 18106595564(微信)。
简数科技 2022-12-22