如何在 google 图表中对齐 v 轴标签 w.r.t 图表 window？

Question

我的 google 图表的 y 轴标签相对于垂直条对齐，而我希望它们与图表的边距对齐。我到处看。谁能帮忙。从左到右和从右到左使用图表边距作为参考，而不是图表区域的左边距。

Answer 1

没有标签对齐选项...

但您可以在图表的 'ready' 事件触发时手动移动它们

您可以使用下面的图表方法获取每个标签的边界

getChartLayoutInterface().getBoundingBox(id)

然后将标签的 x 属性设置为与 width
相同的值如果标签需要更多空间，请使用选项 --> chartArea.left

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('number', 'y0');
  data.addRows([
     ['Brain Tree', 200],
     ['One Touch', 220],
     ['PayPal Email', 240],
     ['PayPal Here', 260],
     ['PayPal Invoice', 280],
     ['PayPal Mas', 300]
  ]);

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

  google.visualization.events.addListener(chart, 'click', function (gglClick) {
    console.log(JSON.stringify(gglClick));
  });

  google.visualization.events.addListener(chart, 'ready', function () {
    var chartLayout = chart.getChartLayoutInterface();
    var labelIndex = -1;
    var labelWidth;

    var axisLabels = container.getElementsByTagName('text');
    Array.prototype.forEach.call(axisLabels, function(label) {
      if (label.getAttribute('text-anchor') === 'end') {
        labelIndex++;
        labelWidth = chartLayout.getBoundingBox('vAxis#0#label#' + labelIndex).width;
        label.setAttribute('x', labelWidth);
      }
    });
  });

  chart.draw(data, {
    chartArea: {
      left: 128
    },
    height: 600
  });
});

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

Answer 2

如果你想将 Y-axis 名称与 bar

对齐，只需在选项中提供 is-stacked 作为 true

选项={ isStacked: true}

如何在 google 图表中对齐 v 轴标签 w.r.t 图表 window？

How to align v axis label w.r.t chart window in google charts?

charts

google-visualization

text-alignment

bar-chart