Google图表表格的动态样式

Question

我正在寻找将样式动态应用于Google Charts Table中特定行的样式。 具体来说，如果行中包含特定字符串，我希望将其粗体显示。 例如，如果文本“ 合计 ”出现在一行中，则我希望该行的所有文本都以粗体显示 。

该表中填充了Keen IO查询的结果，因此我不确定该表中可能出现感兴趣的文本。

我正在寻找在以下位置找到的文档： https : //developers.google.com/chart/interactive/docs/gallery/table#customproperties
该页面建议应用CSS样式，其示例可在以下网址查看： https : //developers.google.com/chart/interactive/docs/examples

但是，此示例在表中的数据填充期间应用了CSS。 我的数据是动态查询的结果，因此我将无法使用这种方法。 在此过程的后期，我可能需要插入内联CSS。

例

我将通过示例演示该场景。 假设我有一个查询Keen IO，获取了各种``设备''的版本和计数，这些数据是JSON格式的。 将数据输入Google图表工具后，将输出下表。

device  version count  
item1   1.0     4
item1   1.1     3  
item1   total   7  
item2   5.4     8  
item2   5.5     2  
item2   6.0     14  
item2   total   24  

我还可以通过Keen API指定图表选项，然后将这些选项传递给基础Google图表引擎。 这些选项也是JSON形式。 例如

{
  "chartOptions": {
    "page": "enable",
    "pageSize": 25
  }
}

将导致结果表包括页面大小为25的分页。

其他参考

敏锐的可视化文档： https : //github.com/keen/keen-js/blob/master/docs/visualization.md

---

类似但不同的问题：
将CSS应用于Google可视化表
设置Google图表表格的样式

---

Answer 1

通常，您将定义Keen查询，然后创建可视化对象，最后运行查询和可视化。 这是如何处理图表数据的示例：

 Keen.ready(function(){ // Create a new Query instance var query = new Keen.Query("count", { event_collection: "user_action", group_by: "user.name", timeframe: { start: "2013-12-01", end: "2014-12-01" } }); // Create a new Dataviz instance var table = new Keen.Dataviz() .chartType('table') .el(document.getElementById('table')) .chartOptions({ width: '100%' }); // Run the query and the result client.run(query, function(err, res){ table .parseRequest(this) .dateFormat(function(googleDataTable){ // .setProperty(rowIndex, colIndex, 'className', 'your-class-here') googleDataTable.setProperty(3, 0, 'className', 'custom custom-left'); googleDataTable.setProperty(3, 1, 'className', 'custom custom-right'); return googleDataTable; }) .render(); }); 

将表中的行设置为其他格式的JS代码的特定行是：.setProperty（rowIndex，colIndex，'className'，'your-class-here'）

我提供了一个运行该代码的JavaScript小提琴的链接，该小提琴运行该代码并显示动态格式化的表格以突出显示一行： http : //jsfiddle.net/keen/6qnpuwLx/

如果您有兴趣添加逻辑，只需在client.run（）函数中包含if语句即可。