Googleの縦棒グラフに縦棒の値が表示されますか？

Question

縦の数値を列バーに表示するにはどうすればいいですか？

これは単純なGoogleの縦棒グラフで、上の縦棒に数字を表示するにはどうすればよいですか？

 var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Period Incident'); 
     data.addColumn('number', '# of Incidents'); 
     data.addRows([ 
     ['Mushrooms', 3], 
     ['Onions', 4], 
     ['Olives', 5], 
     ['Zucchini', 11], 
     ['Pepper', 7], 
     ['Avocado', 4], 
     ['Tomato', 5], 
     ['Pepperoni', 2] 
     ]); 

     // Set chart options 
     var options = { 
      'title':'How Much Pizza I Ate Last Night', 
      legend: { position: 'top', alignment: 'start' }, 
        'width':570, 
        'height':420}; 

      var chart = new google.visualization.ColumnChart(
        document.getElementById('columnchartIncidents')); 

      chart.draw(data, options); 
     } 

Answer 1

使用データテーブルを注釈列を追加

1）'annotation'column role ...

google.charts.load('current', { 
 
    packages: ['corechart'] 
 
}).then(function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Period Incident'); 
 
    data.addColumn('number', '# of Incidents'); 
 

 
    // add annotation column role 
 
    data.addColumn({type: 'string', role: 'annotation'}); 
 

 
    data.addRows([ 
 
    ['Mushrooms', 3, '3'], // <-- add annotations to the data 
 
    ['Onions', 4, '4'], 
 
    ['Olives', 5, '5'], 
 
    ['Zucchini', 11, '11'], 
 
    ['Pepper', 7, '7'], 
 
    ['Avocado', 4, '4'], 
 
    ['Tomato', 5, '5'], 
 
    ['Pepperoni', 2, '2'] 
 
    ]); 
 

 
    var options = { 
 
    title: 'How Much Pizza I Ate Last Night', 
 
    legend: { 
 
     position: 'top', 
 
     alignment: 'start' 
 
    }, 
 
    width: 570, 
 
    height: 420 
 
    }; 
 

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

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="columnchartIncidents"></div>

2）またはデータビューを使用アノテーションロールの計算カラムを追加する...

google.charts.load('current', { 
 
    packages: ['corechart'] 
 
}).then(function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Period Incident'); 
 
    data.addColumn('number', '# of Incidents'); 
 
    data.addRows([ 
 
    ['Mushrooms', 3], 
 
    ['Onions', 4], 
 
    ['Olives', 5], 
 
    ['Zucchini', 11], 
 
    ['Pepper', 7], 
 
    ['Avocado', 4], 
 
    ['Tomato', 5], 
 
    ['Pepperoni', 2] 
 
    ]); 
 

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

 
    var options = { 
 
    title: 'How Much Pizza I Ate Last Night', 
 
    legend: { 
 
     position: 'top', 
 
     alignment: 'start' 
 
    }, 
 
    width: 570, 
 
    height: 420 
 
    }; 
 

 
    var chart = new google.visualization.ColumnChart(
 
    document.getElementById('columnchartIncidents') 
 
); 
 
    chart.draw(view, options); // <-- draw chart with view 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="columnchartIncidents"></div>