Googleグラフの注釈が表示されない

Question

GoogleのグラフのAPIを使用して、データを表示しています。私はこの情報を材料スタイルの棒グラフ（垂直）で表示しています。

私はバーの中の値を表示するために注釈を追加しようとしていますが、機能しません。

はJavaScript：

google.charts.load('current', {'packages':['bar']}); 
google.charts.setOnLoadCallback(drawLastPackets); 

function drawLastPackets() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Days'); 
    data.addColumn('number', 'Packets Packed'); 
    data.addColumn({type: 'string', role: 'annotation'}); 
    data.addRows(<?php echo json_encode($chartLastPackets); ?>); 

    var toAdd = ["Day", "Packets Packed", {"role": "annotation"}]; 

    var options = { 
     legend: { 
      position: 'none', 
     }, 
     series: { 
      0: {color: '#d7a8a8'} 
     }, 
     vAxis: { 
      title: 'Packets' 
     } 
    }; 

    var chart = new google.charts.Bar(document.getElementById('lastPackets')); 

    chart.draw(data, google.charts.Bar.convertOptions(options)); 
} 

PHPの配列$chartLastPacketsの内容は次のとおりです。

[["Mon", 1, "1"], ["Tue", 3, "3"], ["Wed", 5, "5"], ["Thu", 2, "2"], ["Fri", 0, "0"]] 

しかし、私が見ることができるすべては、注釈のないチャートそのものです。

Answer 1

​​はあなたが近い見にチャートを取得するには、以下のオプションを使用することができseveral options that don't work on Material charts

の間で記載されています&作業スニペット以下材質

theme: 'material'

参照の感触...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Days'); 
 
    data.addColumn('number', 'Packets Packed'); 
 
    data.addColumn({type: 'string', role: 'annotation'}); 
 
    data.addRows([["Mon", 1, "1"], ["Tue", 3, "3"], ["Wed", 5, "5"], ["Thu", 2, "2"], ["Fri", 0, "0"]]); 
 

 
    var options = { 
 
     legend: { 
 
      position: 'none', 
 
     }, 
 
     series: { 
 
      0: {color: '#d7a8a8'} 
 
     }, 
 
     theme: 'material', 
 
     vAxis: { 
 
      title: 'Packets' 
 
     } 
 
    }; 
 

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

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