且构网

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

无法向Google条形图添加注释

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

annotations.* ,以及其他一些选项...

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>