我无法绘制列图（Google Chart - 服务器端）。

Question

我试图在我的一个项目中使用Google Charts，我的SQL工作良好，但我不能得到图表，也许我需要提到我的数据是一个数字（0.00）。我的SQL工作良好，但我不能得到图表，也许我需要提到我的数据是一个数字（0.00）。我正在使用我的POSTGRESQL数据库（服务器端）。

这是我的代码。

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
  google.charts.load('current', {'packages':['corechart','bar']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['niveau','me1','me2','me3','me4','me5','me6'],

    <?php
        $result = $pdo->query ("SELECT  
                niveau.nom_niveau AS niveau,
                ROUND (( SUM(CASE WHEN mesure.e1 IS NOT NULL THEN mesure.pp*mesure.e1 ELSE null END) / SUM(CASE WHEN mesure.e1 IS NOT NULL THEN mesure.pp ELSE null END)) ,2) AS me1,
                ROUND (( SUM(CASE WHEN mesure.e2 IS NOT NULL THEN mesure.pp*mesure.e2 ELSE null END) / SUM(CASE WHEN mesure.e2 IS NOT NULL THEN mesure.pp ELSE null END)) ,2) AS me2,
                ROUND (( SUM(CASE WHEN mesure.e3 IS NOT NULL THEN mesure.pp*mesure.e3 ELSE null END) / SUM(CASE WHEN mesure.e3 IS NOT NULL THEN mesure.pp ELSE null END)) ,2) AS me3,
                ROUND (( SUM(CASE WHEN mesure.e4 IS NOT NULL THEN mesure.pp*mesure.e4 ELSE null END) / SUM(CASE WHEN mesure.e4 IS NOT NULL THEN mesure.pp ELSE null END)) ,2) AS me4,
                ROUND (( SUM(CASE WHEN mesure.e5 IS NOT NULL THEN mesure.pp*mesure.e5 ELSE null END) / SUM(CASE WHEN mesure.e5 IS NOT NULL THEN mesure.pp ELSE null END)) ,2) AS me5,
                ROUND (( SUM(CASE WHEN mesure.e6 IS NOT NULL THEN mesure.pp*mesure.e6 ELSE null END) / SUM(CASE WHEN mesure.e6 IS NOT NULL THEN mesure.pp ELSE null END)) ,2) AS me6
        FROM mesure , puits, niveau , gisement
        where mesure.cm = puits.cm
        and mesure.num_niveau = niveau.id_niveau
        and gisement.id_gisement = puits.num_gisement
        group by niveau.nom_niveau");

        foreach($result AS $row) {
            echo "['".$row['niveau']."',".$row['me1'].",".$row['me2'].",".$row['me3'].",".$row['me4'].",".$row['me5'].",".$row['me6']."], "; 
        }
    ?>
    ]);

    var options = {
        chart: {
        title: '',
        subtitle: 'Moyenne Pondérée des éléments chimiques en chaque niveau phoshaté' }
    };

    var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
    chart.draw(data, google.charts.Bar.convertOptions(options));       
  }
  </script>

这是我的数据表

我希望有人能帮我解决这个问题。

Answer 1

在这里，你使用一个单引号来表示第一列的值是一个字符串...。

echo "['".$row['niveau']."'," ...

然而，如果你看看数据表中的第3行，该值以引号结束......。

Couche 0'

这就是导致错误的原因。

要解决这个问题，你需要从数据表的值中去掉引号......。

Couche 0

或者在echo语句中反过来使用单引号和双引号。

foreach($result AS $row) {
    echo '["'.$row["niveau"].'",'.$row["me1"].','.$row["me2"].','.$row["me3"].','.$row["me4"].','.$row["me5"].','.$row["me6"].'], '; 
}

假设没有包含双引号的数据表值。

---

这就是为什么不建议手动构建json字符串，而是将数据构建为数组，然后在html页面上进行编码。

function drawChart() {
  var data = google.visualization.arrayToDataTable(
    <?php

      $result = $pdo->query ("SELECT
        niveau.nom_niveau AS niveau,
        ROUND (( SUM(CASE WHEN mesure.e1 IS NOT NULL THEN mesure.pp*mesure.e1 ELSE null END) / SUM(CASE WHEN mesure.e1 IS NOT NULL THEN mesure.pp ELSE null END)) ,2) AS me1,
        ROUND (( SUM(CASE WHEN mesure.e2 IS NOT NULL THEN mesure.pp*mesure.e2 ELSE null END) / SUM(CASE WHEN mesure.e2 IS NOT NULL THEN mesure.pp ELSE null END)) ,2) AS me2,
        ROUND (( SUM(CASE WHEN mesure.e3 IS NOT NULL THEN mesure.pp*mesure.e3 ELSE null END) / SUM(CASE WHEN mesure.e3 IS NOT NULL THEN mesure.pp ELSE null END)) ,2) AS me3,
        ROUND (( SUM(CASE WHEN mesure.e4 IS NOT NULL THEN mesure.pp*mesure.e4 ELSE null END) / SUM(CASE WHEN mesure.e4 IS NOT NULL THEN mesure.pp ELSE null END)) ,2) AS me4,
        ROUND (( SUM(CASE WHEN mesure.e5 IS NOT NULL THEN mesure.pp*mesure.e5 ELSE null END) / SUM(CASE WHEN mesure.e5 IS NOT NULL THEN mesure.pp ELSE null END)) ,2) AS me5,
        ROUND (( SUM(CASE WHEN mesure.e6 IS NOT NULL THEN mesure.pp*mesure.e6 ELSE null END) / SUM(CASE WHEN mesure.e6 IS NOT NULL THEN mesure.pp ELSE null END)) ,2) AS me6
      FROM mesure , puits, niveau , gisement
      where mesure.cm = puits.cm
      and mesure.num_niveau = niveau.id_niveau
      and gisement.id_gisement = puits.num_gisement
      group by niveau.nom_niveau");

      // create data array
      $data = [];
      $data[] = ['niveau','me1','me2','me3','me4','me5','me6'];
      foreach($result AS $row) {
        $data[] = [$row['niveau'], $row['me1'], $row['me2'], $row['me3'], $row['me4'], $row['me5'], $row['me6']];
      }

      // write data array to page
      echo json_encode($data);
    ?>
  );

  var options = {
      chart: {
      title: '',
      subtitle: 'Moyenne Pondérée des éléments chimiques en chaque niveau phoshaté' }
  };

  var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
}

此外，我建议不要将php和html的javascript结合起来，将php和html分开，然后使用ajax从php中获取数据。

如何自动更新谷歌图表