積まれたGoogleの縦棒グラフの厄介な数字

Question

私は、Dataviewを使って積み上げられたGoogle縦棒グラフを使ってその値を列に追加します。ただし、数値は別の列の列の外に表示されることがあります。

これを防ぐにはどうすればよいのですか、列の中央に数値を配置しますか？

さらに値が0のときに番号が表示されますが、これは面倒です。

Jsfiddle：https://jsfiddle.net/p44byfa7/

google.charts.load('current', {packages: ['corechart', 'bar']}); 
google.charts.setOnLoadCallback(drawBasic); 
function drawBasic() { 
    var data = new google.visualization.arrayToDataTable([ 
    ['Month', 'A', 'B', 'C'], 
    ['Jan', 1, 4, 6], 
    ['Feb', 0, 2, 11], 
    ['Mar', 4, 0, 1], 
    ['Apr', 0, 0, 0], 
    ['May', 14, 1, 11], 
    ['Jun', 12, 1, 7] 
    ]); 

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

    var options = { 
    legend: { position: 'top', maxLines: 3 }, 
    isStacked: true, 
    height: 600 
    }; 

    var chart = new google.visualization.ColumnChart(
    document.getElementById('chart_div')); 
    chart.draw(view, options); 
} 

Answer 1

この問題を解決する最も簡単な方法は、積層された列に注釈/ラベルのフォントサイズを縮小又は注釈/標識があるので、グラフの高さを増加させることのいずれかによるものです列の外側には表示されません。注釈スタイルおよび他の特徴に

私の解決策

var options = { 
    legend: { position: 'top', maxLines: 3 }, 
    isStacked: true, 
    height: 700, 
    annotations: {textStyle: {fontSize: 10, bold: true}} 
    }; 

詳細情報がテーブルの行annotations.textStyle下here入手可能です。

グラフに数値0が表示されないようにするには、0の値をnullに置き換えることができます。これは最善のアプローチではありませんが、それは仕事です。このデータが別のソースから来ており、静的でない場合は、0を置き換えるために関数を記述する必要があります。

['Month', 'A', 'B', 'C'], 
['Jan', 1, 4, 6], 
['Feb', null, 2, 11], 
['Mar', 4, null, 1], 
['Apr', null, null, null], 
['May', 14, 1, 11], 
['Jun', 12, 1, 7]