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

问题描述

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

Google Visualization's formatter can be called on a specific column, but not on a particular row.

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

I want to color code by the row, where each entry per row has a specific condition to meet. How can I achieve that?

推荐答案

以及中的选项此答案，

along with the options in this answer,
Google table Chart : how do I change the row background color based on a value,

您可以在数据表单元格上设置属性。

表格表将接受 style 和 className

you can set properties on the data table cell.
the table chart will accept cell properties for both style and className

使用对象时表示法以加载数据，请使用 p：键设置属性。

when using object notation to load the data, use the p: key to set properties.

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

其中， v： =值， f： =格式化值，& p： =单元格属性

where v: = value, f: = formatted value, & p: = cell properties

在数据已加载，

可以使用以下任何一种方法。

to set the properties after the data has been loaded,
you can use any of the following methods.

1） setCell（rowIndex，columnIndex，value，formattedValue，properties）

当使用 setCell 时，属性是第5个参数，将一个对象与您要设置的属性一起传递，例如

when using setCell, properties is the 5th argument, pass an object with the properties you want to set, e.g.

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

2） setProperty（rowIndex，columnIndex，name，value）

在使用 setProperty 时，传递您想要设置的属性的名称和值，例如

when using setProperty, pass the name and value of the property you want to set, e.g.

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

3） setProperties（rowIndex，columnIndex，properties）

当使用 setProperties 时，传递一个具有您要设置的属性的对象，例如

when using setProperties, pass an object with the properties you want to set, e.g.

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

---

请参见以下工作片段示例...

---

see following working snippet for examples...

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！