Question

我正在开发一个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>

echo $ json的输出：

[["1","1.671","21.269"],["2","3.810","22.017"],["3","5.554","24.045"],["4","6.930","25.036"],["5","8.845","27.116"],["6","11.793","28.058"],["7","13.244","28.996"],["8","14.471","30.342"],["9","16.260","30.977"],["10","17.199","31.923"],["11","18.494","33.155"],["12","19.563","33.797"]]

我注意到 utlt 中的 hwater 在＆＃34;＆＃34; 中被敲击，这是否意味着它是一个字符串？字段类型实际上是十进制（6,3）。

Answer 1

来自 utlt 的

hwater 被包裹在“”中绝对是个问题，
由于列类型为'number'

尝试使用JSON_NUMERIC_CHECK对json进行编码

$json=json_encode($results, JSON_NUMERIC_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);

问题是包裹行数组的外部数组
//--> [[1,1.671,21.269]...

给出放置<?=$json?>的位置，不应将行包装在数组

中

使用addRows方法加载json

可以很容易地纠正这个问题

从arrayToDataTable

中删除json

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'}],
]);

然后为addRows方法添加另一个语句，该方法需要外部数组

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

请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  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(
    [[1,1.671,21.269],[2,3.810,22.017],[3,5.554,24.045],[4,6.930,25.036],[5,8.845,27.116],[6,11.793,28.058],[7,13.244,28.996],[8,14.471,30.342],[9,16.260,30.977],[10,17.199,31.923],[11,18.494,33.155],[12,19.563,33.797]]
  );

  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 src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

带有JSON数据的Google区域图空页

1 个答案: