具有大量数据的 HighChart 无法正常工作答案

【问题标题】：HighChart with large amount of data not working具有大量数据的 HighChart 无法正常工作
【发布时间】：2013-12-24 20:59:12
【问题描述】：

我正在使用大型 CakePHP 门户网站之一，我在其中使用 Highcharts 进行一些图形表示。

它几乎适用于所有简单的图表，但是当 Query 从数据库中检索大数据并尝试在 highchart 中绘制时，我的问题就出现了。

以下是我尝试在 HighChart 中呈现的示例数据：

[series] => Array
        (
            [0] => Array
                (
                    [name] => Name 1
                    [data] => Array
                        (
                            [0] => 1080
                            [1] => 25
                            [2] => 0.92
                            [3] => 19.5
                            [4] => 0
                            [5] => 0
                            [6] => 0
                            [7] => 0
                            [8] => 0
                            [9] => 0
                            [...] => 0
                              .
                              .
                            [320] => 0
                         )
                     )
                     .
                     .
                     .
                     .
                     .

           [upto 400] => Array
                (
                    [name] => Name 2
                    [data] => Array
                        (
                            [0] => 250
                            [1] => 25
                            [2] => 0.92
                            [3] => 19.5
                            [4] => 0
                            [5] => 0
                            [6] => 0
                            [7] => 0
                            [8] => 0
                            [9] => 0
                            [...] => 0
                              .
                              .
                            [320] => 0
                         )
                    )
              )

但是加载了很长时间后页面变成了白色的空白页面。

谁能帮帮我？将不胜感激！

【问题讨论】：

我还绘制了大量的数据完美地工作，你能创建一个示例小提琴来演示这个问题
另外，你的JS控制台有什么错误吗？
@PawełFus：不，没什么。
可以提供现场演示吗？
您能否在 js 小提琴中使用您从 db 中检索到的相同数据重现相同的数据，从而导致问题。

标签： php cakephp highcharts

【解决方案1】：

请看下面的代码。

它还允许放大 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();


        });

    }

谢谢

【讨论】：