Выровняйте заголовок столбца диаграммы Google, значения в одну сторону, используя параметры диаграммы.

Question

В диаграмме таблицы Google я хотел бы выровнять заголовок и значения столбца диаграммы с одной и той же стороны, как справа, так и в центре. Есть ли выход для достижения этого, используя только параметры графика. Пожалуйста, помогите

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>