Question

我一直在尝试将滴答声/标签添加到以下谷歌图表的垂直轴。我希望左手轴显示0-100％，每20％有一个刻度，但我尝试的没有任何效果。

我已经尝试复制我在google提供的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

确保您有足够的空间来展示ticks

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何在谷歌列图表中添加轴刻度/标签？

1 个答案: