Question

我使用谷歌表格图表显示一些数据作为表格。根据行上的状态值，我必须更改行的背景颜色。所以我必须动态显示多种颜色。我检查了表格图表文档并在线搜索。但是找不到这样的功能。请帮忙。

Answer 1

以下是您的一些选择......

使用ColorFormat formatter
通过提供
在数据中添加您自己的html

v:值
  f:格式化值
  和
  allowHtml: true configuration option
在'ready'事件

请参阅以下使用全部三个的示例...

google.charts.load('current', {
  callback: 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 you own html
        {v: 'Web', f: '<div style="background-color: cyan;">Web</div>'},
        {v: 9999, f: '<div style="background-color: cyan;">9999</div>'}
      ]
    ]);

    var container = document.getElementById('table_div');
    var table = new google.visualization.Table(container);
    google.visualization.events.addListener(table, 'ready', function () {
      for (var i = 0; i < data.getNumberOfRows(); i++) {
        if (data.getValue(i, 1) === 1100) {
          // modify the table directly on 'ready'
          container.getElementsByTagName('TR')[i+1].style.backgroundColor = 'magenta';
        }
      }
    });

    // use formatter
    var formatter = new google.visualization.ColorFormat();
    formatter.addRange(-20000, 0, 'white', 'orange');
    formatter.addRange(20000, null, 'red', '#33ff33');
    formatter.format(data, 1); // Apply formatter to second column

    table.draw(data, {
      allowHtml: true
    });
  },
  packages: ['table']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>

Answer 2

将 HTML DOM 与数据对象混合时，rowIndex可能不同步，并编辑了错误的行。就我而言，我将dashboard()和bind()与ChartWrapper()和ControlWrapper()一起使用了StringFilter，因此避免了addListener()来更改 HTML DOM 并在渲染之前修改了数据对象：

for (var i = 0; i < data.getNumberOfRows(); i++) {
  if (data.getValue(i, 1) === 1100) {
    // change entire row
    data.setRowProperty(i, 'style', 'background-color:magenta;');
    // or change columns 0 & 1
    data.setProperty(i, 0, 'style', 'background-color:magenta;');
    data.setProperty(i, 1, 'style', 'background-color:magenta;');
  }
}

Google表格图表：如何根据列值更改行背景颜色

2 个答案: