Диаграмма Google: увеличение поля между метками оси X и осью X - PullRequest
Новая
       30

Диаграмма Google: увеличение поля между метками оси X и осью X

3 голосов
/ 17 июня 2019

Я использую angular-google-chart (https://github.com/FERNman/angular-google-charts) угловую оболочку для google-chart для отображения столбцовой диаграммы. Я хочу увеличить поле между метками оси x и осью x. На картинке ниже красная часть указывает, где я хочу увеличить разрыв enter image description here

Следуя документации, я добавил этот код: 

options: {
      ...

      hAxis: {
        textStyle: {
          fontSize: 10,
          fontStyle: "Arial",
          marginTop: '10',
          color: '#808080'
        },
   ...

Цвет, размер шрифта и стиль шрифта работает, но не может получить разрыв в запасе. Есть идеи? Заранее спасибо.

1 Ответ

1 голос
/ 17 июня 2019

используйте chartArea.bottom, чтобы увеличить пространство по оси X 

options: {
      ...
      chartArea: {
        bottom: 60
      },

      hAxis: {
        textStyle: {
          fontSize: 10,
          fontStyle: "Arial",
          marginTop: '10',
          color: '#808080'
        },
   ...

РЕДАКТИРОВАТЬ

хотя вы можете использовать bottom для увеличения высоты оси X,
метки по-прежнему совпадают с верхней частью оси X.

но мы можем переместить их вниз вручную, на событие 'ready' графика,
увеличив атрибут 'y',
см. следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages: ['controls', 'corechart']
}).then(function () {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('timeofday', 'Time of Day');
  dataTable.addColumn('number', 'Motivation Level');
  dataTable.addRows([
    [[8, 0, 0], 46],
    [[9, 0, 0], 46],
    [[10, 0, 0], 34],
    [[11, 0, 0], 4],
    [[12, 0, 0], 5],
    [[13, 0, 0], 6],
    [[14, 0, 0], 7],
    [[15, 0, 0], 8],
    [[16, 0, 0], 9],
    [[17, 0, 0], 10],
  ]);

  var options = {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 24,
      left: 60,
      right: 16,
      bottom: 100
    },
    height: '100%',
    width: '100%',

    hAxis: {
      textStyle: {
        fontSize: 10,
        fontStyle: "Arial",
        marginTop: '10',
        color: '#808080'
      }
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);
  google.visualization.events.addListener(chart, 'ready', function () {
    var labels = container.getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label) {
      if (label.getAttribute('text-anchor') === 'middle') {
        label.setAttribute('y', parseFloat(label.getAttribute('y')) + 20);
      }
    });
  });
  chart.draw(dataTable, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

примечание: bottom было добавлено во время выпуска 43 2 октября 2015 года

...