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