BarChart vAxis向右转是可能的吗？

Question

我很难把vaxis放在右边。我试过其他的例子，但它们不能和柱状图一起使用。我的例子是这样的，我想把v轴放在右边，可能吗？

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var datatable = new google.visualization.DataTable();
  datatable.addColumn('string', 'Type');
  datatable.addColumn('number', 'Quantity');
  datatable.addRows([
    ['A', 2],
    ['B', 4],
    ['C', 6],
    ['S', 4],
    ['U', 2]
  ]);

  var dataview = new google.visualization.DataView(datatable);
  dataview.setRows([0, 2, 3, 4, 1]);

  var options = {
  	legend: 'none',
    hAxis:{direction: -1}
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  chart.draw(dataview, options);
});

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

Answer 1

在条形图中，没有任何选项可以将Y轴向右移动。

然而，我们可以手动移动标签 (<text> 元素）在图表的 'ready' 事件，通过改变其 'x' 属性

我们可以使用以下图表方法，来计算位置。

getChartLayoutInterface() - 返回一个对象，包含图表及其元素的屏幕位置信息。

getChartAreaBoundingBox() - 返回一个包含图表内容的左、顶、宽、高的对象。

请看下面的工作片段...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var datatable = new google.visualization.DataTable();
  datatable.addColumn('string', 'Type');
  datatable.addColumn('number', 'Quantity');
  datatable.addRows([
    ['A', 2],
    ['B', 4],
    ['C', 6],
    ['S', 4],
    ['U', 2]
  ]);

  var dataview = new google.visualization.DataView(datatable);
  dataview.setRows([0, 2, 3, 4, 1]);

  var options = {
  	legend: 'none',
    hAxis:{direction: -1}
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

  google.visualization.events.addListener(chart, 'ready', function () {
    var chartLayout = chart.getChartLayoutInterface();
    var chartBounds = chartLayout.getChartAreaBoundingBox();
    var labels = chart.getContainer().getElementsByTagName('text');
    var fontSize;
    Array.prototype.forEach.call(labels, function(label) {
      fontSize = parseFloat(label.getAttribute('font-size'));
      if (label.getAttribute('text-anchor') === 'end') {
        label.setAttribute('x', chartBounds.left + chartBounds.width + (fontSize * 2));
      }
    });
  });

  chart.draw(dataview, options);
});

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