0

我正在尝试使用 Google 图表和 PHP MySql 创建动态图表。

这就是我正在做的事情。

我的 PHP 获得列的平均值：

<?php
$response = array();
require_once dirname(__FILE__) . '/../includes/DbOperation.php';
// opening db connection
$db = new DbOperation();
if($db->averageAll()){
    $response['error']=false;
    $response['message']='Team added successfully';
}else{

$response['error']=true;
$response['message']='Could not add team';
}
?>

在 DbOperations 代码中，我有一个名为 averageAll() 的函数：

// My PHP Function
public function averageAll(){
  $query = "SELECT AVG(concept1) AS c1, AVG(concept2) AS c2, AVG(concept3) AS c3, AVG(concept4) AS c4, AVG(concept5) AS c5, AVG(concept6) AS c6 FROM KeyPad";
  if ($stmt = $this->conn->prepare($query)) {
    $alldata = array();
    $stmt->execute();
    $stmt->bind_result($c1, $c2, $c3, $c4, $c5, $c6);
      while ($stmt->fetch()) {
          $tempArr = array();
          array_push($tempArr, array("label" => "Concept", "type" =>"String"));
          array_push($tempArr, array("label" => "Time", "type" =>"number"));
          array_push($alldata, $tempArr);
          array_push($alldata, array("C1", $c1));
      }
    echo json_encode($alldata, JSON_NUMERIC_CHECK);
    $stmt->close();
  }
  $this->conn->close();
}

当我运行此代码时，我得到以下 json 格式的结果：

[
[
{label: "Concept",type: "String"},
{label: "Time", type: "number"}
],
["C1", 2.8890909090909],
["C2", 1.28376],
]

现在我的图表 HTML 看起来像这样：

<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);
function drawChart() {
          //alert(result);
          var jsonData = $.ajax({
            url: "http://www.ssdesigninteractive.com/keypad/api/readaverage.php",
            dataType: "json",
            async: false
          }).responseText;
var data = google.visualization.DataTable(jsonData);
          var options = {
            title: 'Company Performance',
            curveType: 'function',
            legend: { position: 'bottom' }
          };

          var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

          chart.draw(data, options);
        }
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>

当我运行 html 时，我在 Chrome 控制台中收到以下错误：

Uncaught (in promise) Error: Not an array
at gvjs_Fba (jsapi_compiled_default_module.js:84)
at new gvjs_8m (jsapi_compiled_default_module.js:86)
at drawChart (gChart.html:19)
at <anonymous>

我的 line:19 是这段代码：

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

我尝试了两种方法，“DataTable”和“arrayToDataTable”都不起作用。

有人可以帮我找出我可能做错了什么吗？谢谢。

4

1 回答 1

1

看起来您使用错误的语法来检索responseText. 查看如何从 ajax / jquery 获取响应文本？

于 2017-09-18T04:23:49.413 回答