Question

我有Annotation的列，但注释没有出现在栏的顶部？如果var视图对显示标签很重要吗？

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

Answer 1

首先，注释角色的documentation表示要使用 - ＆gt;数据类型：字符串

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

使用配置选项theme: 'material'让核心图表接近材料图表的外观

请参阅以下工作代码段，绘制两种图表类型...

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>

谷歌图表标签

1 个答案: