当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JQuery Highcharts 动态生成图表的方法

JQuery Highcharts 动态生成图表的方法

2019年01月23日  | 移动技术网IT编程  | 我要评论

代码如下:


$(function () {
$(document).ready(function() {
highcharts.setoptions({
global: {
useutc: false
}
});

var chart;
$('#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];
setinterval(function() {
var x = (new date()).gettime(), // current time
y = math.random();
series.addpoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'live random data'
},
xaxis: {
type: 'datetime',
tickpixelinterval: 150
},
yaxis: {
title: {
text: 'value'
},
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: 'random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new date()).gettime(),
i;

for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: math.random()
});
}
return data;
})()
}]
});
});

});

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网