Google 图表的动态样式 Table

Question

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

此 table 正在填充来自 Keen IO 查询的结果，因此我无法确定感兴趣的文本可能出现在 table 中的何处。

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

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

例子

我将用一个例子来演示这个场景。假设我对 Keen IO 进行了查询，获取了各种 'devices' 的版本和计数。此数据采用 JSON 形式。当数据输入 Google 图表工具时，输出以下 table..

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
  }
}

会导致结果 table 包含页面大小为 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();
    });

将 table 中的一行设置为不同格式的特定 JS 代码行是：.setProperty(rowIndex, colIndex, 'className', 'your-class-here')

我将 link 添加到 JavaScript fiddle 中运行此代码并显示 table 正在动态格式化以突出显示一行: http://jsfiddle.net/keen/6qnpuwLx/

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

Google 图表的动态样式 Table

Dynamic Styling of Google Charts Table

javascript

css

keen-io

例子

其他参考文献