0

我现在完全卡在这里几个小时，我找不到错误:(

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

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

谁能给点建议？

<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>
4

1 回答 1

2

要动态更新，您必须使用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);

演示

在这里你可以看到一个相关的问题。

参考

于 2012-12-06T16:17:31.537 回答