Javascript 谷歌饼图“；无数据“；如何从php输出json获取数据_Javascript_Json_Google Visualization

Javascript 谷歌饼图“；无数据“；如何从php输出json获取数据

javascript json google-visualization

Javascript 谷歌饼图“；无数据“；如何从php输出json获取数据,javascript,json,google-visualization,Javascript,Json,Google Visualization,我试图从一个PHP网页创建的JSON生成一个饼图，但是我得到了一个“无数据”错误。我很少使用JavaScript，我可能没有正确地将数据加载到图表中我尝试创建一个JSON文件，并将其加载到PHP中，但这并没有改变任何事情。我希望JSON输出尽可能接近Google可视化饼图示例，以使此示例尽可能简单所有文件（数据库连接除外）都位于同一文件夹中 getData.php [["Player","Score"],["Ace",27],["Bob",21],["Chris",25],["Dave",2

我试图从一个PHP网页创建的JSON生成一个饼图，但是我得到了一个“无数据”错误。我很少使用JavaScript，我可能没有正确地将数据加载到图表中

我尝试创建一个JSON文件，并将其加载到PHP中，但这并没有改变任何事情。我希望JSON输出尽可能接近Google可视化饼图示例，以使此示例尽可能简单

所有文件（数据库连接除外）都位于同一文件夹中

getData.php

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

getData.php的输出

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

graph.html


load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Player'）；
data.addColumn（'number'，'Score'）；
var jsonData=$.ajax({
url:“getData.php”，
数据类型：“json”，
异步：false
});
变量选项={
标题：“经验分配”
};
var chart=new google.visualization.PieChart（document.getElementById（'PieChart'）；
图表绘制（数据、选项）；
}

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

已解决（参考：）

我没有在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>


load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Player'）；
data.addColumn（'number'，'Score'）；
var jsonData=$.ajax({
url:“getData.php”，
数据类型：“json”，
异步：false
}).完成（功能（结果）{
Object.keys（results）.forEach（函数（索引）{
data.addRow([
结果[指标][0],，
parseInt（结果[索引][1]）
]);
});
});
变量选项={
标题：“经验分配”
};
var chart=new google.visualization.PieChart（document.getElementById（'PieChart'）；
图表绘制（数据、选项）；
}

已解决（参考：）

我没有在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>


load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Player'）；
data.addColumn（'number'，'Score'）；
var jsonData=$.ajax({
url:“getData.php”，
数据类型：“json”，
异步：false
}).完成（功能（结果）{
Object.keys（results）.forEach（函数（索引）{
data.addRow([
结果[指标][0],，
parseInt（结果[索引][1]）
]);
});
});
变量选项={
标题：“经验分配”
};
var chart=new google.visualization.PieChart（document.getElementById（'PieChart'）；
图表绘制（数据、选项）；
}