在ng2-google-chart中的列之外垂直显示Axes文本

问题描述

我使用的是 ng2-google-charts - 4.0.0 版本。我想在列旁边显示 hAxis 文本。 我尝试使用 slantedText 和 slantedTextAngle 但是，它不支持图表内部。 要是有人能帮忙就好了。

解决方法

获取图表内 x 轴标签的唯一方法是使用以下选项。

theme: 'maximized'

但是，此选项将忽略 slantedText 选项。

另一种隐藏x轴标签的方法，
并使用线型注释。
这将在栏内添加一个旋转的标签。
我们可以使实际的注释线透明。

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

google.charts.load('current',{
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x',{role: 'annotation',type: 'string'},'y'],['Alarms','Alarms',100],['Admin State','Admin State',['Opr. State','Opr. State',100]
  ]);

  var options = {
    annotations: {
      style: 'line',stem: {
        color: 'transparent',length: 0
      }
    },hAxis: {
      textPosition: 'none'
    },isStacked: 'percent',legend: 'none'
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
  chart.draw(data,options);
});

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

注意：没有对齐注释的选项。
如果我们希望标签向右移动，
您可以尝试使用以下选项减小栏的大小。

bar: {
  groupWidth: 20
},

或者我们可以手动移动图表就绪事件上的标签。
请参阅以下工作片段...

google.charts.load('current',bar: {
      groupWidth: 20
    },legend: 'none'
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart'));

  google.visualization.events.addListener(chart,'ready',function () {
    var chartLayout = chart.getChartLayoutInterface();
    var chartBounds = chartLayout.getChartAreaBoundingBox();
    var labels = chart.getContainer().getElementsByTagName('text');

    Array.prototype.forEach.call(labels,function(label) {
      var labelBounds = label.getBBox();
      if (label.getAttribute('text-anchor') === 'middle') {
        label.setAttribute('text-anchor','start');
        label.setAttribute('x',parseFloat(label.getAttribute('x')) - chartBounds.top - labelBounds.height);
        label.setAttribute('y',parseFloat(label.getAttribute('y')) + labelBounds.height);
      }
    });
  });

  chart.draw(data,options);
});

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

注意：这将在angular下工作，只需要添加ready事件，angular方式。