用highcharts实现双线动态刷新
本功能基于highcharts现有例子进行修改。
需要的js包邮:
highcharts.js
exporting.js
jquery-1.8.3.js
下面是主要的js实现代码:
$('#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]; var series1 = this.series[1]; setInterval(function() { var x = (new Date()).getTime(), // current time y = Math.random(); y1 = Math.random(); series.addPoint([x, y], true, true); series1.addPoint([x, y1], true, true); }, 1000); } } }, title: { text: '两个公司的股票行情' }, 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); } }, plotOptions: { spline: { lineWidth: 1, states: { hover: { lineWidth: 5 } }, marker: { enabled: false }, pointInterval: 3600000, // one hour // pointStart: Date.UTC(2009, 9, 6, 0, 0, 0) } }, exporting: { enabled: false }, series: [
{
name: 'A股份公司',
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: 'B投资公司',
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;
})()
}
]
});
下面是实现效果图: