javascript - Google图表-Y轴刻度

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

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


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


提前致谢，

最佳答案

需要为vAxis设置configuration options。

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

将title用作轴标签。
为轴刻度线提供一个数组到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>