Google图表中堆叠（正/负）条形图中的第二个Y轴

Question

我已经构建了一个堆积条形图来说明正负值，如下所示：

因为这些值表示存在，所以我想在右Y轴上添加其他标签。这甚至可能吗？到目前为止我的代码：

    var data = google.visualization.arrayToDataTable([
         ['Type', 'Value1', 'Value2'],
         ['Left-1',  0, -5],
         ['Left-2',  0, -3],
         ['Left-3',  0, 0],
         ['Left-4',  3, 0],
         ['Left-5',  5, 0]
      ]);

    var options = {
        legend: 'none',
        hAxis: {
          minValue: -6,
          maxValue: 6
        }
    }

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

jsfiddle：https://jsfiddle.net/cLz5nffm/

Answer 1

此配置中的附加轴没有任何标准选项

但您可以添加自定义标签

'ready'事件触发后

请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Type', 'Value1', 'Value2'],
    ['Left-1',  0, -5],
    ['Left-2',  0, -3],
    ['Left-3',  0, 0],
    ['Left-4',  3, 0],
    ['Left-5',  5, 0]
  ]);

  var options = {
    legend: 'none',
    hAxis: {
      minValue: -6,
      maxValue: 6
    }
  }

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

  google.visualization.events.addListener(chart, 'ready', function () {
    Array.prototype.forEach.call(chartDiv.getElementsByTagName('text'), function(axisLabel) {
      if (axisLabel.getAttribute('text-anchor') === 'end') {
        addLabel(
          axisLabel,
          chart.getChartLayoutInterface().getChartAreaBoundingBox().left +
          chart.getChartLayoutInterface().getChartAreaBoundingBox().width - 24  // <-- find good width
        );
      }
    });

    function addLabel(label, xOffset) {
      var axisLabel = label.cloneNode(true);
      axisLabel.setAttribute('x', parseFloat(label.getAttribute('x')) + xOffset);
      axisLabel.innerHTML = label.innerHTML.replace('Left-', 'Right ');
      chartDiv.getElementsByTagName('svg')[0].appendChild(axisLabel);
    }
  });

  chart.draw(data, options);
}

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