javascript - hAxis 标签位置 Google Charts

Question

我试图将我的标签(0、20、40、60、80、100)放在图表的顶部，而不是底部。我看到hAxis.textPosition只支持in、out和none。知道如何将这些标签放在顶部而不是底部吗？

    var options = {
    title: 'You\'re school needs a minimum of 80% enrollment for you\'re free beer money',
        chartArea: {width: '50%'},
    hAxis: {
        title: 'Percentage of students enrolled',
        minValue: 100,
        gridlines: {
            count: 6
        }
    },
    legend: { position: 'right', maxLines: 1 },
    vAxis: {
        title: 'college location'
    },
    isStacked: true,
    height: 300
};

这是一个 fiddle ... https://jsfiddle.net/skinnyb/33og516L/3/提前致谢!

Answer 1

你必须画一张 Material 图(见:Top X-Charts)

google.load('visualization', '1', {packages: ['bar']});
        google.setOnLoadCallback(drawStuff);

        function drawStuff() {
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Country');
          data.addColumn('number', 'At least 80% needed for Beer money!');
          data.addColumn({type: 'string', role: 'tooltip'});
          data.addColumn('number','You earned your Beer money!');
          data.addColumn({type: 'string', role: 'tooltip'});
          data.addRows([
            ['US', 80,'You hit 80% Enrollment!',10,'90% Total Enrollment'],
            ['China', 80,'You hit 80% Enrollment!',10,'90% Total Enrollment'],
            ['Japan', 80,'You hit 80% Enrollment!',5,'85% Total Enrollment'],
            ['Germany', 70,'70% Enrolled',0,''],
            ['France', 60,'60% Enrolled',0,'']
          ]);

    var options = {
        isStacked:true,
        title: 'You\'re school needs a minimum of 80% enrollment for you\'re free beer money',

         bars: 'horizontal',
        legend: { position: 'right', maxLines: 1 },
        hAxis: {
            title: 'Percentage of students enrolled'},
        axes: {
            x: {
              0: { side: 'top'}
            }
          },
        height: 300
    };

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

    chart.draw(data, google.charts.Bar.convertOptions(options));
}

https://jsfiddle.net/4v91rh6r/