javascript - Google Table Charts - 如何设置行的透明度？

Question

我想要设置 Google 表格图表的样式，但无法为表格中的行设置不透明度/透明度。

我使用 'cssClassNames': cssClassNames 但不透明度仅适用于行中的文本，不适用于行中的背景。

如何更改它？

CSS:

.row-style {
    background-color: rgba(255,255,255,0.5);
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #FFFFFF;
    border-bottom-color: #BFD6E8;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    margin-bottom: .5%;
    opacity: 0.3;
}

JS:

 <script type="text/javascript">
  function drawTable(results, question_title) {

    var cssClassNames = {
    'headerRow': 'header-row-style',
    'tableRow': 'row-style',
    'oddTableRow': 'odd-row-style',

    };

    var options = {'showRowNumber': true, 'allowHtml': true, 'cssClassNames': cssClassNames,
        showRowNumber: false, allowHtml: true, alternatingRowStyle:true, width: '95%', height: '70%',
        backgroundColor: "transparent"};

    var data = new google.visualization.DataTable(results, question_title);
    data.addColumn('string', question_title);
    data.addRows(results);


    var table = new google.visualization.Table(document.getElementById('chart'));

    table.draw(data, options, {backgroundColor: "transparent"});

  }
</script>

Answer 1

Google 的表格图表默认将背景颜色设置为白色
用CSS覆盖

.container table {
  background-color: transparent;
}

然后使用rgba颜色的最后一个参数来更改行的背景不透明度

.row-style {
  background-color: rgba(255,255,255,0.5);  /* <-- 0.5 will be opacity for background */
  ...

请参阅以下工作片段...

google.charts.load('current', {
  packages:['table']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'From');
  data.addColumn('string', 'To');
  data.addColumn('number', 'Weight');
  data.addRows([
    ['A', 'B', 40],
    ['A', 'C', 15],
    ['C', 'H', 8],
    ['C', 'E', 5],
    ['C', 'D', 2],
    ['C', 'G', 2],
    ['C', 'F', 1],
    ['H', 'I', 2],
    ['J', 'M', 10],
    ['J', 'K', 4],
    ['J', 'L', 1],
    ['M', 'P', 4],
    ['M', 'N', 3],
    ['M', 'O', 1],
    ['P', 'Q', 1]
  ]);

  var cssClassNames = {
    headerRow: 'header-row-style',
    tableRow: 'row-style',
    oddTableRow: 'odd-row-style',
    headerCell: 'header-cell-style'
  };

  var options = {
    showRowNumber: true,
    allowHtml: true,
    cssClassNames: cssClassNames
  };

  var table = new google.visualization.Table(document.getElementById('chart'));
  table.draw(data, options);
});

.container {
  background-color: rgba(255,0,0,1);
  padding: 8px;
}

.container table {
  background-color: transparent;
}

.header-row-style {
  background-color: rgba(0,255,0,1);
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #FFFFFF;
  border-bottom-color: #BFD6E8;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  margin-bottom: .5%;
}

.row-style {
  background-color: rgba(255,255,255,0.5);
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #FFFFFF;
  border-bottom-color: #BFD6E8;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  margin-bottom: .5%;
}

.odd-row-style {
  background-color: rgba(255,255,255,0.75);
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #FFFFFF;
  border-bottom-color: #BFD6E8;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  margin-bottom: .5%;
}

.header-cell-style {
  background-image: none;
}

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