如何更改谷歌柱形图的x轴范围？

Question

我正在使用google柱形图创建如下所示的柱形图：

const chart = new google.visualization.ColumnChart(chartDiv); // Extract the data from which to populate the chart.

        chart.draw(data, {
          height: 300,
          legend: "none",
          // @ts-ignore TODO(jpoehnelt) check versions
            titleY: "Elevation (Meters)",
            titleX: "Distance (Miles)"

        });

其中一个问题是 xaxis 中的值。我怎样才能只显示 5 个值，例如。 1、2、3、4、5？以红色标记的 xaxes 值被密集填充。如何分成5个部分？感谢您的帮助！

Answer 1

请参阅config options 以获取 --> hAxis

有许多选项可以控制轴上的标签。

将轴分成段，
使用gridlines.count 选项。

这允许您指定将显示多少条网格线，
以及标签的数量。

hAxis: {
  gridlines: {
    count: 5
  }
},

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'y');

  var y = 1380;
  for (var i = 0; i <= 500; i++) {
    data.addRow([i, (i % 2 === 0) ? y + i : y - i]);
  }

  var options = {
    chartArea: {
      left: 64,
      top: 48,
      right: 32,
      bottom: 64,
      height: '100%',
      width: '100%'
    },
    hAxis: {
      gridlines: {
        count: 5
      },
      slantedText: true,
      slantedTextAngle: 45
    },
    height: '100%',
    legend: {
      alignment: 'start',
      position: 'top'
    },
    width: '100%'
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
  chart.draw(data, options);
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

#chart {
  height: 100%;
}

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