如何更改Google圖表中的條形圖方向

Question

我需要在一頁中繪製兩個相互面對的條形圖。 （左側的圖表右側，右側的圖表左側）。

但對於Google Charts，我只能設法讓兩個圖表都正確。

是否可以實現？我該怎麼辦？使用100％堆積圖

Answer 1

，就可以得到杆以對準在正確的

然後顏色的第一系列透明，
和操作數據以顯示正確的長度

那麼當圖表的'ready'事件觸發，
可以圍繞圖表元素移動，
如y軸，並且x軸的順序標籤

第一，你需要允許足夠的空間在左側，
原始y軸的標籤打印
否則會截止，即

Canis Major Dwarf與Canis Maj...

則需要留在足夠的空間右，
通過限制chartArea，否則截止，只是不可見的，即

Canis Major Dwarf與Canis M

可能更容易，提供自己的標籤

這應該給你的東西來調整上...

google.charts.load('current', {'packages':['corechart']}); 
 
google.charts.setOnLoadCallback(drawStuff); 
 

 
function drawStuff() { 
 
    var data = new google.visualization.arrayToDataTable([ 
 
    ['Galaxy', 'Distance', 'Brightness'], 
 
    ['Canis Major Dwarf', 10, 20], 
 
    ['Sagittarius Dwarf', 20, 40], 
 
    ['Ursa Major II Dwarf', 40, 50], 
 
    ['Lg. Magellanic Cloud', 60, 80], 
 
    ['Bootes I', 80, 120] 
 
    ]); 
 

 
    var options = { 
 
    isStacked: 'percent', 
 
    colors: ['transparent', 'magenta'], 
 
    legend: { 
 
     position: 'bottom' 
 
    }, 
 
    chartArea: { 
 
     left: 200, 
 
     width: 400 
 
    }, 
 
    width: 800 
 
    }; 
 

 
    var container = document.getElementById('dual_x_div'); 
 
    var chart = new google.visualization.BarChart(container); 
 

 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
    var labels = container.getElementsByTagName('text'); 
 
    var hAxisLabels = []; 
 
    Array.prototype.forEach.call(labels, function (text, index) { 
 
     switch (text.getAttribute('text-anchor')) { 
 
     // move y axis labels 
 
     case 'end': 
 
      text.setAttribute('x', parseFloat(text.getAttribute('x')) + 540); 
 
      break; 
 

 
     // save x axis labels 
 
     case 'middle': 
 
      // save x position here 
 
      // otherwise, x position will change 
 
      // before you know where the next should have been 
 
      hAxisLabels.push({ 
 
      text: text, 
 
      x: parseFloat(text.getAttribute('x')) 
 
      }); 
 
      break; 
 
     } 
 
    }); 
 
    
 
    // swap label positions 
 
    hAxisLabels.forEach(function (label, index) { 
 
     label.text.setAttribute('x', hAxisLabels[hAxisLabels.length - index - 1].x);  
 
    }); 
 
    }); 
 

 
    chart.draw(data, options); 
 
};

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="dual_x_div"></div>