我发现显示Google Charts的大部分示例都有简单的小数组......
我需要从我的服务器中拉出一个数组。
我可以得到一个饼图来绘制,但它不会更新。
这是我尝试获得灵活的重绘饼图:
在我的javascript顶部,但在document.ready之前:
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
我的drawChart功能:
function drawChart(arrFeedbackResult3) {
console.log('Draw a fucking chart ... ') + console.log(arrFeedbackResult3);
var chart_data = new google.visualization.DataTable(arrFeedbackResult3);
var options = {
title: 'Comments by Group',
sliceVisibilityThreshold: 1/20, // Only > 5% will be shown.
width: 400,
height: 400
};
chart = new
google.visualization.PieChart(document.getElementById('groupPieChartDiv'));
chart.draw(chart_data, options);
// chart = new google.visualization.PieChart(document.getElementById('groupPieChartDiv'));
// chart.draw(data, options);
}
并且在单击按钮后,将新数据传递给drawChart的功能:
function setupFeedback3(arrFeedbackResult3){ // Create Group summary Graphs
console.log('Groups summary from DB: ') + console.log(arrFeedbackResult3);
drawChart(arrFeedbackResult3);
} // END setupFeedback3
我在上面的代码中看到了“table has no columns”消息。
数组arrFeedbackResult3格式正确,并在我更改代码时呈现图表但最终无法刷新。
任何帮助赞赏。我想我只是错过了使用Google Charts的基本流程......以及应该如何/在何处使用回调。
在非常慷慨和详细的回复后,我的下一次尝试更新。
我的js与html分开存放。我无法通过回调传递数组来工作。我得到“不是构造函数”错误或“不是函数”。我认为因为添加括号值会破坏代码。
我也不理解有关document.ready的评论。我已经保留了document.ready以加载我的所有其他功能。
在文件之后。我已经:
google.charts.load('current', {
packages:['corechart'],
callback: drawChart
});
然后,在我的db POST获取数据后,我调用:
function setupFeedback3(result){ // Create Group summary Graphs
arrFeedbackResult3 = result; //Store in global variable for access by chart
drawChart();
} // END setupFeedback3
arrFeedbackResult3是一个GLOBAL变量 - 只有这样才能将数据传递给绘制图表函数。
然后:
function drawChart() {
console.log('Draw a chart ... ') + console.log(arrFeedbackResult3);
// var chart_data = new google.visualization.DataTable(arrFeedbackResult3);
var chart_data = google.visualization.arrayToDataTable(arrFeedbackResult3);
var options = {
title: 'Comments by Group',
sliceVisibilityThreshold: 1/20,
width: 400,
height: 400
};
var chart = new google.visualization.PieChart(document.getElementById('groupPieChartDiv'));
chart.draw(chart_data, options);
}
这是有效的,图表会在您提供不同的数据时更新,但它似乎是一种劣质的事态。传递数据的一个特定示例,相对于一个愚蠢的简单示例或在函数内部使用AJAX,将会非常有用。
首先,建议不要使用jsapi
来加载库。
根据release notes ...
通过
jsapi
加载程序保留的Google Charts版本不再一致地更新。请从现在开始使用新的gstaticloader.js
。
<script src="https://www.gstatic.com/charts/loader.js"></script>
这只会改变load
声明......
google.charts.load('current', {packages:['corechart']});
接下来,可以将回调添加到load语句中......
google.charts.load('current', {
packages:['corechart'],
callback: drawChart
});
或者你可以使用它返回的承诺......
google.charts.load('current', {
packages:['corechart']
}).then(drawChart);
另外,load语句将一直等到文档准备就绪,
所以它可以用来代替 - > $(document).ready
最后,在创建数据表时, 构造函数的参数应该是JSON,而不是简单的数组 见Format of the Constructor's JavaScript Literal data Parameter, 对于特定的JSON格式
如果要从简单数组创建数据表,
使用static method - > arrayToDataTable
建议设置类似于以下...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
// get data
drawChart(arrayData);
});
function drawChart(arrayData) {
var chart_data = google.visualization.arrayToDataTable(arrayData);
var options = {
title: 'Comments by Group',
sliceVisibilityThreshold: 1/20,
width: 400,
height: 400
};
var chart = new google.visualization.PieChart(document.getElementById('groupPieChartDiv'));
chart.draw(chart_data, options);
}
function setupFeedback(arrayData) {
// get data
drawChart(arrayData);
}
UPDATE
您可以使用load语句返回的promise作为回调和文档就绪 只需移动代码,如下所示......
然后你可以加载你的ajax调用来获取数据
google.charts.load('current', {
packages:['corechart']
}).then(function () {
// move code from document ready here
// get data
getData();
});
function getData() {
$.ajax({
type: 'POST',
contentType: 'application/json',
url: sourceURL,
success: setupFeedback
});
}
function setupFeedback(result) {
// you could draw the chart here
// just move the code from drawChart
// or pass the data along to another function
drawChart(result);
}
function drawChart(result) {
var chart_data = google.visualization.arrayToDataTable(result);
var options = {
title: 'Comments by Group',
sliceVisibilityThreshold: 1/20,
width: 400,
height: 400
};
var chart = new google.visualization.PieChart(document.getElementById('groupPieChartDiv'));
chart.draw(chart_data, options);
}