두 번째 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>