且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

无法向谷歌条形图添加注释

更新时间:2023-12-06 14:18:34

annotations.* 不支持 Material 图表,以及其他几个选项...

annotations.* are not supported by Material charts, along with several other options...

请参阅 --> 材料图表功能奇偶校验 #2143 的跟踪问题一个>

以下选项将设置 Core 图表的样式,类似于 Material...

the following option will style Core charts, similar to Material...

theme: 'material'  

注意:注释栏应该直接跟在它所代表的系列之后......


note: the annotation column should directly follow the series it represents...

请参阅以下工作片段...

see following working snippet...

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>