我有数万(可能数十万)点需要用 Highcharts 绘制。有没有一种方法可以让我在服务器上聚集数据,所以它会显示少于 1000 个点,但是当你放大它时,它会对服务器进行 AJAX 调用以获取该缩放区域的数据(它可能会运行通过相同的聚类算法)。这个与 Highcharts API 的接口如何?
问问题
4719 次
3 回答
3
有一个 highstock 演示可以做到这一点http://www.highcharts.com/stock/demo/lazy-loading。但是你可以用 highcharts 做同样的事情http://jsfiddle.net/RHkgr/ 重要的是 afterSetExtremes 函数
...
xAxis : {
events : {
afterSetExtremes : afterSetExtremes
},
...
/**
* Load new data depending on the selected min and max
*/
function afterSetExtremes(e) {
var url,
currentExtremes = this.getExtremes(),
range = e.max - e.min;
var chart = $('#container').highcharts();
chart.showLoading('Loading data from server...');
$.getJSON('http://www.highcharts.com/samples/data/from-sql.php?start='+ Math.round(e.min) +
'&end='+ Math.round(e.max) +'&callback=?', function(data) {
chart.series[0].setData(data);
chart.hideLoading();
});
}
于 2013-08-09T17:12:51.380 回答
2
这是对芭芭拉的回答的改进,
它注册到 setExtremes 事件,以了解这是否是重置缩放事件。如果是 - 它获取整个数据集,从而允许重置缩放正常工作。
它还允许放大 x 和 y。
var isReset = false;
...
xAxis: {
events: {
afterSetExtremes : afterSetExtremes,
setExtremes: function (e) {
if (e.max == null || e.min == null) {
isReset = true;
}
else
{
isReset = false;
}
}
},
minRange: 3600 * 1000 // one hour
},
series: [{
data: data,
dataGrouping: {
enabled: false
}
}]
});
});
});
/**
* Load new data depending on the selected min and max
*/
function afterSetExtremes(e) {
var url,
currentExtremes = this.getExtremes(),
range = e.max - e.min;
var chart = $('#container').highcharts();
var min = 0;
var max = 1.35e12;
if(!isReset)
{
min = e.min;
max = e.max;
}
chart.showLoading('Loading data from server...');
$.getJSON('http://www.highcharts.com/samples/data/from-sql.php?start=' + Math.round(min) +
'&end=' + Math.round(max) + '&callback=?', function (data) {
chart.series[0].setData(data);
chart.hideLoading();
});
}
于 2013-11-06T07:46:47.467 回答
0
如果您没有积分限制,您可以增加turboThreshold参数。
于 2013-08-12T09:32:21.330 回答