javascript - 显示文本每个 : 1 not working on Google chart for Google Maps

Question

我需要显示所有 hAxis 标签。完整的代码有4000多行代码，所以我将粘贴我认为是代码中唯一重要的部分:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Sample');
data.addColumn('number', 'Elevation');
for (var i = 0; i < results.length; i++) {
  if(i%10==0)
  {
      data.addRow(['' + i / 10 + '', elevations[i].elevation]);
  }
  else
  {
      data.addRow([null, elevations[i].elevation]);
  }
}
document.getElementById('chart_div').style.display = 'block';
chart.draw(data, {
  height: 250,
  colors: ['#F00'],
  legend: 'none',
  titleY: 'Elevation (m)',
  titleX: 'Distance',
  hAxis: {
      slantedTextAngle: 90,
      showTextEvery: 1,
  }
});

这是当前结果:

我需要 hAxis 的距离以正确的字体大小和 Angular 显示 0 1 2 3 4 5 6 7...。

注意:除了 10 的倍数之外，我在所有地方都打印空标题名称，因此如果有一种方法不将该标题添加到该列，也可以!

Answer 1

基本上，您所要做的就是将 hAxis.showTextEvery 设置为 10

要从工具提示中省略第一列的值，请使用工具提示列。

当您设置 hAxis.slantedTextAngle 选项时，还将 hAxis.slantedText 选项设置为 true

google.load('visualization', '1', {
  packages: ['corechart']
});
google.setOnLoadCallback(drawBasic);

function drawBasic() {
  //some dummy-data
  var elevations = [];
  for (var i = 0; i < 300; ++i) {
    elevations.push({
      elevation: 100 * Math.random()
    })
  }
  var results = elevations;
  //dummy-data end
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Sample');
  data.addColumn('number', 'Elevation');
  data.addColumn({
    type: 'string',
    role: 'tooltip'
  });
  for (var i = 0; i < results.length; i++) {
    data.addRow([String(i / 10),
      elevations[i].elevation,
      String(elevations[i].elevation)
    ]);
  }
  document.getElementById('chart_div').style.display = 'block';
  var chart = new google.visualization.ColumnChart(
    document.getElementById('chart_div'));
  chart.draw(data, {

    colors: ['#F00'],
    legend: 'none',
    height: 250,
    titleY: 'Elevation (m)',
    titleX: 'Distance',
    hAxis: {
      slantedTextAngle: 90,
      slantedText: true,
      showTextEvery: 10,
    }
  });
}
 

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>