javascript - 更改数据表的列背景

Question

我正在尝试将名为 Fund1 的一列的背景颜色更改为浅橙色，以便它在如下所示的数据表中脱颖而出。

<<script type="text/javascript"src="https://www.gstatic.com/charts/loader.js">      </script>
   <div id="table_div"></div>
  <style>
.google-visualization-table-td {
text-align: center !important;
}




google.charts.load('current', {'packages':['table']});
  google.charts.setOnLoadCallback(drawTable);

    function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', ' ');
    data.addColumn('number', 'Fund1');
    data.addColumn('number', 'Fund2');
    data.addColumn('number', 'Fund3');
    data.addRows([
      ['Sales commission', {v:0, f:'0%'}, {v: 5.75, f: '5.75%'}, {v:6, f:'6%'}],
      ['Service / Trailer Fee', {v:0, f:'0%'}, {v:0,   f: '0%'}, {v:0.5, f:'0.5%'}],
      ['Redemption Fee', {v:0, f:'0%'}, {v: 0, f: '0%'}, {v:8, f:'≤8%'}],
      ['Management Fee', {v:2, f:'2%'}, {v: 2,  f: '2%'}, {v:2.5, f:'2.5%'}],
      ['Minimum Investment', {v:1000, f:'$1,000'}, {v: 2500,  f: '$2,500'}, {v:500, f:'$500'}],
      ['Maturity', {v:1, f:'≤1 year'}, {v: 2,  f: '2 years'}, {v:8, f:'8 years'}]
    ]);


    var table = new google.visualization.Table(document.getElementById('table_div')); 

    table.draw(data, {showRowNumber: false, width: '750%', height: '100%'});

    }

Answer 1

您可以使用单元格对象的 p 属性向 Fund1 列下的每个单元格添加一个类，as described here .然后使用 CSS，您可以为每个单元格添加背景颜色。

google.charts.load('current', {
  'packages': ['table']
});
google.charts.setOnLoadCallback(drawTable);

function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', ' ');
  data.addColumn('number', 'Fund1');
  data.addColumn('number', 'Fund2');
  data.addColumn('number', 'Fund3');
  data.addRows([
    ['Sales commission', {
      v: 0,
      f: '0%',
      p: {
        className: 'fund1Cell'
      }
    }, {
      v: 5.75,
      f: '5.75%'
    }, {
      v: 6,
      f: '6%'
    }],
    ['Service / Trailer Fee', {
      v: 0,
      f: '0%',
      p: {
        className: 'fund1Cell'
      }
    }, {
      v: 0,
      f: '0%'
    }, {
      v: 0.5,
      f: '0.5%'
    }],
    ['Redemption Fee', {
      v: 0,
      f: '0%',
      p: {
        className: 'fund1Cell'
      }
    }, {
      v: 0,
      f: '0%'
    }, {
      v: 8,
      f: '≤8%'
    }],
    ['Management Fee', {
      v: 2,
      f: '2%',
      p: {
        className: 'fund1Cell'
      }
    }, {
      v: 2,
      f: '2%'
    }, {
      v: 2.5,
      f: '2.5%'
    }],
    ['Minimum Investment', {
      v: 1000,
      f: '$1,000',
      p: {
        className: 'fund1Cell'
      }
    }, {
      v: 2500,
      f: '$2,500'
    }, {
      v: 500,
      f: '$500'
    }],
    ['Maturity', {
      v: 1,
      f: '≤1 year',
      p: {
        className: 'fund1Cell'
      }
    }, {
      v: 2,
      f: '2 years'
    }, {
      v: 8,
      f: '8 years'
    }]
  ]);


  var table = new google.visualization.Table(document.getElementById('table_div'));

  table.draw(data, {
    showRowNumber: false,
    width: '750%',
    height: '100%'
  });

}

.google-visualization-table-td {
  text-align: center !important;
}

td.fund1Cell {
  background-color: #ffdd77;
}

tr[class*="-over"] td.fund1Cell {
  background-color: #ffbb55;
}

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