时间戳

首页 > 解决方案 > 谷歌图表饼图显示其他 100%

php - 谷歌图表饼图显示其他 100%

问题描述

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

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],

          <?php
            $query = "SELECT name, score FROM `Users` order by score desc limit 5";
            $result = mysqli_query($conn, $query);
            if ($result->num_rows > 0) {
              while($row = mysqli_fetch_array($result))
              {
                echo "['".$row['name']."', '".$row['score']."'],";
              } 
            }
          ?>

        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

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

我的代码有什么问题？我已经读到我的值存储为字符串，因此图表显示 100% 其他。

我如何使它工作？我尝试使用(int)$varPHP 函数，但这并不能使它工作..

              while($row = mysqli_fetch_array($result))
              {
                $score = $row['score'];
                $int = (int)$score;
                echo "['".$row['name']."', '".$row['score']."'],";
              } 
            }

标签： phpjson

解决方案

不要自己生成json。json_encode 始终使用：

<?php
$query = "SELECT name, score FROM `Users` order by score desc limit 5";
$result = mysqli_query($conn, $query);
$chartData = [
    ['Task', 'Hours per Day'],
];
if ($result->num_rows > 0) {
    while($row = mysqli_fetch_array($result))
    {
        $chartData[] = [$row['name'], $row['score']];
    } 
}?>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

    var data = google.visualization.arrayToDataTable(<?php echo json_encode($chartData)?>);

    var options = {
      title: 'My Daily Activities'
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }
</script>

推荐阅读