Highcharts 动态图表创建
2018-01-15 本文已影响0人
heyzqq
1. Highcharts 和 jQuery 结合使用很方便
首先, 就是环境准备, 需要安装 jQuery 和 Highcharts, 可以直接使用 CDN:
<head>
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
2. 基本配置
var chart = new Highcharts.Chart({
chart: { // 表
},
title: { // 标题
},
subtitle: { // 子标题
},
xAxis: { // X 轴
},
yAxis: { // Y 轴
},
tooltip: { // 提示信息 (如 %,单位等)
},
legend:{ // 展示方式, 对其方式等
},
exporting: {// 导出图标/打印....
},
series: [{ // 数据
}],
credits: { // 关于版权信息
}
});
3. 具体配置
0. Highcharts 需要使用一个已准备好的 div, 并指定 id 和宽高等, 图表就放在 div 里面:
<div id="container" style="min-width:700px;height:400px"></div>
1. 是否使用世界时间, 这个与坐标轴时间刻度有关:
Highcharts.setOptions({
global: {
useUTC: false // 是否使用世界标准时间
}
});
2. chart 的配置
chart: {
renderTo: 'container', // 放图表的 div 的 id.
type: 'spline', // 图标类型: 设置图表样式，可以为line,spline, scatter, splinearea bar,pie,area,column 默认为line
animation: Highcharts.svg,
// don't animate in old IE
// marginRight: 10,
events: { // 事件回调，支持addSeries方法，click方法，load方法，selection方法等的回调函数
load: function() {}
}
},
title: {
text: "title name" // 标题名
// x: -20 //center设置标题的位置
},
subtitle: {
text: "title name" // 子标题名, 基本配置和 title 一样
},
xAxis: { // X 轴
type: 'datetime',
tickPixelInterval: 100,
tickInterval: TIME_INTERVAL // 这是动态图的时间间隔.
},
// 与 x 轴相似, 若要配置两条, 可以如下配置: [] json 格式.
yAxis: [{
title: {},
},{
title: {},
opposite: true // Y轴分立两侧, 一个在左侧, 这个在右侧
}],
tooltip: { // 提示信息 (如 %,单位等)//鼠标移到图形上时显示的提示框
formatter: function() {
return '<b>'+ this.series.name +'</b><br />'+
this.x +': '+ this.y +'°C';
}
},
legend:{ // 图例, 即 --图1 ++图2 ==图3 这种
enabled: false
},
exporting: {// 导出图标/打印....
enabled: false
},
series: [{ // 数据, 如果有两条, 也要是json
name: 'name',
yAxis: 0 // 选择对应的y轴数据.
},{
name: 'name2',
yAxis: 1
}],
credits: { // 关于版权信息
enabled: true,
position: {//位置设置
align: 'right',
x: -10,
y: -10
},
href: "http://www.highcharts.com",//点击文本时的链接
style: {
color:'blue'
},
text: "Highcharts Demo"//显示的内容
}
3. 将 第二步 的数据转化为一组 json 格式的数据, 然后直接创建 chart 图表, 这样就有基本的静态图了. 动态图只是加了一步, 定时更新数据加入到图表中而已.
// 可以直接将上面的数据写成 json, 也可以直接用函数转化.
var chart = new Highcharts.Chart({
// 第2步 char 的配置, 都放到这里相对于是 一大串的json数据.
})
以下为完整的实例(来自 菜鸟教程 静态图):
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var title = {
text: '月平均气温'
};
var subtitle = {
text: 'Source: runoob.com'
};
var xAxis = {
categories: ['一月', '二月', '三月', '四月', '五月', '六月'
,'七月', '八月', '九月', '十月', '十一月', '十二月']
};
var yAxis = {
title: {
text: 'Temperature (\xB0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};
var tooltip = {
valueSuffix: '\xB0C'
}
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
};
var series = [
{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
26.5, 23.3, 18.3, 13.9, 9.6]
},
{
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
24.1, 20.1, 14.1, 8.6, 2.5]
},
{
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
17.9, 14.3, 9.0, 3.9, 1.0]
},
{
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,
16.6, 14.2, 10.3, 6.6, 4.8]
}
];
var json = {};
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
[reference]
[1] 飛雲若雪. Highcharts 多个Y轴动态刷新数据[M]. (2014-03-18 19:52). https://www.cnblogs.com/sydeveloper/p/3608588.html
[2] 天马3798. Highcharts的基本属性和方法详解[M]. (2015-07-24 10:08) http://blog.csdn.net/u011127019/article/details/47036725
[3] runoob.com. Highcharts 配置语法. http://www.runoob.com
