Question

看一下这个谷歌图表：

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

Answer 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依赖于data，rows和cols的正常property observers，只有在替换整个数组/对象时才会有效（见this SO回答）。

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

Answer 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);

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

2 个答案: