最后修改时间:2023-03-08 15:20
你可以通过以下几种方式获取 Highcharts :
Highcharts 最基本的运行只需要一个 JS 文件,即 highcharts.js,以使用 CDN 文件为例,对应的代码是:
<script src="https://code.hcharts.cn/highcharts.js"></script>
在绘图前我们需要为 Highcharts 准备一个 DOM 容器,并指定其大小
<div id="container" style="width: 600px;height:400px;"></div>
然后通过 Highcharts 的初始化函数 Highcharts.chart
来创建图表,该函数接受两个参数,第一个参数是 DOM 容器的 Id,第二个参数是图表配置,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 Highcharts 图表</title>
</head>
<body>
<!-- 图表容器 DOM -->
<div id="container" style="width: 600px;height:400px;"></div>
<!-- 引入 highcharts.js -->
<script src="https://code.hcharts.cn/highcharts.js"></script>
<script>
// 图表配置
var options = {
chart: {
type: 'bar' //指定图表的类型,默认是折线图(line)
},
title: {
text: '我的第一个图表' // 标题
},
xAxis: {
categories: ['苹果', '香蕉', '橙子'] // x 轴分类
},
yAxis: {
title: {
text: '吃水果个数' // y 轴标题
}
},
series: [{ // 数据列
name: '小明', // 数据列名
data: [1, 0, 4] // 数据
}, {
name: '小红',
data: [5, 7, 3]
}]
};
// 图表初始化函数
var chart = Highcharts.chart('container', options);
</script>
</body>
</html>
这样你的第一个图表就诞生了!
订阅更新
尊敬的用户您好:
由于域名备案调整,我们将于 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