Question

Google Visualization的格式化程序可以在特定列上调用，但不能在特定行上调用。

我想按行进行颜色编码，其中每行的每个条目都有特定的条件要满足。我该如何实现？

调用formatter.format（table，colIndex），传入DataTable和要重新格式化的数据的>（从零开始）列号。

Answer 1

以及此答案中的选项，
Google table Chart : how do I change the row background color based on a value，

您可以在数据表单元格上设置属性。
表格将接受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>

在行而不是列上使用Google Visualiztion Formatter

1 个答案: