1. Highcharts 和 jQuery 结合使用很方便
首先, 就是环境准备, 需要安装 jQuery 和 Highcharts, 可以直接使用 CDN:
2. 基本配置
var chart = new Highcharts.Chart({
chart: { // 表
},
title: { // 标题
},
subtitle: { // 子标题
},
xAxis: { // X 轴
},
yAxis: { // Y 轴
},
tooltip: { // 提示信息 (如 %,单位等)
},
legend:{ // 展示方式, 对其方式等
},
exporting: {// 导出图标/打印....
},
series: [{ // 数据
}],
credits: { // 关于版权信息
}
});
3. 具体配置
0. Highcharts 需要使用一个已准备好的 div, 并指定 id 和宽高等, 图表就放在 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 ''+ this.series.name +'
'+
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数据.
})
以下为完整的实例(来自 菜鸟教程 静态图):
Highcharts 教程 | 菜鸟教程(runoob.com)
[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