2

我正在尝试使用谷歌图表创建条形图，但我需要反转条形的方向。我已经通过设置实现了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);
    }
4

1 回答 1

0

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

  • 使用不间断空格 -->\u00A0在栏中显示的值和轴的开始之间添加空格。资源

如果您遵循我上面提到的提示，您应该更改图表的设置，如此工作 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, 'color: #3cb371;', '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, 'color: #3cb371;', '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, 'color: #3cb371;', '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, 'color: #3cb371;', '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'
      },
      gridlines: {
        color: 'transparent',
        count: 0
      },
      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 中，并以某种方式将此图表结果与您的文字）。

于 2021-05-03T19:43:23.797 回答