Google表格-如何設置行的透明度？

Question

我想給Google Table Chart設置樣式，但是不能為Table中的行設置不透明度/透明度。

我使用'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 color的最后一個參數更改行的背景不透明度

.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>