无法向谷歌条形图添加注释 [英] Can't add annotation to google bar chart

问题描述

我一直在尝试向谷歌条形图添加注释.我已经看到了有关此问题的相关问题，但无法解决.图表中有 2 个条形，我想在条形上显示数字.我在数据表中添加了 2 个注释列.图表绘制无需注释，控制台也没有错误.所以我需要一些帮助.这是我的代码:

I've been trying to add annotations to google bar chart. I've seen related questions about this, but can't solve it. There are 2 bar in charts and i want to show numbers on bars. I added 2 annotation column to my datatable. Chart draw works without annotations and there is no error at console. So i need some help. Here is my code:

 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);
    }

提前致谢.

推荐答案

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>

这篇关于无法向谷歌条形图添加注释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！