使用PHP和JavaScript动态更新Google图表

发布时间：2020-12-13 16:36:42 所属栏目：PHP教程来源：网络整理

导读：我有一个Google图表(使用 Google Visualization API,而不是 Google Charts API)在页面加载时填充.之后,用户可以从多个下拉菜单中选择选项.我希望用户能够根据他们的选择更新Google图表. 我已经创建了PHP代码,通过MySQL抓取新数据 – 用户选择了各种选项. 问

我有一个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);
}
?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!