javascript - 如何更改 Google Charts 中的条形图方向

Question

我需要在一页上绘制两个面对面的条形图。 (左边的图表朝右，右边的图表朝左)。

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

是否可以实现？我应该怎么办？

Answer 1

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

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

然后当图表的 'ready' 事件触发时，
您可以移动图表元素，
比如y轴，以及x轴标签的顺序

首先，你需要在左边留出足够的空间，
用于打印原始 y 轴标签
否则它们将被切断，即

Canis Major Dwarf 与 Canis Maj...

然后需要在右侧留出足够的空间，
通过限制 chartArea，否则会被 chop 并且根本不可见，即

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>