如何在不改变自己的样式的情况下向 google.visualization.DataTable 添加单独的样式

Question

正如标题中提到的，我的问题是如何在不改变自己的样式的情况下向 google.visualization.DataTable 添加单独的样式？

我添加了一个单独的 css 类来使表头具有粘性并为表头添加背景颜色。在我添加 css "cssClassNames" 类后，表格自己的样式已经消失：默认行背景颜色和鼠标悬停时表格行突出显示。

这是我的代码：

var data=new google.visualization.DataTable();

    data.addColumn('string','Name');
    data.addColumn('string','Type');
    data.addColumn('number','meter');
    data.addColumn('string','Event');
    data.addColumn('string','Status');

    data.addRows(Data.length);
    for(i=0;i<Data.length;i++){

        data.setCell(parseInt([i]),0,Data[i]['ID']);
        data.setCell(parseInt([i]),1,Data[i]['Name']);
        data.setCell(parseInt([i]),2,parseInt(Data[i]['Total']));
        data.setCell(parseInt([i]),3,'change');
        data.setCell(parseInt([i]),4,'OK');
        }

    var cssClassNames = {tableRow :"tableRowGoogle",headerCell :"headercellgoogle",rowNumberCell : "rowNumberCell",tableCell  : "rowcellgoogle"};   

    var options=null;
    if(data.getNumberOfRows()>7){
        options = {
                  width : '100%',
                  height:550,
            sort : 'enable',
            sortColumn : 1,
            sortAscending : false,
            scrollLeftStartPosition : 50,
            showRowNumber : true,
            allowHtml :true,
            cssClassNames : cssClassNames   
        };
    }else{
        options = {
            width : '100%',
            sort : 'enable',
            sortColumn : 1,
            sortAscending : false,
            scrollLeftStartPosition : 50,
            showRowNumber : true,
            allowHtml :true,
            cssClassNames : cssClassNames   
        };
    }
    var table = new google.visualization.Table(document.getElementById('SummaryTable'));
    table.draw(data, options);

     google.visualization.events.addListener(table, 'select', function() {
            var row = table.getSelection()[0].row;
            popDevInfo(data.getValue(row, 0));
          });

如何在不影响其默认样式的情况下向表格添加其他样式？ 任何建议将不胜感激。

Answer 1

不要在选项中提供cssClassNames，
只需在页面上的某个位置添加

表格图表生成普通的 html 表格元素，
因此您可以将它们设置为任何其他 html 表格的样式

在本例中，绘制了两个表格。
使用下面的css，两个图表都会有一个绿色边框

table {
  border: 2px solid lime;
}

下面的css只会影响第二张图表——chart_div_1

#chart_div_1 th {
  color: magenta;
  text-align: left;
}

#chart_div_1 tr {
  outline: thin solid cyan;
}

所以只需找到满足您需求的选择器...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      1170],
      ['2006',  660,       1120],
      ['2007',  1030,      540],
      ['2008',  660,       660],
      ['2009',  1030,      540]
    ]);

    var options = {
      allowHtml: true,
      showRowNumber: true,
      sortAscending: false,
      sortColumn: 0,
      width: '100%'
    };

    new google.visualization.Table(document.getElementById('chart_div_0')).draw(data, options);
    new google.visualization.Table(document.getElementById('chart_div_1')).draw(data, options);
  },
  packages:['table']
});

/* style all tables */
table {
  border: 2px solid lime;
}

/* style chart_div_1 only */
#chart_div_1 th {
  color: magenta;
  text-align: left;
}
#chart_div_1 tr {
  outline: thin solid cyan;
}

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