不能添加注释到谷歌条形图

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>