Question

我正在使用highcharts，当我动态填充数据时，它没有显示出来。这是我的代码：

<div id="chart"></div>

...

$(document).ready(function(e) {

    var options = {
        chart:{
            type:'line'
        },
        title:{
            text:'Line Chart'
        },
        xAxis:{
            title:'Date',
            categories:[]
        },
        yAxis:{
            title:'Val1/Val2'
        },
        series:[{name:'Val1', data:[]}, {name:'Val2', data:[]}]
    };

    $.ajax({
        url:'includes/getData.php', // select * from 'myTable' order by date
        dataType:'json',
        success:function(data){
            $.each(data, function(index, value){
                options.xAxis.categories.push(value.date); // date = 'mm/dd'
                options.series[0].data.push(value.val1); // val1 = integer
                options.series[1].data.push(value.val2); // val2 = integer
            });

            $('#chart').highcharts(options);
        }
    });

});

类别在x轴（日期）上显示得很好，但没有其他任何显示。如果我硬编码这样的数据：

$(document).ready(function(e) {

    var options = {
        chart:{
            type:'line'
        },
        title:{
            text:'Line Chart'
        },
        xAxis:{
            title:'Date',
            categories:['08/16','08/17','08/18','08/19']
        },
        yAxis:{
            title:'Val1/Val2'
        },
        series:[{name:'Val1', data:[23, 56, 73, 12]}, {name:'Val2', data:[12, 65, 23, 49]}]
    };

    $.ajax({
        url:'includes/getData.php', // select * from 'myTable' order by date
        dataType:'json',
        success:function(data){
            $.each(data, function(index, value){
                //options.xAxis.categories.push(value.date); // date = 'mm/dd'
                //options.series[0].data.push(value.val1); // val1 = integer
                //options.series[1].data.push(value.val2); // val2 = integer
            });

            $('#chart').highcharts(options);
        }
    });

});

它完美无缺。注意我硬编码了xaxis类别数组和2系列数据数组，并在ajax成功处理程序中注释掉了3行，它使用来自数据库的数据进行填充。

不确定为什么它不能动态地硬编码。我在成功处理程序中将数据数组输出到控制台，数据就在那里，正如预期的那样。

有什么想法吗？

编辑：getData返回的JSON：

 0: {0:8, 1:120, 2:80, 3:08/06/2013, 4:1:00 am, id:8, val1:120, val2:80, date:08/06/2013, time:1:00 am}
 1: {0:5, 1:120, 2:80, 3:08/08/2013, 4:3:55 am, id:5, val1:120, val2:80, date:08/08/2013, time:3:55 am}
 2: {0:9, 1:120, 2:80, 3:08/10/2013, 4:2:00 am, id:9, val1:120, val2:80, date:08/10/2013, time:2:00 am}
 3: {0:13, 1:120, 2:80, 3:08/19/2013, 4:12:00 am, id:9, val1:120, val2:80, date:08/10/2013, time:2:00 am}

highcharts动态数据填充在折线图中

0 个答案: