如何更新 google 可视化仪表板的基础 google 数据表并刷新仪表板视图？

Question

我使用 Google HTML 服务创建了一个 google 可视化仪表板。基础数据table (jjdt) 由多个数据table 连接而成，例如jadt2,fa。

jjdt = google.visualization.data.join(jadt2,fa,'left',[[0,0]],[1,2,3,4,5,6,7,8,9,10,11],[2,3]);

然后我创建了一个图表包装器 (finalTable) 以在仪表板中显示 table。

    finalTable = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'table-div',
    'options': {
      'showRowNumber': false, 
      'width': '100%', 
      'height': '100%', 
      'allowHtml': true, 
      'pageSize': 20
    }
  });

dashboard.bind(wwPicker, [finalTable]);
dashboard.draw(jjdt);

这些代码工作正常。

现在我想要做的是允许单击按钮将底层 table (jjdt) 中的某些单元格设置为新值并将其反映在仪表板上。但这并不像我想象的那么简单。

我尝试了两件事：

1) 使用javascript更新对应单元格(x,y)的jjdttable并调用finalTable.draw()；

    jjdt.setCell(x,y,'New Value');
    finalTable.draw();

但这没有任何效果，也没有错误信息。

2) 我认为图表包装器可能创建了数据副本table。所以我尝试取回数据table：

 var mydt = finalTable.getDataTable();
 mydt.setCell(x,y,'New Value');
 finalTable.draw();

我认为这是文档中描述的正确方法 https://developers.google.com/chart/interactive/docs/reference#methods_4

但是，我收到一条错误消息，指出 setCell 不是 mydt 的函数，即使我可以调用 mydt.getValue()。好像我的数据 table 是 "somehow" 只读的？但它是 DataTable 而不是 DataView.. 为什么会这样？

Answer 1

仪表板需要了解修改后的数据表，所以我在您的解决方案中添加了一行 1)

jjdt.setCell(x,y,'New Value');
dashboard.draw(jjdt); // added line
finalTable.draw();

解决方案 2) 不起作用，因为 getDataTable() 是 ChartWrapper class 的一种方法，它不是 Dashboard class 的一种方法，因此您的 "is not a function" 错误信息。

Answer 2

我尝试了 PaulH 的建议，但还是不行。

但经过进一步挖掘，我终于找到了解决方案。问题是我调用 SetCell 的方式不会更新单元格的 "formatted value" 。这就是为什么我什至认为我更新了 table 单元格 "value"，它的格式和以前一样。

正确的做法是：

jjdt.setCell(x,y,'New Value','New Display Value');

这样只有 "New Display Value" 会出现在 table 图表中。但图表将根据 "New Value" 排序。

此外，要更新视图，似乎要么调用

dashboard.draw(jjdt)

或

finalTable.draw()

效果相同。所以我只用 finalTable.draw() 更新了 table。

希望这对其他人有帮助。

如何更新 google 可视化仪表板的基础 google 数据表并刷新仪表板视图？

How to update the underlying google datatable of a google visualization dashboard and refresh the dashboard view?

google-visualization

google-datatable

google-apps-script