Jquery 使用JSON数据用Highcharts重新绘制piechart_Jquery_Ajax_Json_Highcharts

Jquery 使用JSON数据用Highcharts重新绘制piechart

jquery ajax json highcharts

Jquery 使用JSON数据用Highcharts重新绘制piechart,jquery,ajax,json,highcharts,Jquery,Ajax,Json,Highcharts,我现在完全被困在这里好几个小时了，我找不到错误：( 我需要从数据库中获取的数据绘制一个饼图。该图需要每隔几秒钟用新数据重新绘制一次，这样我就可以通过AJAX获取数据（作为JSON）。目前为止没有问题但现在我需要得到Highcharts来实际绘制新数据。这似乎不可能：（它只保留初始数据-即使有警报显示新数据已正确解析并输入图表的“data”属性有人能给我建议吗 <html> <head> <meta http-equiv="content-type" co

我现在完全被困在这里好几个小时了，我找不到错误：(

我需要从数据库中获取的数据绘制一个饼图。该图需要每隔几秒钟用新数据重新绘制一次，这样我就可以通过AJAX获取数据（作为JSON）。目前为止没有问题

但现在我需要得到Highcharts来实际绘制新数据。这似乎不可能：（它只保留初始数据-即使有警报显示新数据已正确解析并输入图表的“data”属性

有人能给我建议吗

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <script>
var chart;

var options = {
    chart:
    {
        renderTo: 'container',
        defaultSeriesType: 'column',
        events:
        {
            load: requestData,
            redraw: function(){alert("graph has just been redrawn");}
        }
    },
    series: [
    {
        type: 'pie',
        name: 'x',
        data: [['All', 1],['more', 2]]
    }]
};

function requestData()
{
    $.ajax(
    {
        url: "http://1.2.3.4/getMeSomeJSON.php",
        type: "GET",
        success: function(response)
        {
            var json = jQuery.parseJSON(response);
            var protocols = response.services.protocols;

            chart.series[0].data = [];
            for(var i=0; i<protocols.length; i++)
            {
                var tmp = protocols[i].prot;
                chart.series[0].data.push({tmp: protocols[i].byte_len});
            }
            //alert(chart.series[0].data); // everything seems to be OK here...

            // neither one works :(
            //chart.redraw();
            //chart = new Highcharts.Chart(options);

            // call it again after one second
            setTimeout(requestData, 1000);
        },
        cache: false
    });
}
    </script>
</head>
<body>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto; border: 1px solid black;"></div>
<script>
$(document).ready(function()
{
    chart = new Highcharts.Chart(options);
});
</script>
</body>
</html>


var图；
变量选项={
图表：
{
renderTo:'容器'，
defaultSeriesType:“列”，
活动：
{
加载：请求数据，
redraw:function（）{alert（“图形刚刚被重绘”）；}
}
},
系列：[
{
键入“pie”，
名称：“x”，
数据：[‘全部’，1]，‘更多’，2]]
}]
};
函数requestData（）
{
$.ajax(
{
url:“http://1.2.3.4/getMeSomeJSON.php",
键入：“获取”，
成功：功能（响应）
{
var json=jQuery.parseJSON（响应）；
var协议=response.services.protocols；
chart.series[0]。数据=[]；
对于（var i=0；i要动态更新，必须使用setData
，如下所示。

var json = jQuery.parseJSON(response),
    protocols = json.services.protocols,
    data = [];

for(var i=0; i<protocols.length; i++) {
    var tmp = protocols[i].prot;
    data.push({tmp: protocols[i].byte_len});
}

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

var json=jQuery.parseJSON（响应），
协议=json.services.protocols，
数据=[]；
对于（var i=0；i