谷歌图表标签答案

【问题标题】：Google chart label谷歌图表标签
【发布时间】：2016-07-14 14:17:08
【问题描述】：

我有注释栏，但注释没有出现在栏的顶部？如果 var 视图显示重要的 Label？

google.load('visualization', '1.1', {'packages': ['bar']});
google.setOnLoadCallback(drawStuff);

function drawStuff() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Nescafe Instant');
    data.addColumn({type: 'number', role: 'annotation'});
    data.addColumn('number', 'Folgers Instant');
    data.addColumn({type: 'number', role: 'annotation'})    
    data.addColumn('number', 'Nescafe Beans');
    data.addColumn({type: 'number', role: 'annotation'})    
    data.addRows([
        ['2001', 321, 150, 621, 500, 600, 816],
        ['2002', 163, 150, 231, 500, 600, 539] 
    ]);

    var options = {
        width: 800,
        height: 600,
        chart: {
            title: 'Year-by-year coffee consumption',
            subtitle: 'This data is not real'
        },
        vAxis: {
            viewWindow: {
                min: 0,
                max: 1500
            }
        },
        chartArea: { backgroundColor: '#F8F8F8' }
    };

    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
};

谢谢， peXeq

【问题讨论】：

标签： javascript charts google-visualization

【解决方案1】：

首先，注解角色的documentation说要使用 --> 数据类型：字符串

不幸的是，注释不适用于 Material 图表
如下所示

使用配置选项 theme: 'material' 使 Core 图表接近 Material 图表的外观

查看以下工作 sn-p，绘制两种图表类型...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Nescafe Instant');
    data.addColumn({type: 'string', role: 'annotation'});
    data.addColumn('number', 'Folgers Instant');
    data.addColumn({type: 'string', role: 'annotation'})
    data.addColumn('number', 'Nescafe Beans');
    data.addColumn({type: 'string', role: 'annotation'})
    data.addRows([
      ['2001', 321, '321', 621, '621', 600, '600'],
      ['2002', 163, '163', 231, '231', 600, '600']
    ]);

    var options = {
      width: 800,
      height: 600,
      chart: {
        title: 'Year-by-year coffee consumption',
        subtitle: 'This data is not real'
      },
      vAxis: {
        viewWindow: {
          min: 0,
          max: 1500
        }
      },
      chartArea: { backgroundColor: '#F8F8F8' },
      title: 'Year-by-year coffee consumption',
      theme: 'material'
    };

    var chart = new google.charts.Bar(document.getElementById('chart_div_material'));
    chart.draw(data, google.charts.Bar.convertOptions(options));

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div_core'));
    chart.draw(data, options);
  },
  packages: ['bar', 'corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>Core Chart</div>
<div id="chart_div_core"></div>
<div>Material Chart</div>
<div id="chart_div_material"></div>

【讨论】：