更改特定列标题的颜色 [英] Change color of specific column header

问题描述

我是否可以在具有多列的Google可视化表格中更改仅一列标题的背景颜色。

文档 here 显示了如何通过在 CSS 中将类名设置为样式来更改整个标题行，但除非我错过了某些我没有看到的东西如何定位特定的列标题。

以下是对格式化整个hearder行的建议：

  var cssClassNames = {headerRow：'bigAndBoldClass'，
 hoverTableRow：'highlightClass'}; 
  

解决方案

/ p>

1. 您可以在列标题中提供自己的HTML

p>在'ready'事件触发时手动修改表格

请参阅下面的示例，它既执行...

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]，['食物'，22600]，['艺术'，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']}）;

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'};

解决方案

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>

这篇关于更改特定列标题的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！