Google图表-Y轴刻度

Question

我在Web应用程序中使用“ 材料”柱形图 。

我已经跟进了

和代码在下面，

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

我想做两件事/需要您的帮助 （在红色圆圈处的图像）。

1. 将Y轴命名为小时
2. 并以2个小时乘2个小时来设置相同的轴刻度，以使Y轴/小时轴变为2、4、6、8、10等。

提前致谢，

Answer 1

需要为vAxis设置配置选项 。

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

1. 使用title作为轴标签。
2. 提供一个数组来ticks的轴的刻度线。

但是，对于材料图，似乎没有ticks 。
请注意，选项也必须转换。
google.charts.Bar.convertOptions

该示例同时显示了核心图和材料图...

 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>