反转谷歌图表中的条形图

问题描述

我正在尝试使用谷歌图表创建条形图，但我需要反转条形的方向。我已经通过设置 hAxis: { direction: -1,} 但问题是只有条的方向颠倒了，y 轴标签没有相应地放置，如图所示。

如何将 y 轴标签的位置更改为位于 y 轴的右侧？ 我的代码：

function drawBasic() {

      var data = google.visualization.arrayToDataTable([
      ['Locations','Product count',{role:'annotation'}],['Bengaluru',277,'277'],['Hyderabad',182,'182'],['Chennai',139,'139'],['Kolkata',136,'136'],['Jaipur',78,'78 ']
    ]);

    var options = {
      legend: 'none',chartArea: {width: '50%'},colors: ['#3cb371'],hAxis: {
        direction: -1,gridlines: { color: 'transparent' },minValue: 0,textPosition: 'none'
      },};
      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
      chart.draw(data,options);
    }

解决方法

我真的认为不可能得到与您在问题中显示的结果相同的结果，但是，它可能是另一种选择：

• 使用不间断空格 --> \u00A0 在条形图中显示的值和轴的起点之间添加空格。 Source

如果您遵循我上面提到的提示，您应该更改图表的设置，如本 working jsfiddle 中所示。

代码如下：

/*
    Source: https://stackoverflow.com/a/54833123/12511801
*/

google.charts.load("current",{
  packages: ["corechart"]
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Locations','Product count',{
      role: 'style'
    },{
      role: 'annotation'
    }],['Bengaluru',277,'color: #3cb371;','277\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Bengaluru'],['Hyderabad',182,'182\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Hyderabad'],['Chennai',139,'139\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Chennai'],['Kolkata',136,'136\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Kolkata'],['Jaipur',78,'78\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Jaipur']
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0,1,{
      calc: "stringify",sourceColumn: 1,type: "string",role: "annotation"
    },2
  ]);

  var options = {
    title: "",// Title of the chart.
    //width: 600,//height: 400,legend: {
      position: 'none'
    },hAxis: {
      title: '',// Title below the x-axis
      titleTextStyle: {
        color: 'black'
      },direction: -1,gridlines: {
        color: 'transparent',count: 0
      },textPosition: 'none'
    },vAxis: {
      title: '',// No title.
      titleTextStyle: {
        color: 'black'
      },minValue: 0,textPosition: 'none',// Option: set the text at the end of the bar.
      allowHtml: true
    }
  };
  var chart = new google.visualization.BarChart(document.getElementById("chart_div"));
  chart.draw(data,options);

  //chart.draw(view,options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 300px;"></div>

---

如果之前的修改不能满足您的要求，您必须更改绘制数据的方式（通过使用其他图表 API 或修改您当前的代码并在单独的 div 中绘制文本并以某种方式将此图表结果与您的文本对齐）。