无法在Google条形图中添加注释

时间:2017-03-03 08:48:32

标签: charts annotations google-visualization

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

git rebase master new/master -X theirs

提前感谢。

1 个答案:

答案 0 :(得分:0)

{<1>} 不支持 材料图表以及其他几个选项......

参见 - &gt; Tracking Issue for Material Chart Feature Parity #2143

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

annotations.*

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

请参阅以下工作代码段...

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