我有一个Google图表(使用
Google Visualization API,而不是
Google Charts API)在页面加载时填充.之后,用户可以从多个下拉菜单中选择选项.我希望用户能够根据他们的选择更新Google图表.
我已经创建了PHP代码,通过MysqL抓取新数据 – 用户选择了各种选项.
问题:我需要更换当前的图表吗?还是应该创建一个JavaScript函数来更新图形?
以下是我的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,' '+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' }); }
我只是更新数据而不是替换图表.并请求图表重新绘制.
您可以修改playground example进行测试.
看起来像这样:
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,'Tong Ning mu'); data.setCell(1,'Huang Ang fa'); data.setCell(2,'Teng nu'); data.setCell(0,174); data.setCell(1,523); data.setCell(2,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,860); v.draw(data,null); }