Question

我正在做的是：我编写了一个javascript代码，用于在我的网页中绘制Google Visualization饼图。脚本使用ajax从php文件中获取数据，php执行数据库操作并以json格式显示所需数据。

问题是我无法获得确切的图表，而是获得了一张100％写在饼图中的图表以及其他书面图表。请参阅附图。

<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});  
google.charts.setOnLoadCallback(drawChart);
function drawChart() 
{
  var jsonData = $.ajax({
                          url: "getdata.php?tab=Cr",
                          dataType: "json",
                          async: false
                        }).responseText;
  var data = new google.visualization.DataTable(jsonData);
  var options = {'title':'Numbers', 'width':500, 'height':350};
  var chart = new 
  google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}
</script>

getdata.php的输出？tab = Cr

{"cols":
        [  {"id":"Department","type":"string"},
           {"id":"Count","type":"number"}],
 "rows":[
           {"c":[{"v":"IT"},{"v":"10"}]},
           {"c":[{"v":"EEE"},{"v":"1"}]},
           {"c":[{"v":"EC"},{"v":"2"}]},
           {"c":[{"v":"ME"},{"v":"2"}]},
           {"c":[{"v":"CS"},{"v":"3"}]},
           {"c":[{"v":"MT"},{"v":"20"}]},
           {"c":[{"v":"CH"},{"v":"3"}]},
           {"c":[{"v":"CIVIL"},{"v":"4"}]}
       ]
 }

请帮我在图表旁边找到包含部门名称的预期图表。

Answer 1

需要删除数字列

周围的引号"

是 - ＆gt; {"v":10}

不 - ＆gt; {"v":"10"}

请参阅以下工作代码段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable({
    "cols": [
      {"id":"Department","type":"string"},
      {"id":"Count","type":"number"}
    ],
     "rows":[
      {"c":[{"v":"IT"},{"v":10}]},
      {"c":[{"v":"EEE"},{"v":1}]},
      {"c":[{"v":"EC"},{"v":2}]},
      {"c":[{"v":"ME"},{"v":2}]},
      {"c":[{"v":"CS"},{"v":3}]},
      {"c":[{"v":"MT"},{"v":20}]},
      {"c":[{"v":"CH"},{"v":3}]},
      {"c":[{"v":"CIVIL"},{"v":4}]}
    ]
  });
  var options = {'title':'Numbers', 'width':500, 'height':350};
  var chart = new
  google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart"></div>

用php和ajax绘制谷歌可视化图表

1 个答案: