我想用动态的数据更新条形图,而不需要重新绘制整个图。我的样本代码在这里
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5]
}, {
name: 'Jane',
data: [2]
}, {
name: 'Joe',
data: [3]
}]
});
});
这里,如果序列中的数据是动态出现的,那么如何增加或减少条形宽度或特定条形的向上/向下计数。此外,如果另一个条形图相加,或者新数据中不存在现有条形图。
添加以下
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);
}
这会每秒增加点数,但您可以更改间隔或通风口本身,以表示单击事件。
所以highcharts有一个演示,如果你需要进一步澄清,你可以查看:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/dynamic-update/