javascript - 如何在谷歌柱形图中添加轴刻度/标签？

Question

我一直在尝试向以下谷歌图表的垂直轴添加刻度/标签。我希望左手轴显示 0-100%，每 20% 刻度一次，但我尝试过的任何方法都不起作用。

我尝试复制在谷歌提供的 jsfiddles 中看到的相同方法，但我永远无法将行为转换为我自己的图表。

这是我的图表的代码，没有标签:

// Load the Visualization API and the corechart package.
google.charts.load('current', {
  'packages': ['bar']
});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.arrayToDataTable([
    ['Problems', 'One', 'Another', 'Yet another'],
    ['Easier problems', 79, 45, 25],
    ['Harder problems', 64, 20, 9],
  ]);

  var options = {
    chart: {
      title: 'Navy Troubleshooting Competition',
      subtitle: '% solved',
      'backgroundColor': {
        fill: 'transparent'
      },
    }
  };

  var chart = new google.charts.Bar(document.getElementById('dual_y_div'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
}

Here it is in jsfiddle form.

我尝试过的所有方法都提供了完全零可见效果，因此我放弃了失败的尝试；如果我的观点不够完整，我深表歉意。

任何帮助将非常感激。感谢您抽出时间。

Answer 1

确保有足够的空间来显示刻度线

添加height: 400后，下面示例中的ticks出现了...

// Load the Visualization API and the corechart package.
google.charts.load('current', {
  'packages': ['bar']
});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
  var data = new google.visualization.arrayToDataTable([
    ['Problems', 'One', 'Another', 'Yet another'],
    ['Easier problems', .79, .45, .25],
    ['Harder problems', .64, .20, .9],
  ]);

  var options = {
    chart: {
      title: 'Navy Troubleshooting Competition',
      subtitle: '% solved',
      'backgroundColor': {
        fill: 'transparent'
      },
    },
    height: 400,
    legend: {
    	position: 'none'
    },
    vAxis: {
      format: '#,##0.0 %',
      ticks: [0, .2, .4, .6, .8, 1]
    }
  };

  var chart = new google.charts.Bar(document.getElementById('dual_y_div'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
}

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