如何将数据附加到聚合物谷歌图表？答案

【问题标题】：How to append data to a polymer google-chart?如何将数据附加到聚合物谷歌图表？
【发布时间】：2016-06-07 23:22:31
【问题描述】：

看看这个谷歌图表：

<google-chart id='c1' type='line' options='{"title": "Example"}'></google-chart>

用我可以做的数据填充它：

document.getElementById("c1").data = [["Date", "Value"], ["01.01.2016", 100]];

但是，我无法附加数据，这不起作用：

document.getElementById("c1").data.push(["02.01.2016", 200]);

如何向/从它推送/拼接数据？

我想通过 WebSocket 定期推送一个值并同时删除最旧的值。

更新 1

我尝试将data 替换为rows 和cols。

rows 是一个普通数组，您可以只向它添加 push 数据，这部分有效。

其实，在绘制图表之前，你可以使用document.getElementById("xy").rows.push();，它就可以工作（即图表一旦绘制，它包括了推送的行。

但是，在绘制图表之后，push 不再起作用。对rows 的更新被默默吞下，导致图表没有更新。

请注意，调用 document.getElementById("c1").drawChart(); 也不会更新图表的视图。

更新 2

正如@Ümit 所建议的，我尝试了以下两个，不幸的是都没有成功：

    var chart = document.getElementById("c1");
    chart.data = [["Year", "Things", "Stuff"], ["2004", 1000, 400], ["2005", 1170, 460], ["2006", 660, 1120], ["2007", 1030, 540]];
    window.setTimeout(function() {
        chart.push('data',["2008", 200, 999]);
        chart.drawChart();
        console.log("Pushed");
    }, 1000);

    var chart = document.getElementById("c1");
    chart.cols = [{label: "Category", type: "string"}, {label: "Value", type: "number"}];
    chart.rows = [["Category 1", Math.random() * 2], ["Category 2", Math.random() * 2]];
    window.setTimeout(function() {
        chart.push('rows', ["Category 3", Math.random() * 2]);
        chart.drawChart();
        console.log("Pushed");
    }, 1000);

更新 3

第三次尝试，替换完整的rows，没有成功：

    var chart = document.getElementById("c1");
    chart.cols = [{label: "Category", type: "string"}, {label: "Value", type: "number"}];
    chart.rows = [["Category 1", Math.random() * 2], ["Category 2", Math.random() * 2]];

    window.setTimeout(function() {
        var temp = chart.rows;
        //console.log(temp);
        temp.push(["Category 3", Math.random() * 2]);
        //console.log(temp);
        chart.push('rows', temp); // does not work
        chart.rows = temp;        // does also not work
        chart.drawChart();
        console.log("Pushed");
    }, 1000);

【问题讨论】：

标签： google-visualization polymer

【解决方案1】：

由于您分别处理Arrays 和Objects，您需要使用Polymer 的array/object mutation functions 来确保调用google-chart 中的观察者并更新图表。

所以在你的代码中你应该这样做：

document.getElementById("c1").push('data',["02.01.2016", 200]);

或

document.getElementById("xy").push('row',["02.01.2016", 200]);

更新：

问题在于google-chart 依赖于正常的property observers 用于data、rows 和cols，这只有在您替换整个数组/对象时才有效（请参阅this SO 答案）。

因此，您可以在 google-chart 存储库中创建 issue 或重新创建 data/rows

【讨论】：

我都试过了，但都不成功:-(我已经更新了问题。
好的我试试本地调试一下
我尝试替换行，但没有成功...查看我更新的答案（1 分钟后）

【解决方案2】：

这是可行的解决方案：

    var chart = document.getElementById("c1");
    chart.data = [["Year", "Things", "Stuff"], ["2004", 1000, 400], ["2005", 1170, 460], ["2006", 660, 1120], ["2007", 1030, 540]];

    window.setTimeout(function() {
        var temp = [["Year", "Things", "Stuff"], ["2004", 1000, 400], ["2005", 1170, 460], ["2006", 660, 1120], ["2007", 1030, 540], ["2008", 200, 999]];
        //chart.push("data", temp); // does not work
        chart.data = temp;          // works
        //chart.drawChart();        // is not necessary
        console.log("Pushed");
    }, 1000);

【讨论】：