谷歌图表注释不显示 - Google charts annotation not showing

Google charts annotation not showing

本文关键字：显示注释谷歌 | 更新日期: 2023-09-27

我使用谷歌图表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"]]

然而，我只能看到没有注释的图表本身。

annotations.*是在Material图表上不起作用的几个选项之一

您可以使用以下选项，使图表接近的外观&材质手感

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>