Highcharts 多个Y轴动态刷新数据的实现代码

Highcharts 多个Y轴动态刷新数据的实现代码

效果图：

js代码：

$(function() {

$(document).ready(function() {

http:// Highcharts.setOptions({

global: {

useUTC: false

}

});

var chart;

chart = new Highcharts.Chart({

chart: {

renderTo: 'container',

type: 'spline',

animation: Highcharts.svg,

// don't animate in old IE

http:// marginRight: 10,

events: {

load: function() {}

}

},

title: {

text: 'Live random data'

},

xAxis: {

type: 'datetime',

tickPixelInterval: 150

},

yAxis: [{

title: {

text: 'Value'

},

plotLines: [{

value: 0,

width: 1,

color: '#808080'

}]

},

{

title: {

text: 'Name'

},

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 <= 0; i++) {

data.push({

x: time + i * 1000,

y: Math.random()

});

}

return data;

})()

},

{

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: tIYCrUwuInoime + i * 1000,

y: Math.random()

});

}

return data;

})()

}]

}); // set up the updating of the chart each second

var series = chart.series[0];

var series1 = chart.series[1];

setInterval(function() {

var x = (new Date()).getTime(),

// current time

y = Math.random();

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

series1.addPoint([x, y - 1], true, true);

},

1000);

});

});

html代码：

IYCrUwuIno

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。