如何在不更改自己的样式的情况下向Google.visualization.datait添加单独的样式

Question

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

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

这是我的代码：

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>