Google图表-Y轴刻度

Question

I use Material column charts in my Web App.

and I have following out

and codes are below,

google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
   var data = google.visualization.arrayToDataTable([
              ['Structure', 'Estimated', 'Actual'],
              ['hours', 6, 8],
              ['hours2', 20, 18],                              
            ]);

            var options = {
              chart: {
                title: 'Structures by Hours',
                subtitle: 'Estimated vs Actual',
              }
            };

            var chart = new google.charts.Bar(document.getElementById('columnchart_hours'));

            chart.draw(data, options);

What I want to do two things / need your hand, (on red circled area the image.)

1. to name the Y-Axis as Hours
2. and make the same axis scale 2 hours by 2 hours so that the Y-Axis / Hours Axis become 2, 4, 6, 8, 10 so on.

Thanks in advance,

Answer 1

Need to set configuration options for the vAxis .

    vAxis: {
        title: 'Hours',
        ticks: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
    }

1. Use title for the axis label.
2. Supply an array to ticks for the axis tick marks.

However, it doesn't appear ticks works for Material charts.
Note the options have to be converted as well...
google.charts.Bar.convertOptions

This example shows both a Core chart and a Material chart...

 google.load('visualization', '1', { packages: ['corechart', 'bar'], callback: drawBarChart }); function drawBarChart() { var data = google.visualization.arrayToDataTable([ ['Structure', 'Estimated', 'Actual'], ['hours', 6, 8], ['hours2', 20, 18], ]); var options = { chart: { title: 'Structures by Hours', subtitle: 'Estimated vs Actual', }, vAxis: { title: 'Hours', ticks: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20] } }; var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_hours')); chart.draw(data, options); var chart2 = new google.charts.Bar(document.getElementById('columnchart_hours2')); chart2.draw(data, google.charts.Bar.convertOptions(options)); } 

 <script src="https://www.google.com/jsapi"></script> <div id="columnchart_hours"></div> <div id="columnchart_hours2"></div>