Динамическая стилизация таблицы Google Charts

Question

Я смотрю динамически применять стили к определенным строкам в Google Charts Table. В частности, я хочу выделить текст строки, если он содержит определенную строку. Например, если текст "итого" появляется в строке, я бы хотел, чтобы весь текст этой строки был выделен жирным шрифтом.

Эта таблица заполняется результатами запроса Keen IO, поэтому я не могу быть уверен, где в таблице может появиться интересующий вас текст.

Я просматривал документацию по адресу: https://developers.google.com/chart/interactive/docs/gallery/table
На этой странице было предложено применить стили 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  

У меня также есть возможность указать параметры диаграммы через API Keen, которые затем передаются нижележащему механизму Google Chart. Эти параметры также представлены в форме JSON. Например

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

Приведет к тому, что итоговая таблица будет включать в себя страницу с размером страницы 25.

Дополнительные ссылки

Острая документация по визуализации: https://github.com/keen/keen-js/blob/master/docs/visualization.md

---

Схожие, но разные вопросы:
Применение CSS к таблице визуализации Google
Стилизация 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/

Если вы заинтересованы в добавлении логики, просто включите оператор if в функцию client.run().