谷歌圖表標籤

Question

我有用於註釋的列，但註釋不會出現在酒吧的頂部？如果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

Answer 1

第一，documentation的註釋角色說，使用 - >數據類型：字符串

，不幸的是，註釋不上材料圖表工作
如下所示

使用配置選項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>