Google table Chart：我如何根据列值更改行背景颜色 [英] Google table Chart : how do I change the row background color based on a column value

问题描述

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

解决方案

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

1. 使用 ColorFormat格式化程序
   

2. 通过提供
   $在数据中添加您自己的 html b $ b

   
   

   v：值
   
   f：格式化值
   
   和
   
   allowHtml：true 配置选项
   




3. 在'ready'事件

见下面的例子，它使用所有三个...

google.c harts.load（'current'，{callback：function（）{var data = new google.visualization.DataTable（）; data.addColumn（'string'，'Department'）; data.addColumn（'数字'，'收入'）; data.addRows（['Shoes'，10700]，['Sports'，-15400]，['Toys'，12500]，['Electronics'，-2100]，['Food'，22600]，['Art '，1100]，[//添加自己的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）{//直接在'ready'上修改表格container.getElementsByTagName（'TR'）[i + 1] .style.backgroundColor ='magenta';}}}）; //使用格式化程序var formatter = new google.visualization.ColorFormat（）; formatter.addRange（-20000,0，'white'，'orange'）; formatter.addRange（20000，null，'red'，'＃33ff33'）; formatter.format（data，1）; //将格式化程序应用于第二列table.draw（data，{allowHtml：true}）; }，packages：['table']}）;

I am using google table chart to show some data as a table. Based on the status value on the row, I have to change the background color of the row. So I have to show multiple colors dynamically. I have checked the table chart documentation and also searched online. But could not find such a functionality provided. Please help.

解决方案

Here are some options for you...

1. Use the ColorFormat formatter

2. Add your own html in the data by providing

   v: value
   f: formatted value
   and
   allowHtml: true configuration option

3. Modify the table yourself on the 'ready' event

see following example which uses all three...

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>

这篇关于Google table Chart：我如何根据列值更改行背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！