Question

我正在寻找动态地将样式应用于Google Charts Table中的特定行。具体来说，如果它包含一个特定的字符串，我希望加粗行的文本。例如，如果文字＆＃39; 总计＆＃39;连续出现，我希望此行的所有文字都是粗体。

此表格中填充了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 Chart工具后，将输出以下表格。

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 Chart引擎。这些选项也是JSON格式。例如

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

会导致生成的表包含页面大小为25的分页。

其他参考资料

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

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

Answer 1

通常，您将定义Keen查询，然后创建可视化对象，最后运行查询和可视化。以下是如何操作被绘制数据的示例：

NR==FNR {                            # process browser_type file
    a[$1]=$2                         # remember remember the second of ...
    next }                           # skip to the next record
{                                    # process the other files
    $NF=( $NF in a ? a[$NF] : $NF) } # replace last field with browser from a
1                                    # implicit print

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

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

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

Google图表表的动态样式

实施例

其他参考资料

1 个答案: