Google Chartsで棒グラフの向きを変更するには

Question

2つの棒グラフを1つのページに描画する必要があります。 （左の表は右に、右の表は左に面しています）。

Google Chartsでは、私は両方のチャートが正面に向くように管理しました。

実装することは可能ですか？私は何をすべきか？

Answer 1

100％積み上げグラフを使用して、あなたが最初のシリーズ透明に色を右

に整列するためにバーを取得することができ、
およびときに適切な長さ

を明らかにするためにデータを操作グラフの'ready'イベントが発生は、
あなたは、このようなY軸、X軸の順序と
最初

ラベル、グラフ要素の周りに移動することができますあなたがそうでなければ、彼らはカットオフ、すなわち

Canis Major Dwarf対Canis Maj...

なり、
を印刷するには、元のy軸ラベルの
を左に十分なスペースを確保するために必要なのは、その後に十分な余地を残しておく必要がありますchartAreaを制限することによって、右、
、それ以外の場合はカットオフと単純に見えない、すなわち

Canis Major Dwarf対Canis M

は独自のラベル私はdivのフリッピングが、wouldnについて考えてきました@WhiteHat

これはあなたに微調整するために何かを与える必要があります...

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>