Heim  >  Artikel  >  Web-Frontend  >  JQuery Highcharts 动态生成图表的方法_jquery

JQuery Highcharts 动态生成图表的方法_jquery

WBOY
WBOYOriginal
2016-05-16 17:14:491031Durchsuche
复制代码 代码如下:

$(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 ''+ 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: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;

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

});
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn