Question

我有一个包含数百万个点的json数据集。结构如下：

[[1436997600000,7]，[...]

第一个数字是数据，第二个数字是值。我想在高图中绘制这个图，这样就不需要花太多时间来加载图表并在其中导航。我按照这个例子：http://www.highcharts.com/stock/demo/lazy-loading

但无法使用我的数据。它需要花费很多时间来加载，当我缩放消息时“从服务器加载”并不会消失。有人可以帮我吗？

JS：

$(function () {
/**
 * Load new data depending on the selected min and max
 */
function afterSetExtremes(e) {

    var chart = $('#container').highcharts();

    chart.showLoading('Loading data from server...');
    $.getJSON('http://localhost/public_html/webservice.php/re/pap/' + Math.round(e.min) + '/' + Math.round(e.max), function (data) {

        chart.series[0].setData(data);

        chart.hideLoading();
    });
}

// See source code from the JSONP handler at https://github.com/highcharts/highcharts/blob/master/samples/data/from-sql.php
$.getJSON('http://localhost/public_html/webservice.php/re/pap', function (data) {

    // Add a null value for the end date
    data = [].concat(data, [[Date.UTC(2016, 9, 14, 19, 59), null]]);

    // create the chart
    $('#container').highcharts('StockChart', {
        chart : {
            type: 'scatter',
            zoomType: 'x'
        },

        navigator : {
            adaptToUpdatedData: false,
            series : {
                data : data
            }
        },

        scrollbar: {
            liveRedraw: false
        },

        title: {
            text: 'AAPL history by the minute from 1998 to 2011'
        },

        subtitle: {
            text: 'Displaying 1.7 million data points in Highcharts Stock by async server loading'
        },

        rangeSelector : {
            buttons: [{
                type: 'hour',
                count: 1,
                text: '1h'
            }, {
                type: 'day',
                count: 1,
                text: '1d'
            }, {
                type: 'month',
                count: 1,
                text: '1m'
            }, {
                type: 'year',
                count: 1,
                text: '1y'
            }, {
                type: 'all',
                text: 'All'
            }],
            inputEnabled: false, // it supports only days
            selected : 4 // all
        },

        xAxis : {
            events : {
                afterSetExtremes : afterSetExtremes
            },
            minRange: 3600 * 1000 // one hour
        },

        yAxis: {
            floor: 0
        },

        series : [{
            data : data,
            dataGrouping: {
                enabled: false
            }
        }]
    });
});
});

小提琴：http://jsfiddle.net/f0u5c4pg/

提前致谢！

使用Highcharts加载数百万个点

0 个答案: