Google 차트의 주석이 표시되지 않습니다.

Question

저는 Google 차트 API를 사용하여 PHP의 데이터를 표시하고 있습니다. 이 정보를 재료 스타일 막 대형 차트 (세로)로 표시하고 있습니다.

주석을 추가하여 바 내부의 값을 표시하려고하지만 작동하지 않습니다.

자바 스크립트 :

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.* 당신이

theme: 'material'

작업 조각 다음을 참조하십시오 재료의 모양 & 느낌에 가까운 얻을,을 차트 을 다음과 같은 옵션을 사용할 수 있습니다 several options that don't work on Material charts

사이에 나열되어 있습니다 ...

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>