我需要显示所有的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,
  }
});


这是当前结果:
javascript - showTextEvery:1在Google Maps的Google图表上不起作用-LMLPHP

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

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

最佳答案

基本上,您要做的就是将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>

10-06 00:20