Change color of specific column header

问题:

Am I able to change the background color of only one column header in a google visualization table that has multiple columns.

The documentation here shows how to change the entire header row by setting a class name to style in CSS, but unless I'm missing something I don't see how to target a specific column header.

Here is the suggestion for formatting the entire hearder row:

var cssClassNames = {headerRow: 'bigAndBoldClass',
hoverTableRow: 'highlightClass'};

回答1:

Here are a couple options for you...

1. You can provide your own HTML in the column heading

2. Modify the table manually when the 'ready' event fires

see following example which does both...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', '<div style="background-color: cyan;">Department</div>');
    data.addColumn('number', 'Revenues');
    data.addRows([
      ['Shoes', 10700],
      ['Sports', -15400],
      ['Toys', 12500],
      ['Electronics', -2100],
      ['Food', 22600],
      ['Art', 1100],
      ['Web', 9999]
    ]);

    var container = document.getElementById('table_div');
    var table = new google.visualization.Table(container);
    google.visualization.events.addListener(table, 'ready', function () {
      container.getElementsByTagName('TR')[0].cells[1].style.backgroundColor = 'magenta';
    });

    table.draw(data, {
      allowHtml: true
    });
  },
  packages: ['table']
});

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