4

我正在寻找动态地将样式应用于 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 Documentation: https://github.com/keen/keen-js/blob/master/docs/visualization.md

Similar, but different questions:
Applying CSS to Google Visualization Table
Styling Google Charts Table

4

1 回答 1

3

Typically you will define the Keen query, then create the visualization object, then lastly run both the query and visualization. Here's an example of how you can manipulate the data being charted: 

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();
    });

The particular line of JS code that sets a line in the table to a different format is: .setProperty(rowIndex, colIndex, 'className', 'your-class-here')

I included a link to a working JavaScript fiddle that runs this code and shows the table being dynamically formatted to highlight a row: http://jsfiddle.net/keen/6qnpuwLx/

If you're interested in adding logic, just include your if statement in the client.run() function.

于 2017-01-06T22:25:46.957 回答