php - 使用 Ajax 和 PHP 的 Google 图表

Question

这是我第一次发帖，如果有什么遗漏，请告诉我。

我最近开始研究 AJAX，我正在尝试开发一个简单的仪表板，它可以从我们的数据库中提取信息并将其呈现到 google 表格 View 中的网页。但是，我在 Chromes Javascript 控制台中不断收到错误“ Uncaught Error :不是数组格式+en，默认，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 一起使用。

感谢您的帮助。如果您还需要什么，请告诉我。

再更新一次。如果我将 javascript 代码从 arrayToDateTable 更改为 DataTable: var data = new google.visualization.DataTable(jsonData); data.addColumn('字符串', '状态'); data.addColumn('number', 'Orders');数据.addRows(数据)；我在 Chrome 中收到错误“ Uncaught Error :给 addRows 的参数必须是数字或数组”

最后我找到了网站' http://json.parser.online.fr/ ' 这告诉我 json 语法确实不正确。所以我用我在网上找到的其他东西尝试了一种不同的方法:

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 站点，我只是简单地构建数组以传回此处以使其正常工作。

$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 中没有收到任何错误，但没有显示表格。

Answer 1

我发现大小写不一致。

我的猜测是“COLS”实际上应该是小写的“cols”。

在最新的 php 示例中输入正确，但在 json 输出中不正确。

编辑:谷歌自己的一个例子:

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
)