Question

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

Answer 1

没有标签对齐选项...

但是当图表的'ready'事件触发

时，您可以手动移动它们

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

getChartLayoutInterface().getBoundingBox(id)

然后将标签的x属性设置为与width
相同的值如果标签需要更多空间，请使用选项 - ＆gt; 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轴名称与bar对齐，只需在选项中提供is-stacked即可。

options = {isStacked：true}

如何在谷歌图表中对齐v轴标签w.r.t图表窗口？

2 个答案: