谷歌图表表的动态样式

Question

我正在寻找动态地将样式应用于 Google 图表表中的特定行。具体来说，如果一行的文本包含特定的字符串，我希望将其加粗。例如，如果文本“total”出现在一行中，我希望该行的所有文本都是粗体。

此表正在填充来自 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 格式的。当数据输入谷歌图表工具时，会输出下表..

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 的分页。

其他参考资料

Keen Visualizaion 文档：https://github.com/keen/keen-js/blob/master/docs/visualization.md

---

类似但不同的问题：
Applying CSS to Google Visualization Table
Styling Google Charts Table

---

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 语句即可。