如何在Highchart中获取ajax数据数组的响应

时间:2014-07-07 08:56:08

标签: php jquery ajax highcharts

我正在尝试使用ajax获取json数据响应,但我无法获得结果。 我会得到如下错误。 未捕获的TypeError:无法读取未定义的属性“0”

我的简单图表数据如下。

<script type="text/javascript">
$(function () {
$(document).ready(function() {
    var chart;
      chart = $('#container2').highcharts({

            title: {
                text: 'Monthly Average Backing',
                x: -20 //center
            },

            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Backing ($)'

                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },

            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: <?php echo json_encode($array); ?>
        });
    });

});
        </script> 

我也从ajax获取数据数组:

[{"name":"Digital Watch heart rate monitor","data":[0,0,0,180,0,0,0]}]

所以我只想更新我的图表,这是我的ajax电话:

$.ajax({
                type: "POST",
                url: "user/ajax.profile.statistics.php?action=custommap",
    data:{categoryId:categoryId,pricelowrange:pricelowrange,pricehighrange:pricehighrange,successsort:successsort,datefrom:datefrom,dateto:dateto,sortingautosuggest:sortingautosuggest,timefrom:timefrom,timeto:timeto},
                async:false,
                dataType:'json',
                cache: false,
                success: function(dataRes)
                                {
                                    **chart.series[0]**.setData(dataRes['data'],true)

                                }


            });

我只想在图表中找到我的回复数据。

未捕获的TypeError:无法读取未定义的属性“0”

2 个答案:

答案 0 :(得分:0)

尝试使用回调选项以及ajax中的网址。

$.ajax({
                type: "POST",
                url: "user/ajax.profile.statistics.php?callback=",
    data:{categoryId:categoryId,pricelowrange:pricelowrange,pricehighrange:pricehighrange,successsort:successsort,datefrom:datefrom,dateto:dateto,sortingautosuggest:sortingautosuggest,timefrom:timefrom,timeto:timeto},
                async:false,
                dataType:'jsonp',
                cache: false,
                data:{data:JSON.stringify([{action:'custommap'}])},
                success: function(dataRes)
                {       alert(dataRes);
                        <?php echo json_encode($array); ?>

                }

            });

以下博客将为您提供帮助。

HTML-PHP wenservice

答案 1 :(得分:0)

你有数组内的对象。所以你需要像那样访问它,例如

dataRes[0]['name']
dataRes[0]['data']

您的代码应该像这样访问数据

        $.ajax({
                type: "POST",
                url: "user/ajax.profile.statistics.php?action=custommap",
    data:{categoryId:categoryId,pricelowrange:pricelowrange,pricehighrange:pricehighrange,successsort:successsort,datefrom:datefrom,dateto:dateto,sortingautosuggest:sortingautosuggest,timefrom:timefrom,timeto:timeto},
                async:false,
                dataType:'json',
                cache: false,
                success: function(dataRes)
                {      
                   console.log(dataRes[0]['name']);
                   console.log(dataRes[0]['data'])
                }

            });

当您有可用数据时,您可以重绘/重置Highcharts。 要在这里重新绘制check api引用:

http://api.highcharts.com/highcharts#chart.events

Jsfiddle:http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/events-redraw/