Google Charts - Можете ли вы выровнять столбцы в столбце диаграммы к центру диаграммы? - PullRequest
Новая
       7

Google Charts - Можете ли вы выровнять столбцы в столбце диаграммы к центру диаграммы?

0 голосов
/ 07 ноября 2018

Есть ли способ использовать диаграмму столбцов, предоставленную API-интерфейсом javascript диаграмм Google, для центрирования столбцов в центре диаграммы, вместо того, чтобы между каждым столбцом было большое пространство? Я могу сделать это, сгруппировав значения вместе, но потеряю метку под столбцом.

Вот фотография того, что я пытаюсь сделать: Outcome

Вот что у меня есть: 

google.charts.load('current', { packages: ['corechart', 'bar'] })
google.charts.setOnLoadCallback(drawColColors)

function drawColColors() {
  const data = google.visualization.arrayToDataTable([
    ['Number', 'Price'],
    ['1', 1900000],
    ['2', 1800000],
    ['3', 1500000]
  ])

  const options = {
    width: '100%',
    height: 400,
    colors: ['red'],
    vAxis: { minValue: 0, format: '$###,###,###' },
    enableInteractivity: false,
    bar: { groupWidth: 45 },
    legend: { position: 'none' }
  }

  const chart = new google.visualization.ColumnChart(document.getElementById('chart'))

  chart.draw(data, options)
}

Codesandbox: https://codepen.io/anon/pen/GworqG

1 Ответ

0 голосов
/ 07 ноября 2018

bar.groupWidth - это единственная опция конфигурации, которая конкретно касается выравнивания столбцов
(таким образом)

однако вместо числа ... 

bar: {groupWidth: 45},

Вы также можете использовать процент.
Это не обязательно переместит столбцы, но сделает их больше, сближая их. 

bar: {groupWidth: '90%'},

см. Следующий рабочий фрагмент для примера ... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Number', 'Price'],
    ['1', 1900000],
    ['2', 1800000],
    ['3', 1500000]
  ])

  var options = {
    width: '100%',
    height: 400,
    colors: ['red'],
    vAxis: {minValue: 0, format: '$###,###,###'},
    enableInteractivity: false,
    bar: {groupWidth: '90%'},
    legend: { position: 'none' }
  }

  var chart = new google.visualization.ColumnChart(document.getElementById('chart'))
  chart.draw(data, options)
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

другим вариантом будет использование фактических чисел (1), а не строк ('1'), по оси X.
это позволяет использовать дополнительные параметры конфигурации, которые можно использовать для перемещения столбцов ближе к центру.

Например,

, установка viewWindow позволит вам добавить пространство между видимыми столбцами и краями. 

hAxis: {
  viewWindow: {
    min: -2,
    max: 6
  }
}

по умолчанию, непрерывная ось (числа) будет отображать линии сетки,
тогда как дискретная ось (строки) не будет.
они могут быть удалены или скрыты с помощью следующих параметров. 

  baselineColor: 'transparent',
  gridlines: {
    color: 'transparent'
  },

см. Следующий рабочий фрагмент для другого примера ... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Number', 'Price'],
    [1, 1900000],
    [2, 1800000],
    [3, 1500000]
  ])

  var options = {
    width: '100%',
    height: 400,
    colors: ['red'],
    vAxis: {minValue: 0, format: '$###,###,###'},
    enableInteractivity: false,
    legend: {position: 'none'},
    hAxis: {
      baselineColor: 'transparent',
      gridlines: {
        color: 'transparent'
      },
      ticks: data.getDistinctValues(0),
      viewWindow: {
        min: -2,
        max: 6
      }
    }
  }

  var chart = new google.visualization.ColumnChart(document.getElementById('chart'))
  chart.draw(data, options)
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
...