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 に答える