您的位置:首页 > 其它

highcharts实现动态刷新两(多)组数据

2017-11-08 15:50 1291 查看
(function () {(document).ready(function () {

Highcharts.setOptions({

global: {

useUTC: false

}

});

var chart;

$(‘#container’).highcharts({

chart: {

type: ‘spline’,

zoomType: ‘x’, //可以选取某个区域放大

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];

var series1 = this.series[1];

setInterval(function () {

var x = (new Date()).getTime(), // current time

y = Math.random();

y2 = Math.random();

series.addPoint([x, y], true, true);

series1.addPoint([x, y2], true, true);

}, 2000);

}

}

},

title: {

text: ‘demo(样例)’

},

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: true,

align: ‘right’,// 图例居右

layout: ‘vertical’,

y: -330, //y轴偏移

floating:true //是否悬浮到图表上

},

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;

})()

}, {

name: ‘Random data1’,

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;

})()

}]

});

});

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息