負の値を持つ棒グラフで注釈を移動するGoogle Chart

Question

MVCプロジェクト内でGoogleグラフを使用しています。

負の値を持つ棒グラフを実装しようとしています。

グラフの負の部分の注釈は、棒の終わりと同じ側にあるようにしたいと思います（正の画像と同じように、下の画像を参照してください、緑色のボックスは注釈が欲しい場所です）。

私はこれを達成することができる方法上の任意のドキュメントを見つけるように見える傾けます。

アノテーションを反対側に移動することはできますか？

Answer 1

は注釈

を移動する標準的な設定オプションはありませんが、あなたは、アクティビティが発生するたびにチャートが実際にそれらをバックに移動します、しかし、手動

それらを移動することができ、このようなバーホバー
のよう
Fiに>getChartLayoutInterface().getXLocation(value)
- が

使用チャートの方法をそれらを保つために、MutationObserver、または何かを使用する必要がありますND場所も

、再び

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable({ 
 
     cols: [ 
 
     {label: 'x', type: 'string'}, 
 
     {label: 'y0', type: 'number'}, 
 
     ], 
 
     rows: [ 
 
     {c:[{v: 'Omega'}, {v: -0.95}]}, 
 
     {c:[{v: 'Large'}, {v: -0.92}]}, 
 
     {c:[{v: 'Medium'}, {v: 2.76}]}, 
 
     {c:[{v: 'Tiny'}, {v: 2.03}]} 
 
     ] 
 
    }); 
 

 
    var options = { 
 
     annotations: { 
 
     alwaysOutside: true, 
 
     stem: { 
 
      color: 'transparent' 
 
     }, 
 
     textStyle: { 
 
      color: '#000000' 
 
     } 
 
     }, 
 
     hAxis: { 
 
     // leave room for annotation 
 
     viewWindow: { 
 
      min: data.getColumnRange(1).min - 1 
 
     } 
 
     }, 
 
     legend: { 
 
     position: 'none' 
 
     } 
 
    }; 
 

 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0, 1, { 
 
     calc: 'stringify', 
 
     sourceColumn: 1, 
 
     type: 'string', 
 
     role: 'annotation' 
 
    }]); 
 

 
    var container = document.getElementById('chart'); 
 
    var chart = new google.visualization.BarChart(container); 
 

 
    // move annotations 
 
    var observer = new MutationObserver(function() { 
 
     $.each($('text[text-anchor="start"]'), function (index, label) { 
 
     var labelValue = parseFloat($(label).text()); 
 
     // only negative -- and -- not on tooltip 
 
     if ((labelValue < 0) && ($(label).attr('font-weight') !== 'bold')) { 
 
      var bounds = label.getBBox(); 
 
      var chartLayout = chart.getChartLayoutInterface(); 
 
      $(label).attr('x', chartLayout.getXLocation(labelValue) - bounds.width - 8); 
 
     } 
 
     }); 
 
    }); 
 
    observer.observe(container, { 
 
     childList: true, 
 
     subtree: true 
 
    }); 
 

 
    chart.draw(view, options); 
 
    }, 
 
    packages: ['corechart'] 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart"></div>