Вторая ось Y в гистограмме с накоплением (положительная/отрицательная) в Google Charts

Я построил гистограмму с накоплением, чтобы проиллюстрировать положительные и отрицательные значения, которая выглядит следующим образом:

Поскольку эти значения указывают противоположности, я хочу добавить дополнительные метки к правой оси 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/


charts google-visualization
person quape    schedule 25.11.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

стандартных опций для дополнительной оси в этой конфигурации нет

но вы можете добавить собственные ярлыки

как только сработает событие '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>

person WhiteHat    schedule 26.11.2016
comment
классно! спасибо большое, в инете ничего не нашел. - person quape; 26.11.2016
comment
Я добавил axisLabel.setAttribute('text-anchor', 'start'), чтобы метки были выровнены по левому краю. выглядит лучше с правой стороны, но не был виден в этом примере. - person quape; 26.11.2016