在行而不是列上使用 Google Visualiztion Formatter [英] Use Google Visualiztion Formatter on Rows rather than Columns

问题描述

可以在特定列上调用 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?

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

Call formatter.format(table, colIndex), passing in the DataTable and the >(zero-based) column number of the data to reformat.

文档链接

推荐答案

连同此答案中的选项，
Google 表格图表:如何根据值更改行背景颜色、

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