我有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
答案 0 :(得分:1)
首先,注释角色的documentation表示要使用 - >数据类型:字符串
且遗憾的是,注释不适用于 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>