我无法显示柱形图（Google 图表 - 服务器端）

Question

我尝试在我的一个项目中使用 Google 图表。我的 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>

这是我的数据table：

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

Answer 1

在这里，您使用单引号/撇号来指示第一列值是一个字符串...

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

但是，如果您查看数据 table 中的第 3 行，该值以撇号结尾...

Couche 0'

这是导致错误的原因。

要解决，您需要从数据 table 值中删除撇号...

Couche 0

或者在回显语句中颠倒使用单引号和双引号。

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

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

这就是为什么不建议手动构建 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.
获取数据看这个答案的例子...

我无法显示柱形图（Google 图表 - 服务器端）

I can't dislay a Column Chart (Google Chart - Server Side)

javascript

jquery

charts

google-visualization