Javascript Google area chart空页，包含来自JSON的数据_Javascript_Php_Arrays_Json_Google Visualization

Javascript Google area chart空页，包含来自JSON的数据

javascript php arrays json google-visualization

Javascript Google area chart空页，包含来自JSON的数据,javascript,php,arrays,json,google-visualization,Javascript,Php,Arrays,Json,Google Visualization,我正在开发一个KPI仪表板，我的数据库包含每月热水（hwater）使用量（adate），以面积图的形式将今年与去年进行比较但是，当我运行此报告时，我的网页是空白的。我在声明列名时尝试将google.visualization.arrayToDataTable设置为.DataTable，并尝试使用服务器端AJAX，但没有成功 Area_Chart.php <?php require_once ("connect.php"); //fetch table rows from mysql

我正在开发一个KPI仪表板，我的数据库包含每月热水（hwater）使用量（adate），以面积图的形式将今年与去年进行比较

但是，当我运行此报告时，我的网页是空白的。我在声明列名时尝试将google.visualization.arrayToDataTable设置为.DataTable，并尝试使用服务器端AJAX，但没有成功

Area_Chart.php

<?php
require_once  ("connect.php");

//fetch table rows from mysql db
$query = $handler->query("
    SELECT MONTH(adate) as month,
    MAX(case when YEAR(adate) = YEAR(CURRENT_DATE)-1 THEN  hwater ELSE 0 END) as 'Last_Year',
    MAX(case when YEAR(adate) = YEAR(CURRENT_DATE) THEN hwater ELSE 0 END) as 'This_Year'
    FROM utlt
    WHERE YEAR(adate) = YEAR(CURRENT_DATE)-1 OR year(adate) = YEAR(CURRENT_DATE)
    GROUP BY MONTH(adate)
    ORDER BY MONTH(adate)");

$query->execute();
$results=$query->fetchAll(PDO::FETCH_NUM);
$json=json_encode($results);

//echo $json;
?>    

<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() {
        var data = google.visualization.arrayToDataTable([
          [ {label: 'Year', id: 'month'},
            {label: 'Last_Year', id: 'Last_Year', type: 'number'},
            {label: 'This_Year', id: 'This_Year', type: 'number'}],
          <?=$json?>      
        ], false);


        var options = {
          isStacked: 'absolute',
          title: 'Hot Water Useage',
          hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0}

        };

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


    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 100%; height: 500px;"></div>
  </body>
</html>

我注意到上面utlt的hwater在“”中被敲打，这是否意味着它是一根弦？字段类型实际上是十进制（6,3）。

utlt中的hwater被包装在“”中肯定是个问题，
因为列类型是

“number”

尝试使用

JSON\u NUMERIC\u CHECK

对JSON进行编码

$json=json\u encode（$results，json\u NUMERIC\u CHECK）
编辑
我想我在这里发现了问题
var data = google.visualization.arrayToDataTable([
  [ {label: 'Year', id: 'month'},
    {label: 'Last_Year', id: 'Last_Year', type: 'number'},
    {label: 'This_Year', id: 'This_Year', type: 'number'}],
  <?=$json?>  // <-- problem    
], false);

然后为需要外部数组的addRows
方法添加另一条语句
data.addRows(
  <?=$json?>
);


感谢您的输入和检查。我补充了你所说的，这导致数组看起来像这样<[1,1.1.671.1.671.671,21.21.269 9 9 9 9 9 9 9.11.81,22.017 7，[3,5.5.554.554,24.045 5.5 5 5 5.9 9 9 9 9 9 9 9 9 9.5 5 5 5.5 5.5 5 5 5.554,24.554,24.4,24.044,24.045 5 5 5 5 5 5 5 5.9.9 9 9 9 9 9.3 3 3,25.3 5.3 3 3 5 5 5 5.3 5.3 3 3 3 3 5 5 5 5 5 5.3 3 5 5 5.3 3 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5.3 3 3 5 5 5 5 5 5 5 5 5.5 5 5 5 5 5 5 5.5 5 5 5 5 5 5 5 5 5 5 5.5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5{label:'Year'，id:'month'，type:'number'}

哦，是的，就在我发布时，我看到它缺少类型，我添加了它，但不幸的是它似乎也没有改变任何东西。如果我注释掉标签参数

/*[{label:'Year'，id:'month'，type:'number'}，{label:'Last_Year'，id:'Last_Year'，number'}，{label:'This_Year'，id:'This_Year'，type:'number'}]，*/

我得到以下错误：

axis#0的数据列不能是string×

类型，非常感谢，似乎已经解决了这个问题！我注意到了另一个你没有提到的区别，那就是我的原始代码

google.charts.load（'current'，{packages）：['corechart']}）；google.charts.setOnLoadCallback（drawChart）；function drawChart（）{

当你有

google.charts.load（'current'，{callback:drawChart，packages:['corechart']}）；function drawChart（）{

这似乎也是个问题。为什么你有这个回调：in charts.load，

var data = google.visualization.arrayToDataTable([
  [ {label: 'Year', id: 'month', type: 'number'},
    {label: 'Last_Year', id: 'Last_Year', type: 'number'},
    {label: 'This_Year', id: 'This_Year', type: 'number'}],
]);

data.addRows(
  <?=$json?>
);