Google Table Charts - как установить прозрачность строк?

Question

Google Table Charts - как установить прозрачность строк?

1

Я хочу, чтобы стиль таблицы Google 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>

dzierzak 05 фев. 2018, в 14:09

Источник

Теги:

javascript

css

charts

row

opacity

1 ответ

Ещё вопросы

WhiteHat · Accepted Answer · 2018-02-05T11-12-00.000Z

Таблица графиков 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>

Большое спасибо, это работает. Еще один вопрос - как убрать градиент цвета из строки заголовка?
добавить стиль для ячейки заголовка с -> background-image: none; - изменил ответ выше ...