Question

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

文档here显示了如何通过在CSS中将类名设置为样式来更改整个标题行，但除非我遗漏某些内容，否则我不知道如何定位特定的列标题。

以下是格式化整个听众行的建议：

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

Answer 1

以下是您的几个选择......

您可以在标题
'ready'事件触发

参见以下两个例子......

＆＃13;

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

＆＃13;

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

＆＃13;

更改特定列标题的颜色

1 个答案: