调整Google桌面图表行高

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>

Answer 2

上述细节不清楚问题。 但是，请尝试以下：

1. 删除'td'或'tr'的高度（如果使用的话）
2. 删除cell-padding（如果有）
3. 使用border-collapse：collapse;对于表