不能添加註釋到谷歌條形圖

Question

我一直在試圖添加註釋到谷歌條形圖。我已經看到相關的問題，但無法解決。圖表中有2個酒吧，我想在酒吧上顯示數字。我在我的數據表中添加了2個註釋列。圖表繪製工作沒有註釋，並且在控制檯沒有錯誤。所以我需要一些幫助。這裏是我的代碼：

var options = { 
     chart: { 
      title: 'xxxx', 
      subtitle: 'xxxx', 
      focusTarget:'category' 
     }, 
     annotations: { 
      textStyle: { 
       color: 'black', 
       fontSize: 11, 
      }, 
      alwaysOutside: true 
     }, 
     height:300, 
     vAxis: {format: 'short'}, 
     colors: ['#17807E', '#4285F4'] 
    }; 

function drawAudits(Data) //data comes from another function with ajax call 
    {    
     var dataTbl = new google.visualization.DataTable();    
     dataTbl.addColumn('string', 'Months');    
     dataTbl.addColumn('number', 'Scheduled'); 
     dataTbl.addColumn('number', 'Done'); 
     dataTbl.addColumn({ type:'number' , role: 'annotation' }); 
     dataTbl.addColumn({ type:'number' , role: 'annotation' }); 

     for (var i = 0; i < Data.length; i++) 
     { 
      dataTbl.addRow([Data[i].month, Data[i].AllAudits, Data[i].DoneAudits, Data[i].AllAudits, Data[i].DoneAudits]); 
     } //last 2 column for annotations 

     var chart = new google.charts.Bar(document.getElementById('columnChartDiv')); 
     chart.draw(dataTbl,options); 
    } 

在此先感謝。

Answer 1

​​不受材料圖表支持，與其他幾個選項一起...

看到 - >Tracking Issue for Material Chart Feature Parity #2143

---

以下選項將樣式核心圖表，類似於材料 ...

theme: 'material' 

---

注：註釋欄應該直接跟它所代表的系列...

---

看到下面的工作片段...

google.charts.load('current', { 
 
    callback: function() { 
 
    var options = { 
 
     annotations: { 
 
     textStyle: { 
 
      color: 'black', 
 
      fontSize: 11, 
 
     }, 
 
     alwaysOutside: true 
 
     }, 
 
     chartArea: { 
 
     left: 36, 
 
     width: '100%' 
 
     }, 
 
     colors: ['#17807E', '#4285F4'], 
 
     focusTarget:'category', 
 
     height:300, 
 
     legend: { 
 
     position: 'bottom' 
 
     }, 
 
     theme: 'material', 
 
     title: 'xxxx', 
 
     vAxis: { 
 
     format: 'short', 
 
     viewWindow: { 
 
      max: 12 
 
     } 
 
     }, 
 
    }; 
 

 
    drawAudits(); 
 
    window.addEventListener('resize', drawAudits, false); 
 

 
    function drawAudits(Data) { 
 
     var dataTbl = new google.visualization.DataTable(); 
 
     dataTbl.addColumn('string', 'Months'); 
 
     dataTbl.addColumn('number', 'Scheduled'); 
 
     dataTbl.addColumn({ type:'number' , role: 'annotation' }); 
 
     dataTbl.addColumn('number', 'Done'); 
 
     dataTbl.addColumn({ type:'number' , role: 'annotation' }); 
 

 
     Data = [ 
 
     {month: 'Jan', AllAudits: 10, DoneAudits: 5}, 
 
     {month: 'Feb', AllAudits: 10, DoneAudits: 6} 
 
     ]; 
 

 
     for (var i = 0; i < Data.length; i++) { 
 
     dataTbl.addRow([Data[i].month, Data[i].AllAudits, Data[i].AllAudits, Data[i].DoneAudits, Data[i].DoneAudits]); 
 
     } 
 

 
     var chart = new google.visualization.ColumnChart(document.getElementById('columnChartDiv')); 
 
     chart.draw(dataTbl,options); 
 
    } 
 
    }, 
 
    packages: ['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="columnChartDiv"></div>