使用 PHP 和 JavaScript 动态更新 Google Chart
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1720209/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Updating Google Chart dynamically with PHP and JavaScript
提问by brussels0828
I have a Google Chart (using the Google Visualization API, not Google Charts API) that populates on page load. After which, the user can select options from multiple drop-down menu's. I would like the user to be able to update the Google Chart based on their selections.
我有一个在页面加载时填充的 Google Chart（使用Google Visualization API，而不是Google Charts API）。之后，用户可以从多个下拉菜单中选择选项。我希望用户能够根据他们的选择更新 Google 图表。
I've already created the PHP code to grab the new data via MySQL - after the user selects the various options.
我已经创建了 PHP 代码来通过 MySQL 获取新数据 - 在用户选择各种选项之后。
Question: Should I need to replace the current graph? or should I create a JavaScript function to update the graph?
问题：我是否需要替换当前图形？还是应该创建一个 JavaScript 函数来更新图形？
Here's my Google Chart JavaScript code:
这是我的 Google Chart JavaScript 代码：
google.load("visualization", "1", {packages:["columnchart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Cluster');
data.addColumn('number', 'Loans');
data.addColumn('number', 'Lines');
/* create for loops to add as many columns as necessary */
var len = (encoded_cluster_name.length)-27; // encoded_line_volume.length;
data.addRows(len);
for(i=0; i<len; i++) {
var lines = (encoded_line_volume[i])/100000;
var loans = (encoded_loan_volume[i])/100000;
data.setValue(i, 0, ' '+encoded_cluster_name[i]+' '); /* x-axis */
data.setValue(i, 1, loans); /* Y-axis category #1*/
data.setValue(i, 2, lines); /* Y-axis category #2*/
}
/*********************************end of loops*****/
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div'));
chart.draw(data, {
width: 600,
height: 300,
is3D: true,
title: 'Prospect Population',
legend: 'right'
});
}
回答by dlamblin
I would just update the data instead of replacing the chart. And request the chart get redrawn.
我只会更新数据而不是替换图表。并要求重新绘制图表。
You can modify the playground exampleto test this out.
It looks like this:
您可以修改Playground 示例来测试这一点。
它看起来像这样：
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Height');
data.addRows(3);
data.setCell(0, 0, 'Tong Ning mu');
data.setCell(1, 0, 'Huang Ang fa');
data.setCell(2, 0, 'Teng nu');
data.setCell(0, 1, 174);
data.setCell(1, 1, 523);
data.setCell(2, 1, 86);
// Create and draw the visualization.
var v=new google.visualization.ColumnChart(
document.getElementById('visualization')
);
v.draw(data, null);
// Pretend update data triggered and processed
data.setCell(2, 1, 860);
v.draw(data, null);
}
?
