Аннотации Google не отображаются

Question

Я использую диаграммы Google api для отображения данных с php. Я показываю эту информацию в гистограмме стиля материала (по вертикали).

Я пытаюсь добавить аннотации, чтобы показать значения внутри баров, но он не работает.

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

annotations.* перечислены среди 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>