javascript - 调整谷歌表格图表行高

Question

我有一个带有表格图表(如 https://developers.google.com/chart/interactive/docs/gallery/table )的谷歌可视化仪表板，显示如下所示的一些数据。我设法使用 CSS 类名称更改了表格的字体大小，但行高仍然是默认大小 - 我想更改它并使其变小。

我使用的字体 - CSS:

    .small-font {
    font-size: 10px;
    }

JavaScript:

    var cssClassNames = {
    tableCell: 'small-font'
    };

有没有办法使用 CSS 或其他方法来做到这一点？

Answer 1

只需将 height 添加到 css 类 small-font...

.small-font {
  font-size: 8px;
  height: 10px;
}

一定要包括这个图表选项...

allowHtml: true

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

google.charts.load('current', {
  callback: drawChart,
  packages:['table']
});

function drawChart() {
  var data = new google.visualization.arrayToDataTable([
    ['Year', 'Value'],
    ['2010', 10],
    ['2020', 14],
    ['2030', 16],
    ['2040', 22],
    ['2050', 28]
  ]);

  var options = {
    allowHtml: true,
    cssClassNames: {
      tableCell: 'small-font'
    }
  };

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

.small-font {
  font-size: 8px;
  height: 10px;
}

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