在堆叠（正/负）棒在谷歌图表图表二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>