charts - How to remove y-axis values from google chart

Question

I am using google charts.

In the attached image I do not want the 100, 50, 0, -50, -100 numbers to show. But I do want the Satisfaction label to show. Does anyone know how this can be achieved in google charts? Is there and option on vAxis?

Another (less important) issue is that I only want the grid lines at 100, 0 and -100. I do not want the other 6.

I currently have the following options set...

var options = {
    chartArea: { width: '80%' },
    colors: ['#00ff00', '#ff0000'],
    vAxis: {
        title: 'Satisfaction',
        maxValue: 100,
        minValue: -100,
        gridlines: { count: 2 }
    },
    legend: { position: 'bottom' }
};

Thanks.

标签： chartsgoogle-visualization

Answer 1

使用以下 vAxis 选项...

textPosition: 'none'

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1', 'y2'],
    [0, 10, 12, 18],
    [2, 16, 18, 19],
    [4, 18, 19, 24],
    [6, 26, 28, 22],
    [8, 13, 15, 21],
    [10, 32, 31, 33]
  ]);

  var options = {
    chartArea: { width: '80%' },
    colors: ['#00ff00', '#ff0000'],
    vAxis: {
      textPosition: 'none',
      title: 'Satisfaction',
      maxValue: 100,
      minValue: -100,
      gridlines: { count: 2 }
    },
    legend: { position: 'bottom' }
  };

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

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