用php和ajax绘制Google可视化图表

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

需要去掉引号"周围的数字列

是-> {"v":10}

否-> {"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>