[英]how to dynamically add rows to google pie chart using ajax and jquery
每次通过Ajax调用提取数据时,如何动态向Google饼图添加行?
html
<div id="piechart" style="width: 900px; height: 500px;"></div>
谷歌饼图
google.charts.load("current", {packages: ["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
'width': 900,
'height': 500
// pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
现在,而不是我希望在页面加载后立即动态添加行,应该添加从ajax查询中获取的新值,如下所示:
阿贾克斯电话
function getPieChartData() {
$.ajax({
url: pieChartData,
headers: {
token: token,
params: JSON.stringify({
"ads":[2,3],"start_date":"2018-01-01"
})
},
type: "GET"
}).then((response)=> {
r = JSON.parse(response);
let data = r.data
if(data.length >0){
}
})
}
默认情况下, google.charts.load
将等待页面加载,
我们可以用它代替$(document).ready
或类似的函数。
Google图表加载后,继续创建数据表,图表,选项等,
然后获取数据。
假设数据是一个数组数组,类似于您提供的示例,
您可以简单地使用数据表方法addRows
将数据添加到数据表中。
例如
data.addRows([
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
要么...
data.addRows(r.data);
如果是单个数组或一行,请使用addRow
data.addRow(['Work', 11]);
完整的代码段可能看起来像这样...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category');
data.addColumn('number', 'Value');
var options = {
width: 900,
height: 500
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
getPieChartData();
function getPieChartData() {
var pieChartData = 'some url';
var token = 'some token';
$.ajax({
url: pieChartData,
headers: {
token: token,
params: JSON.stringify({
"ads":[2,3],"start_date":"2018-01-01"
})
},
type: "GET"
}).then((response)=> {
r = JSON.parse(response);
if (r.data.length > 0){
data.addRows(r.data);
chart.draw(data, options);
}
});
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.