javascript – 调整Google桌面图表行高

2019-07-05 22:37:15 阅读：223 来源： 互联网

标签：javascript css charts google-visualization html

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

我用于字体的内容 – CSS：

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

JavaScript的：

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

有没有办法使用CSS或其他方法？

解决方法:

只需为css类添加高度小字体…

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

标签：javascript,css,charts,google-visualization,html
来源： https://codeday.me/bug/20190705/1391488.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 调整Google桌面图表行高