Google Bar Chart將x軸標籤移動到頂部

Question

我正在使用Google Bar Chart，並且我想將x軸標籤移動到頂部。我寫了代碼，但沒有發生。請檢查小提琴和屏幕截圖。 有什麼建議嗎？

感謝，

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

Code Screenshot

Answer 1

。 。 。 。 後

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/

Answer 2

Top-X charts僅適用於材料圖表

材料條形圖
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>