时间戳

首页 > 解决方案 > 谷歌饼图“无数据”如何从 php 输出 json 获取数据

javascript - 谷歌饼图“无数据”如何从 php 输出 json 获取数据

问题描述

我正在尝试从 PHP 网页创建的 JSON 生成饼图，但出现“无数据”错误。我对 JavaScript 的经验很少，我可能没有正确地将数据加载到图表中。

我尝试创建一个 JSON 文件并加载它而不是 PHP，但这并没有改变任何东西。我想让 JSON 输出尽可能接近 Google Visual 饼图示例，以使此示例尽可能简单。

所有文件（数据库连接除外）都在同一个文件夹中。

获取数据.php

<?php
require_once("../../lib/db_connectPDOfinance.php");

$sql = "SELECT * FROM players_test";
$sth = $dbh->prepare($sql);
$sth->execute();

$result = $sth->fetchAll(PDO::FETCH_ASSOC);

$ar = [];
array_push($ar, array('Player', 'Score'));

if (isset($result)) foreach($result as $row)
{
    $player = $row['player'];
    $player = $player;
    $score = (int)$row['score'];

    array_push($ar, array($player, $score));
}

$out = array_values($ar);
echo json_encode($out);
?>

getData.php 的输出

[["Player","Score"],["Ace",27],["Bob",21],["Chris",25],["Dave",21],["James",25],["Joe",34]]

图.html

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

      function drawChart() {

        data = new google.visualization.DataTable();
        data.addColumn('string', 'Player');
        data.addColumn('number', 'Score');

        var jsonData = $.ajax({
          url: "getData.php",
          dataType:"json",
          async: false
        });

        var options = {
          title: 'Experience Distribution'
        };

        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>

预期输出是饼图，实际输出是图表标题（经验分布）和图表所在的文本“无数据”。

标签： javascriptjsongoogle-visualization

解决方案

已解决（参考：Creating Pie Chart with Google Charts API from JSON）

我没有在 graph.html 中加载数据，我只是告诉它数据在哪里。

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

      function drawChart() {

        data = new google.visualization.DataTable();
        data.addColumn('string', 'Player');
        data.addColumn('number', 'Score');

        var jsonData = $.ajax({
          url: "getData.php",
          dataType:"json",
          async: false
        }).done(function (results) {
        Object.keys(results).forEach(function (index) {
            data.addRow([
              results[index][0],
              parseInt(results[index][1])
            ]);
        });
      });

        var options = {
          title: 'Experience Distribution'
        };

        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>

推荐阅读