Блог

Я использую API Google charts для отображения данных из 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"]]
 

Однако все, что я вижу, это сама диаграмма без аннотации.

annotations.* перечислены среди нескольких параметров, которые не работают с диаграммами материалов

вы можете использовать следующую опцию, чтобы приблизить диаграмму к внешнему виду материала

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>