Highcharts 大数据集聚类答案

【问题标题】：Highcharts large data set clusteringHighcharts 大数据集聚类
【发布时间】：2013-11-06 15:46:47
【问题描述】：

我有数万（可能数十万）点需要用 Highcharts 绘制。有没有一种方法可以让我在服务器上聚集数据，所以它会显示少于 1000 个点，但是当你放大它时，它会对服务器进行 AJAX 调用以获取该缩放区域的数据（它可能会运行通过相同的聚类算法）。这个与 Highcharts API 的接口如何？

【问题讨论】：

我猜我必须捕捉selected 事件，然后弹出加载屏幕，然后AJAX 调用，然后删除数据并添加新数据，但是缩放将如何工作，因为这种方法不会考虑到这一点。
实际上，我认为 ^ 那可能有用。我认为这将解释缩放，因为轴随后会更新。我只需要显示一个显示原始数据的重置缩放按钮。

标签： highcharts bigdata

【解决方案1】：

有一个 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();
    });

}

【讨论】：

另一方面，jsfiddle 不能正常工作，请尝试放大然后重置。它需要重新获取原始数据

【解决方案2】：

这是对芭芭拉的回答的改进，

它注册到 setExtremes 事件，知道这是否是重置缩放事件。如果是 - 它获取整个数据集，从而允许重置缩放正常工作。

它还允许放大 x 和 y。

http://jsfiddle.net/DktpS/8/

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();


        });

    }

【讨论】：

【解决方案3】：

如果没有积分限制，可以增加turboThreshold参数。

【讨论】：

我试过了，不实用，因为我必须支持IE8 :"(
你的意思是 turbothreshold 在 IE8 中不起作用？你能在 jsfiddle.net 中重新创建你的例子吗？
不，IE8 不能很好地处理那么多对象。它会多次询问您是否要杀死脚本。