啦啦啦,我又出来活跃啦,来到新公司的第一篇,我打算写写我最近自学的highcharts,跟大家一起分享分享。
现在很多网站上都有图表类的展示,highcharts作为做图表的半壁江山(另一个是echarts,我个人觉得highcharts更强大一点,但是企业用highcharts可能要收费,echarts是免费的),下面就来介绍下highcharts吧。
highcharts的官方文档: http://www.hcharts.cn/,新人学习的话,建议多看实例,对照着实例看Api,了解各个API的作用(记不住也没事啦,每次就再打开文档看看就是了)。
例如,之前学的时候个人觉得比较难的动态实时的图表
地址:https://code.hcharts.cn/demos/hhhhDv(因为公司电脑不带屏幕录制视频,大家可以点开链接看一下动态效果);
html代码
这里图表的宽和高可以通过改变html里父级元素改变
引入(这个很重要)
js(这里复制文档中案例代码并加一些注释)
function activeLastPointToolip(chart) {
var points = chart.series[0].points;
chart.tooltip.refresh(points[points.length -1]);
}
$('#container').highcharts({
chart: { //图表的类型设置
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// 每一秒更新一个点
var series = this.series[0],
chart = this;
setInterval(function () {
var x = (new Date()).getTime(), // 当前时间
y = Math.random(); //随机y轴的值
series.addPoint([x, y], true, true); //将x,y轴加入数组中
activeLastPointToolip(chart)
}, 1000);
}
}
},
title: {
text: '动态模拟实时数据'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: '值'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '' + this.series.name + '
' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '
' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: '随机数据',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
}, function(c) {
activeLastPointToolip(c)
});
以上是一条线的动态数据,在此基础上,下面是两条线的代码,多条线同例;我把加另一条线的代码标记了,有需要的可以借照此代码(当时工作的时候看到四条线的动态数据模拟,花了一些时间做出来的)
function activeLastPointToolip(chart) {
var points = chart.series[0].points;
chart.tooltip.refresh(points[points.length -1]);
}
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0],
series1= this.series[1], //另一条线
chart = this;
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
y1= Math.random(); //另一条线
series.addPoint([x, y], true, true);
series1.addPoint([x, y1], true, true); //另一条线
activeLastPointToolip(chart)
}, 1000);
}
}
},
title: {
text: '动态模拟实时数据'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: '值'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '' + this.series.name + '
' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '
' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: '随机数据',
data: (function () {
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}()),
},{ //另一条线数据开始
name: '随机数据',
data: (function () {
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}()),
} //另一条线数据结束
]
}, function(c) {
activeLastPointToolip(c)
});
其他的图表,一般情况下,案例里都可以找到,以后有时间再分享用ajax请求或者前后端不分离使用假数据模拟图表吧。