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

Question

如标题中所述，我的问题是如何在不更改其自身样式的情况下向 google.visualization.DataTable 添加单独的样式？

我添加了一个单独的 css class 使 table header 具有粘性并为 table header 添加了背景颜色.在我添加 css "cssClassNames" class 之后，table 自己的样式已经消失，例如：鼠标悬停时默认行背景颜色和 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));
          });

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

Answer 1

不要在选项中提供 cssClassNames，
只需在页面的某处添加

Table 图表生成正常的 html table 元素，
所以你可以像其他任何样式一样设置它们 html table

在此示例中，绘制了两个 table。
使用以下 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>

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

How to add separate style to google.visualization.DataTable without changing its own styles

html

javascript

css

google-visualization

graph-visualization