0

我终于设法让我的 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}]}]}

使用此其他帖子作为指南，在这里，我相信我的输出是正确的。但是我不完全确定，因为我的柱形图仍未显示在我的 web 应用程序上。

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

<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
4

1 回答 1

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>
于 2013-07-05T18:18:14.680 回答