Google Charts反转水平条形图方向后如何将Y轴标签移至右侧

目前已通过hAxis.direction = -1实现条形从右向左延伸的效果，仅Y轴分类标签位置未同步匹配，可通过垂直轴的专属位置配置完成修正：

核心调整点 #

• 在配置项中新增vAxis（即承载城市名称的Y分类轴）的位置参数：
  • 配置side: 'right'：将垂直坐标轴整体从默认左侧切换至绘图区右侧显示
  • 配置textPosition: 'out'：保证Y轴标签显示在坐标轴外侧，不会侵入绘图区域遮挡条形
• 同步调整绘图区边距：原配置的chartArea.width: '50%'在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',
    // 预留右侧空间放置Y轴标签，避免文本截断
    chartArea: {width: '60%', right: 120},
    colors: ['#3cb371'],
    hAxis: {
      direction: -1,
      gridlines: { color: 'transparent' },
      minValue: 0,
      textPosition: 'none'
    },
    // 新增Y轴配置，将轴及标签整体移至右侧
    vAxis: {
      side: 'right',
      textPosition: 'out'
    }
  };
  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

效果说明 #

配置完成后，条形会保持从右向左延伸的原有方向，所有城市类别的Y轴标签会整体移动到绘图区右侧，与条形的延伸方向形成视觉对齐，不会出现标签和条形错位的问题。如果需要自定义标签样式，还可以在vAxis配置下补充textStyle参数调整字体、颜色、大小等属性。 #

内容的提问来源于stack exchange，提问作者Vishal Punj