啦啦啦，我又出来活跃啦，来到新公司的第一篇简书，我打算写写我最近自学的highcharts，跟大家一起分享分享。
现在很多网站上都有图表类的展示，highcharts作为做图表的半壁江山（另一个是echarts，我个人觉得highcharts更强大一点，但是企业用highcharts可能要收费，echarts是免费的）,下面就来介绍下highcharts吧。
highcharts的官方文档: http://www.hcharts.cn/,新人学习的话，建议多看实例，对照着实例看Api,了解各个API的作用（记不住也没事啦，每次就再打开文档看看就是了）。
例如，之前学的时候个人觉得比较难的动态实时的图表
动态模拟实时数据
地址：https://code.hcharts.cn/demos/hhhhDv（因为公司电脑不带屏幕录制视频，大家可以点开链接看一下动态效果）；
html代码
这里图表的宽和高可以通过改变html里父级元素改变
<div id="container" style="min-width:400px;height:400px"></div>
引入（这个很重要）
<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
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 '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
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 '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
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请求或者前后端不分离使用假数据模拟图表吧。
网友评论