2016-11-25 27 views
1

私はこのようになりますこれは正と負の値を示すために、積み上げ棒グラフを構築する必要があり:これらの値は反対を示しているので第二Y軸

右の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/

答えて

2

が付加軸のための任意の標準オプションは、この構成

ではありませんが、あなたはカスタム'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>

+0

素晴らしいです!おかげさまでウェブ上のどこにも何も見つかりませんでした。 – quape

+0

ラベルを左揃えにするために 'axisLabel.setAttribute( 'text-anchor'、 'start')'を追加しました。右側の方が良く見えますが、この例では見えませんでした。 – quape

関連する問題