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

Question

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

phpdynamicchartsgoogle-visualization

10

我有一个使用Google可视化API而非Google图表API的谷歌图表，它在页面加载时填充。之后，用户可以从多个下拉菜单中选择选项。我希望用户能够根据他们的选择更新谷歌图表。

我已经创建了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, 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'
                   });
}

- brussels0828

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dlamblin · Accepted Answer

我建议只更新数据而不是替换图表，并请求重新绘制图表。您可以修改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, 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);
}