将JSON拆分为多个阵列系列Highcharts

时间:2014-01-23 18:20:14

标签: javascript php jquery json highcharts

我以这种格式从我的PHP代码中获取我的JSON对象(JSONlint ok):

[
[1375653600000,3.20104,175.00,116.00,11.00,31.00],[...],[1376776800000,2.85625,10.00,1.00,0.00,8.00]
]

我必须分成5个不同的系列:

    [1375653600000, 3.201014]
    [1375653600000, 175.00]
    [1375653600000, 116.00]
    [1375653600000, 11.00]
    [1375653600000, 31.00]

...

和(显然)每个数组用于不同的highcharts系列。

我按照这篇文章来了解拆分JSON: Retrieving JSON data for Highcharts with multiple series?

这是我的代码:

$(function() {

    // See source code from the JSONP handler at https://github.com/highslide-software/highcharts.com/blob/master/samples/data/from-sql.php
    $.getJSON('grafico_nuovo.php?callback=?', function(data) {

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

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

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

            scrollbar: {
                liveRedraw: false
            },

            title: {
                text: 'analisi consumi e temperature'
            },

            subtitle: {
                text: 'Analisi test solo temperatura media'
            },

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

            /*xAxis : {
                events : {
                    afterSetExtremes : afterSetExtremes
                },
                minRange: 3600 * 1000 // one hour
            },*/
            xAxis: {
                        events : {
                                        afterSetExtremes : afterSetExtremes
                                },
                                        minRange: 3600 * 1000, // one hour
                                         type: 'datetime',
                                         dateTimeLabelFormats: { minute: '%H:%M', day: '%A. %e/%m' },
                                        // minRange: 15*60*1000,
                                        //maxZoom: 48 * 3600 * 1000,
                                        labels: {
                                    rotation: 330,
                                    y:20,
                                    staggerLines: 1 }               
                                    },
                                    yAxis: [{ // Primary yAxis
                                        labels: {
                                            format: '{value}°C',
                                            style: {
                                                color: '#89A54E'
                                            }
                                        },
                                        title: {
                                            text: 'Temperature',
                                            style: {
                                                color: '#89A54E'
                                            }
                                        }
                                    }, { // Secondary yAxis
                                        title: {
                                            text: 'Consumo',
                                            style: {
                                                color: '#4572A7'
                                            }
                                        },
                                        labels: {
                                            format: '{value} Kw',
                                            style: {
                                                color: '#4572A7'
                                            }
                                        },
                                        opposite: true
                                    }],

            series: [{
           name: 'val1',
           data: []
       }, {
           name: 'val2',
           data: []
        },
        {
           name: 'val3',
           data: []
        },
        {
           name: 'val4',
           data: []
        },
        {
           name: 'val5',
           data: []
        }]
        });
    });
});


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

    var currentExtremes = this.getExtremes(),
        range = e.max - e.min,
        chart = $('#container').highcharts();

    chart.showLoading('Loading data from server...');
    $.getJSON('grafico_nuovo.php?start='+ Math.round(e.min) +
            '&end='+ Math.round(e.max) +'&callback=?', function(data) {
        val1 = [];
        val2 = [];
        val3 = [];
        val4 = [];
        val5 = [];
        $.each(data, function(key,value) {
        val1.push([value[0], value[1]]);
        val2.push([value[0], value[2]]);
        val3.push([value[0], value[3]]);
        val4.push([value[0], value[4]]);
        val5.push([value[0], value[5]]);
        });
        console.log('val1');
        chart.series[0].setData(val1);
        chart.series[1].setData(val2);
        chart.series[2].setData(val3);
        chart.series[3].setData(val4);
        chart.series[4].setData(val5);
        chart.hideLoading();
    });

}

导航器工作正常(点击3-4次后没什么问题),但其他系列没有显示。 一切都应该没问题,但我可能错过了一些东西

0 个答案:

没有答案