angular - 除了 ng2-google-chart 中的列之外，垂直显示 Axes 文本

Question

我正在使用 ng2-google-charts - 4.0.0 版本。我想在列旁边显示 hAxis 文本。我尝试使用 slantedText 和 slantedTextAngle，但它不支持图表内部。如果有人可以提供帮助，那就太好了。

Answer 1

在图表中获取 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', 100],
    ['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', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', {role: 'annotation', type: 'string'}, 'y'],
    ['Alarms', 'Alarms', 100],
    ['Admin State', 'Admin State', 100],
    ['Opr. State', 'Opr. State', 100]
  ]);

  var options = {
    annotations: {
      style: 'line',
      stem: {
        color: 'transparent',
        length: 0
      }
    },
    bar: {
      groupWidth: 20
    },
    hAxis: {
      textPosition: 'none'
    },
    isStacked: 'percent',
    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>

注意：这将在角度工作，只需要添加就绪事件，角度方式。