Google條形圖將x軸標簽移至頂部

Question

我正在使用谷歌條形圖，我想將x軸標簽移到頂部。 我已經編寫了代碼，但它沒有發生。 請檢查小提琴和屏幕截圖。 有什么建議？

謝謝，

`https://jsfiddle.net/n5paq0r9/`

代碼截圖

Answer 1

Top-X圖表僅適用於Material Chart

材料條形圖
google.charts.Bar

與核心條形圖
google.visualization.BarChart

請參閱以下工作代碼段...

 google.charts.load('current', {packages: ['bar']}); google.charts.setOnLoadCallback(drawBasic); function drawBasic() { var data = google.visualization.arrayToDataTable([ ['App Name', 'Density', { role: 'style' }, { role: 'annotation' } ], ['My Test App Name Appears Here', 6.94, 'blue', 'My Test App Name Appears Here' ], ['My Test App Name Appears Here', 10.49, 'blue', 'My Test App Name Appears Here' ], ['My Test App Name Appears Here', 19.30, 'blue', 'My Test App Name Appears Here' ], ['My Test App Name Appears Here', 24, 'blue', 'My Test App Name Appears Here' ], ['My Test App Name Appears Here', 5.30, 'blue', 'My Test App Name Appears Here' ], ['My Test App Name Appears Here', 2.30, 'blue', 'My Test App Name Appears Here' ], ['My Test App Name Appears Here', 21.45, 'blue', 'My Test App Name Appears Here' ] ]); var options = { chartArea: {width: '90%'}, height: 500, legend: { position: 'none' }, vAxis:{textStyle:{color: '#005500',fontSize: '12', paddingRight: '100',marginRight: '100'}}, hAxis:{textStyle:{color: '#005500',fontSize: '11', paddingRight: '100',marginRight: '100'}}, bars: 'horizontal', axes: { x: { 0: { side: 'top'} } } }; var chart = new google.charts.Bar(document.getElementById('chart_div')); chart.draw(data, google.charts.Bar.convertOptions(options)); } $(window).resize(function(){ drawBasic(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div> 

Answer 2

。 。 。 。 后

chart.draw(data, options);   

添加此代碼

var height = options.height;
            var array = $("#chart_div svg g").children()[3].children;
            for (var i = 0; i < array.length; i++) {

                $("text").removeClass("currentNode");
                array[i].children[0].setAttribute("class", "currentNode");
                var y = height - parseFloat($(".currentNode").attr("y"));
                $(".currentNode").attr("y", y);
            }

https://jsfiddle.net/n5paq0r9/3/