谷歌图表注释未显示

Question

I am using the google charts api to display data from php. I am displaying this information in a material style bar chart (vertical).

I am trying to add annotations to show the values inside the bars however it isn't working.

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));
}

The contents of the php array $chartLastPackets is:

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

However all I can see is the chart itself without the annotation.

Answer 1

annotations.* are listed among the several options that don't work on Material charts

you can use the following option, to get the chart close to the look & feel of Material

theme: 'material'

see following working snippet...

 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>