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，我相信我的输出是正确的。但是我不完全确定，因为我的柱形图仍然没有显示在我的webapp上。

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

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

谷歌图表：我得到了json输出，但仍然没有图表

1 个答案: