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

这是一个小提琴...... https://jsfiddle.net/skinnyb/33og516L/3/ 提前谢谢！

Answer 1

您必须绘制材料图表（请参阅：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/

hAxis标签位置Google Charts

1 个答案: