0

こんにちは、Google の API の使用に関するいくつかのゲージを含む単純なページを生成しようとしています。オンラインで見つけることができるすべての情報を何度も調べましたが、空白のページが表示される理由がわかりません。以前に使用したことがないので、jsonを疑っています。

getData.php による json 出力は次のとおりです。

[{"hostname":"bongo","value":24},{"hostname":"chappie","value":78}]

ゲージを生成する PHP スクリプトは次のとおりです。

  <html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="jquery-1.6.4.js"></script>
    <script type="text/javascript">

    google.load('visualization', '1', {packages:['gauge']});

    google.setOnLoadCallback(drawChart);


    function drawChart() {
      var jsonData = $.ajax({
          url: "getData.php",
          dataType:"json",
          async: false
          }).responseText;

      var data = new google.visualization.DataTable(jsonData);

    var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

      var chart = new google.visualization.Guage(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

    </script>
  </head>
  <body>
    <div id='chart_div'></div>
  </body>
</html>
4

1 に答える 1

0

json データ形式が正しくなく、Gauge を Guage と間違って入力しました。私はあなたのコードを修正し、それは私のphpサーバーで次のように動作します（ちなみに、配列をネストし、json_encode php関数を使用して、Google Datatable json文字列形式に準拠するjson文字列を出力できます）：

<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">

    google.load('visualization', '1', {packages:['gauge']});

    google.setOnLoadCallback(drawChart);


    function drawChart() {
    var jsonData = {
                    cols: [{id: 'Host Name', label: 'Host Name', type: 'string'},
                           {id: 'Value', label: 'Value', type: 'number'}],
                    rows: [{c:[{v: 'bongo'}, {v: 24}]},
                           {c:[{v: 'chappie'}, {v: 78}]}]
                    }

    var data = new google.visualization.DataTable(jsonData);

    var options = {
        width: 400, height: 120,
        redFrom: 90, redTo: 100,
        yellowFrom:75, yellowTo: 90,
        minorTicks: 5
    };

    var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
        chart.draw(data, options);
    }

</script>
</head>
<body>
    <div id='chart_div'></div>
</body>

デバッグのために、次のことができます:

于 2012-10-12T15:50:33.413 に答える