欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JQuery Highcharts 动态生成图表的方法

程序员文章站 2022-05-17 14:49:47
代码如下: $(function () { $(document).ready(function() { highcharts.setoptions({ global:...

代码如下:


$(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;
})()
}]
});
});

});