带有客户端数据填充的谷歌图表

Question

我一直在寻找利用实时客户端数据从谷歌图表填充图表的可能性。我尝试过向后端发送请求的解决方案，但我希望将此端与客户端环境分开，并且API目前仍在开发中。

这是一个标准的饼图

//JS Code 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 

    // Load the Visualization API and the piechart package. 
    google.load('visualization', '1.0', {'packages':['corechart']}); 

    // Set a callback to run when the Google Visualization API is loaded. 
    google.setOnLoadCallback(drawChart); 

    // Callback that creates and populates a data table, 
    // instantiates the pie chart, passes in the data and 
    // draws it. 
    function drawChart() { 

     // Create the data table. 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Topping'); 
     data.addColumn('number', 'Slices'); 
     data.addRows([ 
      ['Mushrooms', 3], 
      ['Onions', 1], 
      ['Olives', 1], 
      ['Zucchini', 1], 
      ['Pepperoni', 2] 
     ]); 

     // Set chart options 
     var options = {'title':'How Much Pizza I Ate Last Night', 
      'width':400, 
      'height':300}; 

     // Instantiate and draw our chart, passing in some options. 
     var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
    } 
</script> 
//HTML Code 
<div id="chart_div"></div> 

示例代码有没有办法从正在显示与jQuery甚至纯JavaScript表中检索数据来填充谷歌图表？我想这将是这个样子：

data.addRows([ 
      [$('#textfield1').getAttribute('value'), 3], 
      [$('#textfield2').getAttribute('value'), 1], 
      [$('#textfield3').getAttribute('value'), 1], 
      [$('#textfield4').getAttribute('value'), 1], 
      [$('#textfield5').getAttribute('value'), 2] 
     ]); 

有没有人有经验，在尝试此，甚至不知道它是否有可能？

欣赏任何输入！

Answer 1

使用纯JavaScript，让我们假设你已经在HTML <table>上述硬编码DataTablerows：

<table id="table"> 
    <thead> 
     <tr> 
      <th>topping</th> 
      <th>slices</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr><td>Mushrooms</td><td>3</td></tr> 
     <tr><td>Onions</td><td>1</td></tr> 
     <tr><td>Olives</td><td>1</td></tr> 
     <tr><td>Zucchini</td><td>1</td></tr> 
     <tr><td>Pepperoni</td><td>2</td></tr> 
    </tbody> 
</table>  

然后你就可以读取表，并把它作为图表DataTable这样一个来源：

... 
data.addColumn('string', 'Topping'); 
data.addColumn('number', 'Slices'); 

var tableRows = document.querySelectorAll('#table tbody tr'); 
for (var i=0;i<tableRows.length;i++) { 
    data.addRow([ 
     tableRows[i].cells[0].textContent, 
     parseInt(tableRows[i].cells[1].textContent) 
    ]); 
} 
... 

观看演示 ​​- >http://jsfiddle.net/akLf3gL9/

注意事项parseInt(...)重要的是，我们在＃2列注入的数据实际上是typeof数字，否则可视化将失败。