Question

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

但是使用谷歌图表，我只是设法让两个图表都正确。

是否可以实施？我该怎么办？

Answer 1

使用100％堆积图表，您可以使条形图与右侧对齐

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

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

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

Canis Major Dwarf与Canis Maj...

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

Canis Major Dwarf与Canis M

可能更容易，提供您自己的标签

这应该会给你一些调整......

＆＃13;

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);
};

＆＃13;

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

＆＃13;

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

1 个答案: