Используйте Google Visualiztion Formatter для строк, а не столбцов - PullRequest
Новая
       11

Используйте Google Visualiztion Formatter для строк, а не столбцов

2 голосов
/ 22 мая 2019

Средство форматирования Google Visualization можно вызывать в определенном столбце, но не в определенной строке.

Я хочу раскрасить код для строки, где каждая запись в строке имеет определенное условие для выполнения. Как мне этого добиться?

Вызовите formatter.format (table, colIndex), передав в DataTable и номер столбца> (с нуля) данных для переформатирования.

Ссылка на документы

1 Ответ

2 голосов
/ 22 мая 2019

вместе с опциями в этом ответе
Диаграмма таблицы Google: как изменить цвет фона строки на основе значения ,

Вы можете установить свойства в ячейке таблицы данных.
таблица таблицы будет принимать свойства ячеек для style и className

при использовании записи объекта для загрузки данных используйте клавишу p: для установки свойств. 

{v: 'Web', f: null, p: {style: 'background-color: cyan;'}}

, где v: = значение, f: = форматированное значение, & p: = свойства ячейки

для установки свойств после загрузки данных,
Вы можете использовать любой из следующих методов.

1) setCell(rowIndex, columnIndex, value, formattedValue, properties)

при использовании setCell, свойства - это 5-й аргумент, передайте объект со свойствами, которые вы хотите установить, например, 

data.setCell(0, 0, 'Shoes', null, {style: 'background-color: yellow;'});

2) setProperty(rowIndex, columnIndex, name, value)

при использовании setProperty передайте имя и значение свойства, которое вы хотите установить, например, 

data.setProperty(1, 0, 'style', 'background-color: lime;');

3) setProperties(rowIndex, columnIndex, properties)

при использовании setProperties передать объект со свойствами, которые вы хотите установить, например, 

data.setProperties(2, 1, {style: 'background-color: magenta;'});

см. Следующий рабочий фрагмент для примеров ... 

google.charts.load('current', {
  packages: ['table']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Department');
  data.addColumn('number', 'Revenues');
  data.addRows([
    ['Shoes', 10700],
    ['Sports', -15400],
    ['Toys', 12500],
    ['Electronics', -2100],
    ['Food', 22600],
    ['Art', 1100],
    [
      // add style property
      {v: 'Web', p: {style: 'background-color: cyan;'}},
      {v: 9999, p: {style: 'background-color: cyan;'}}
    ]
  ]);
  
  // use setCell(rowIndex, columnIndex [, value [, formattedValue [, properties]]])
  data.setCell(0, 0, 'Shoes', null, {style: 'background-color: yellow;'});

  // use setProperty(rowIndex, columnIndex, name, value)
  data.setProperty(1, 0, 'style', 'background-color: lime;');

  // use setProperties(rowIndex, columnIndex, properties)
  data.setProperties(2, 1, {style: 'background-color: magenta;'});

  // use a css className instead of style
  data.setProperty(3, 0, 'className', 'customCell');

  var container = document.getElementById('table_div');
  var table = new google.visualization.Table(container);
  
  table.draw(data, {
    allowHtml: true
  });
});
.customCell {
  color: red;
  font-weight: bold;
  text-decoration: underline;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>
...