Question

有没有一种方法可以使用Google图表javascript API提供的柱状图来将各列居中于图表中间，而不是在各列之间留出大量空间？我可以通过将值分组在一起来完成此操作，但是我会丢失列下的标签。

这是我要完成的任务的图片：

这是我到目前为止所拥有的：

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)
}

代码和框：https://codepen.io/anon/pen/GworqG

Answer 1

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>

另一种选择是在x轴上使用实际数字（1），而不是字符串（'1'）。
这将启用其他配置选项，您可以使用这些选项将列推到更靠近中心的位置。

例如，设置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>

Google图表-您可以将柱形图中的列与图表的中心对齐吗？

1 个答案: