Googleグラフのラベル

Question

注釈の列はありますが、注釈は棒の上部に表示されません。ラベルを表示するには、varビューが重要ですか？

google.load('visualization', '1.1', {'packages': ['bar']}); 
google.setOnLoadCallback(drawStuff); 

function drawStuff() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Topping'); 
    data.addColumn('number', 'Nescafe Instant'); 
    data.addColumn({type: 'number', role: 'annotation'}); 
    data.addColumn('number', 'Folgers Instant'); 
    data.addColumn({type: 'number', role: 'annotation'})  
    data.addColumn('number', 'Nescafe Beans'); 
    data.addColumn({type: 'number', role: 'annotation'})  
    data.addRows([ 
     ['2001', 321, 150, 621, 500, 600, 816], 
     ['2002', 163, 150, 231, 500, 600, 539] 
    ]); 

    var options = { 
     width: 800, 
     height: 600, 
     chart: { 
      title: 'Year-by-year coffee consumption', 
      subtitle: 'This data is not real' 
     }, 
     vAxis: { 
      viewWindow: { 
       min: 0, 
       max: 1500 
      } 
     }, 
     chartArea: { backgroundColor: '#F8F8F8' } 
    }; 

    var chart = new google.charts.Bar(document.getElementById('chart_div')); 
    chart.draw(data, google.charts.Bar.convertOptions(options)); 
}; 

おかげで、 peXeq

Answer 1

注釈ロールのdocumentationを使用すると言う、最初の - >データの種類：文字列

と、残念ながら、注釈が素材チャート上では動作しません。
以下に示すように

theme: 'material'を使用してコア近い材質チャート

作業スニペット以下を参照の表情にチャートは、両方のチャートタイプを描く...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Topping'); 
 
    data.addColumn('number', 'Nescafe Instant'); 
 
    data.addColumn({type: 'string', role: 'annotation'}); 
 
    data.addColumn('number', 'Folgers Instant'); 
 
    data.addColumn({type: 'string', role: 'annotation'}) 
 
    data.addColumn('number', 'Nescafe Beans'); 
 
    data.addColumn({type: 'string', role: 'annotation'}) 
 
    data.addRows([ 
 
     ['2001', 321, '321', 621, '621', 600, '600'], 
 
     ['2002', 163, '163', 231, '231', 600, '600'] 
 
    ]); 
 

 
    var options = { 
 
     width: 800, 
 
     height: 600, 
 
     chart: { 
 
     title: 'Year-by-year coffee consumption', 
 
     subtitle: 'This data is not real' 
 
     }, 
 
     vAxis: { 
 
     viewWindow: { 
 
      min: 0, 
 
      max: 1500 
 
     } 
 
     }, 
 
     chartArea: { backgroundColor: '#F8F8F8' }, 
 
     title: 'Year-by-year coffee consumption', 
 
     theme: 'material' 
 
    }; 
 

 
    var chart = new google.charts.Bar(document.getElementById('chart_div_material')); 
 
    chart.draw(data, google.charts.Bar.convertOptions(options)); 
 

 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div_core')); 
 
    chart.draw(data, options); 
 
    }, 
 
    packages: ['bar', 'corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div>Core Chart</div> 
 
<div id="chart_div_core"></div> 
 
<div>Material Chart</div> 
 
<div id="chart_div_material"></div>