Get rid of color gradient for column headers in Google Visualization table

问题

When I modify the column header colors using the event listener method shown here, I get a default gradient. The snippet example linked also is also showing the default gradient in the second column. How would I go about getting rid of the gradient when the color is generated by the event listener?

回答1:

you could use background instead of backgroundColor.

see following example...

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],
      ['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.background = 'magenta';
    });

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

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

回答2:

@WhiteHat or you can disable the stupid background-image

.google-visualization-table .gradient {
    background-image: none;
}

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],
      ['Web', 9999]
    ]);

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

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

.google-visualization-table .gradient {
    background-image: none !important;
    background-color: "#eee";
}

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

来源：https://stackoverflow.com/questions/38158520/get-rid-of-color-gradient-for-column-headers-in-google-visualization-table

标签

css

google-apps-script

google-visualization