如何在Google图表中更改条形图的方向 [英] How to change the bar chart orientation in Google Charts

问题描述

我需要在一页中绘制两个彼此相对的条形图.(左图为右图，右图为左图).

I need to draw two bar charts facing each other in one page. (The chart on the left faces right, and the one on the right faces left).

但是使用Google Charts，我只能使两个图表正确显示.

But with Google Charts, I only managed to make both charts face right.

是否可以实施?我应该怎么办?

Is it possible to implement? What should I do?

推荐答案

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

using a 100% stacked chart, you can get the bars to align to the right

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

then color the first series transparent,
and manipulate the data to reveal the proper length

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

then when the chart's 'ready' event fires,
you can move around the chart elements,
such as the y-axis, and the order of the x-axis labels

首先，您需要在左侧留出足够的空间，
原始的y轴标签要打印
否则它们会被截断，即

first, you need to allow enough room on the left,
for the original y-axis labels to print
otherwise they will be cutoff, i.e.

Canis Major Dwarf vs. Canis Maj ...

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

then need to leave enough room on the right,
by limiting the chartArea, otherwise cutoff and simply not visible, i.e.

Canis Major Dwarf vs. Canis M

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

might be easier, providing your own labels

这应该给您一些调整...

this should give you something to tweak on...

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>

这篇关于如何在Google图表中更改条形图的方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！