如何更改Google图表中的条形图方向

问题描述：

我需要在一页中绘制两个相互面对的条形图。（左侧的图表右侧，右侧的图表左侧）。如何更改Google图表中的条形图方向

但对于Google Charts，我只能设法让两个图表都正确。

是否可以实现？我该怎么办？使用100％堆积图

@WhiteHat我想过格翻转，但止跌那翻译的文字呢？你能通过操纵数据或图表元素来告诉我更多关于你的意思吗？谢谢！ –

使用100％堆积图表，制作第一个系列或两个透明的左侧 – WhiteHat

@WhiteHat这是一个好主意。 :)但垂直轴将仍然在左侧，而水平轴上的值与条的真实值不符，对吧？ –

答

，就可以得到杆以对准在正确的

然后颜色的第一系列透明，
和操作数据以显示正确的长度

那么当图表的'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>

仍然需要左对齐y轴标签等 - 就像我在原始评论中所说的那样，严格操纵以便正确对齐所有内容... – WhiteHat

如何更改Google图表中的条形图方向

相关推荐