在高保真时间序列中绘制多个点

时间:2014-08-02 11:51:30

标签: highcharts highstock

我的数据看起来像JSON格式。我有两个具有相同时间线的数据系列。当我试图用高品质绘制它们时,我所有的时间戳都显示在20世纪70年代。任何人都可以指出我的JSON格式会出现什么问题吗?

我没有使用的原因 - pointStart和pointInterval:是因为有时pointIntervals可能是不规则的,因此需要发送日期。

  {
        "chart_data": {
            "dates": [
                1406876400000, 
                1406876700000, 
                1406877000000, 
                1406877300000, 
                1406877600000, 
                1406877900000, 
                1406878200000, 
                1406878500000, 
                1406878800000
            ], 
            "values": [
                {
                    "data": [
                        54, 
                        50, 
                        62, 
                        65, 
                        65, 
                        55, 
                        51, 
                        53, 
                        57
                    ]
                }, 
                {
                    "data": [
                        84, 
                        70, 
                        80, 
                        78, 
                        77, 
                        84, 
                        73, 
                        83, 
                        77
                    ]
                }
            ]
        }
    }

我的Javascript方法显示此数据如下。

   <script type="text/javascript">
    $(document).ready(function() {
       var chartOptions = {
            chart: {
                renderTo: 'chart_panel',
                type: 'line',
                zoomType: 'x'
            },
            legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
           }, 
           title: {text: 'Temperature & Humidity' },
           subtitle: {text: 'My-Text' },
           xAxis: {
               type: 'datetime', 
               dateTimeLabelFormats: {
                    month: '%e. %b',
                    day: '%b %e',
                    hour: '%b %e',
                    year: '%b'
                  }
            },
            yAxis: {
                    min: 0,
                    title: {
                        text: 'Temperature (°F)/Humidity (%)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                }, 
            series: [{}],
            rangeSelector : { 
                inputEnabled: true,
                selected: '0'
            },
        };
        var chartDataUrl = '{% url "chart_data_json" object.id %}'; 
        function loadChart() {
            $.getJSON(chartDataUrl,
                function(data) {
                    var seriesOptions = []; 
                    var obj1 = {};
                    var obj2 = {};
                    avgByDayOptions.xAxis.categories = data['chart_data']['dates'];
                    obj1.name = "Temperature"; 
                    obj1.data = data['chart_data']['values'][0]['data']; 
                    obj2.data = data['chart_data']['values'][1]['data'];
                    obj2.name = "Humidity"; 
                seriesOptions[0] = obj1;
                    seriesOptions[1] = obj2;
                    chartOptions.series = seriesOptions;
                    var chart = new Highcharts.StockChart( chartOptions,
                        function(chart){ 
                            // apply the date pickers
                            setTimeout(function(){
                                $('input.highcharts-range-selector', $('#'+chart.options.chart.renderTo))
                                    .datepicker()
                            },0)
                        }
                    );
                    Highcharts.setOptions({ global: { useUTC: false } });
             });
         }
        loadChart();
    });

1 个答案:

答案 0 :(得分:0)

一旦我按照以下格式传递数据,一切都按预期开始工作,这可能很糟糕。如果有人遇到类似的问题,只是回复我自己的问题?

{
    "chart_data": {
        "values": [
            {
                "data": [
                    [
                        1406851200000, 
                        54
                    ], 
                    [
                        1406851500000, 
                        50
                    ], 
                    [
                        1406851800000, 
                        62
                    ], 
                    [
                        1406852100000, 
                        65
                    ], 
                    [
                        1406852400000, 
                        65
                    ], 
                    [
                        1406852700000, 
                        55
                    ], 
                    [
                        1406853000000, 
                        51
                    ], 
                    [
                        1406853300000, 
                        53
                    ], 
                    [
                        1406853600000, 
                        57
                    ]
                ]
            }, 
            {
                "data": [
                    [
                        1406851200000, 
                        84
                    ], 
                    [
                        1406851500000, 
                        70
                    ], 
                    [
                        1406851800000, 
                        80
                    ], 
                    [
                        1406852100000, 
                        78
                    ], 
                    [
                        1406852400000, 
                        77
                    ], 
                    [
                        1406852700000, 
                        84
                    ], 
                    [
                        1406853000000, 
                        73
                    ], 
                    [
                        1406853300000, 
                        83
                    ], 
                    [
                        1406853600000, 
                        77
                    ]
                ]
            }
        ]
    }
}