在堆疊（正/負）棒在谷歌圖表圖表二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>