Question

在google table图表中，我想将图表列标题和值对齐到同一侧，都在右/中/左。是否有任何方法可以仅使用图表选项来完成此任务。请帮助

Answer 1

您可以使用配置选项-> cssClassNames

为-> headerCell

定义一个类

cssClassNames: {
  headerCell: 'customHeader'
}

然后将css添加到页面以对齐单元格...

.customHeader {
  text-align: center;
}

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

google.charts.load('current', {
  packages: ['table']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time Employee');
  data.addRows([
    ['Mike',  {v: 10000, f: '$10,000'}, true],
    ['Jim',   {v:8000,   f: '$8,000'},  false],
    ['Alice', {v: 12500, f: '$12,500'}, true],
    ['Bob',   {v: 7000,  f: '$7,000'},  true]
  ]);

  var table = new google.visualization.Table(document.getElementById('chart_div'));
  table.draw(data, {
    cssClassNames: {
      headerCell: 'customHeader'
    }
  })
});

.customHeader {
  text-align: center;
}

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

使用图表选项将Google表格图表列标题和值对齐到同一侧

1 个答案: