7

初めての投稿ですので、足りないものがあれば教えてください。

私は最近AJAXをいじり始めました。データベースから情報を取得し、それをGoogleのテーブルビューのWebページに表示する簡単なダッシュボードを開発しようとしています。ただし、Chromes Javascriptコンソール内で「UncaughtError：Not a array format + en、default、table.I.js：55」というエラーが常に発生します。以下は、htmlページ内のajaxコードです。

<script type='text/javascript'>
google.load('visualization', '1', {packages:['table']});
google.setOnLoadCallback(drawChart);

function drawChart() {

  var jsonData = $.ajax({
      url: "livesearch.php?chart=bars",
      dataType:"json",
      async: false
      }).responseText;
      alert(jsonData);
 var data = new google.visualization.arrayToDataTable(jsonData);
    data.addColumn('string', 'Status');
    data.addColumn('number', 'Orders');
    data.addRows(jsonData);
  var chart = new google.visualization.Table(document.getElementById('chart_div'));
    chart.draw(data   , {width: 800, height: 150});
    setTimeout('drawChart()',500000);
}

</script>

そして、これがjson配列を構築している私のphpスクリプトです。

while ($row = sqlsrv_fetch_array($result))  
    {
    $c[] = array($row['status'], array('v' => $row['countx'], 'f' =>  
                                 $row['countx']), $row['countx']);               
    }

    echo json_encode($c);

jsonが返された後、JavaScriptでアラートを設定すると、次の形式になります。

[{"COLS"：[{"id"： "Status"、 "type"： "String"}、{"id"： "Orders"、 "type"： "Number"}]、 "rows"：[{ "c"：[{"v"： "GEND"}、{"v"：11}]}]}]

Comp、Gend、Holdは、システム内の注文のステータスです。数字は、そのステータスの注文数です。前に述べたように、特定の間隔でこの情報を表示するダッシュボードを作成するだけです。javascript "$（'div＃status'）。load（'livesearch.php？chart = numbers'）;"でこの構文を使用して、更新する情報を取得することができます。しかし、私はグーグルのビジュアルツールを使用し、最終的にはajaxでもチャートを使い始めたいと思っています。

助けてくれてありがとう。他に必要なものがあれば教えてください。

もう1つの更新。javascriptコードをarrayToDateTableからDataTableに変更した場合：var data = new google.visualization.DataTable（jsonData）; data.addColumn（'string'、'Status'）; data.addColumn（'number'、'Orders'）; data.addRows（data）; Chromeで「キャッチされないエラー：addRowsに指定された引数は数値または配列のいずれかである必要があります」というエラーが発生しました

最後に、json構文が実際に正しくないことを教えてくれたWebサイト' http://json.parser.online.fr/ 'を見つけました。だから私はオンラインで見つけた他の何かで別のアプローチを試しました：

htmlサイト：

var jsonData = $.ajax({
      url: "livesearch.php?chart=bars",
      dataType:"json",
      async: false
      }).responseText;
      alert(jsonData);
      var data = new google.visualization.DataTable(jsonData, 0.5);
chart = new google.visualization.Table(document.getElementById('chart_div'));
    chart.draw(data, {'allowHtml': true});

PHPサイト、imは、配列を構築して、それを機能させるためだけにここに戻すだけです。

$cols = array();
$cols[] = array('label' => 'Status','type' => 'String');
$cols[] = array('label' => 'Status', 'type' => 'number');
$cells = array();
$cells[] = array('v' => 'GEND');
$cells[] = array('v' => 11);
$rows = array();
$rows[] = array('c' => $cells);
$data = array();
$data[] = array('cols' => $cols, 'rows' => $rows);
  echo json_encode($data);

これは私の出力であり、' http: //json.parser.online.fr/ '：[{"COLS"：[{"id"： "Status"、 "type"： "String"}、{ "id"： "Orders"、 "type"： "Number"}]、 "rows"：[{"c"：[{"v"： "GEND"}、{"v"：11}]}]} ] '

ただし、Chromeではエラーは発生しませんが、テーブルは表示されません。

4

1 に答える 1

1

ケーシングに矛盾が見られます。

私の推測では、「COLS」は実際には小文字の「cols」にする必要があります。

最新のphpの例では正しく入力されていますが、json出力では正しく入力されていません。

編集： Google自身の例：

var dt = new google.visualization.DataTable(
     {
       cols: [{id: 'task', label: 'Task', type: 'string'},
                {id: 'hours', label: 'Hours per Day', type: 'number'}],
       rows: [{c:[{v: 'Work'}, {v: 11}]},
              {c:[{v: 'Eat'}, {v: 2}]},
              {c:[{v: 'Commute'}, {v: 2}]},
              {c:[{v: 'Watch TV'}, {v:2}]},
              {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}
             ]
     },
   0.6
)
于 2013-02-12T11:41:32.827 に答える