如何更改 Google Charts 中的条形图方向答案

【问题标题】：How to change the bar chart orientation in Google Charts如何更改 Google Charts 中的条形图方向
【发布时间】：2016-09-16 22:13:11
【问题描述】：

我需要在一页中绘制两个彼此面对的条形图。（左边的图表向右，右边的图表向左）。

但是使用 Google Charts，我只能设法让两个图表都正确。

可以实现吗？我该怎么办？

【问题讨论】：

@WhiteHat 我考虑过 div 翻转，但那不会也翻转文本吗？你能告诉我更多关于你操纵数据或图表元素的意思吗？谢谢！
使用 100% 堆叠图表，使左侧的第一个或两个系列透明
@WhiteHat 这是个好主意。 :) 但是垂直轴仍然在左侧，水平轴上的值与条形的真实值不匹配，对吧？

标签： javascript html css google-visualization

【解决方案1】：

使用 100% 堆叠图表，您可以让条形图向右对齐

然后将第一个系列着色为透明，
并操纵数据以显示适当的长度

那么当图表的'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 轴标签等 - 就像我在原始评论中所说，认真操作以使所有内容正确对齐......