Google 包含客户端数据填充的图表

Question

我一直在寻找使用实时客户数据从 Google 图表填充图表的可能性。我已经尝试过将请求发送到后端的解决方案，但我想将这一端与客户端环境分开，并且 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>

有没有一种方法可以通过从 table 中检索数据来填充 Google 图表，该 table 用 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> 中具有上述硬编码的 DataTable rows :

<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>

然后您可以阅读 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(...)重要的是我们在#2th列注入的数据实际上是typeof number，否则可视化将失败。

Google 包含客户端数据填充的图表

Google Charts with client side data population

javascript

jquery

google-visualization