php - 谷歌图表 : I get json output but still no graph

Question

我终于设法让我的 php 代码适用于我的谷歌图表柱形图。当我运行 php 时，我得到以下输出

{"cols":[{"id":"id","label":"second","type":"number"},
{"id":"threads","label":"threads","type":"number"}],"rows":[{"c":[{"v":1},{"v":1411}]},
{"c":[{"v":2},{"v":1411}]},{"c":[{"v":3},{"v":1409}]},{"c":[{"v":4},{"v":1408}]},{"c":
[{"v":5},{"v":1407}]},{"c":[{"v":6},{"v":1408}]},{"c":[{"v":7},{"v":1408}]},{"c":[{"v":8},
{"v":1410}]},{"c":[{"v":9},{"v":1410}]},{"c":[{"v":10},{"v":1412}]},{"c":[{"v":11}, 
{"v":1415}]}]} 

使用另一篇文章作为指南，here ，我相信我的输出是正确的。但是我并不完全确定，因为我的柱形图仍未在我的网络应用程序上显示。

这是我用来显示图表的代码

<script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

        google.load('visualization', '1', {'packages':['corechart']});


        google.setOnLoadCallback(drawChart);

        function drawChart() {
            var json = $.ajax({
                url: 'databaseQuery.php', 
                dataType: 'json',
                async: false
            }).responseText;

            var data = new google.visualization.DataTable(json);
            var options = {
                title: 'Active Threads',
                is3D: 'false',
                width: 800,
                height: 600
            };
            var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            chart.draw(data, options);

        }
    </script>

我有一个显示良好的表格，它也从 mysql 服务器获取数据，并显示与图表应在表格中相同的数据。

我仔细检查了这段代码，似乎找不到错误。任何人都可以指出错误或提出更好的方法吗？如果错误出现在我的 JSON 中，它应该是什么样子才能正常工作？

我的数据库中的表也如下所示

id     threads
 1       1411
 2       1411
 3       1409
 4       1408
 5       1407
 6       1408
 7       1408
 8       1410
 9       1410
 10      1412
 11      1415

Answer 1

如图所示，您的代码没有任何问题。我刚刚创建了一个测试页面，基本上是从您的标记中剪切和粘贴的，并且效果非常好。

我建议您尝试用内联 json 初始化替换 ajax 调用，看看这是否适合您。

var json = {
  "cols":[
    {"id":"id","label":"second", "type":"number"},
    {"id":"threads","label":"threads","type":"number"}
  ],
  "rows":[
    {"c":[{"v":1},{"v":1411}]},
    {"c":[{"v":2},{"v":1411}]},
    {"c":[{"v":3},{"v":1409}]},
    {"c":[{"v":4},{"v":1408}]},
    {"c":[{"v":5},{"v":1407}]},
    {"c":[{"v":6},{"v":1408}]},
    {"c":[{"v":7},{"v":1408}]},
    {"c":[{"v":8},{"v":1410}]},
    {"c":[{"v":9},{"v":1410}]},
    {"c":[{"v":10},{"v":1412}]},
    {"c":[{"v":11},{"v":1415}]}
  ]
};

var data = new google.visualization.DataTable(json);

如果有效，那么您至少可以确认问题出在 ajax 调用或 php 后端的某个位置。

另一个想法:这可能看起来很明显，但值得仔细检查您的页面上是否有一个带有 chart_div id 的元素？

<div id='chart_div'></div>