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

Question

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).

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

Is it possible to implement? What should I do?

Answer 1

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

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

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

Canis Major Dwarf vs. Canis Maj...

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

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>