Javascript 如何在google图表中将注释部分置于底部？

我正在使用谷歌图表。我想在图表的底部显示注释部分，但默认值是在顶部。我怎样才能改变它。如果有人有任何想法，请与我分享

Jsfiddle:

我的代码：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
 google.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Funds');
dataTable.addColumn('number', 'Percentage');
dataTable.addColumn({type: 'string', role: 'annotation'});


dataTable.addRows([
['AB1', 30.6, '30.6%'],

['AB2', 40.1,'40.1%'],

['AB3', 45.7,'45.7%'],

['AB4', 50.9,'50.9%']
]);


var options = {
title: 'ABCD',
hAxis: {title: 'List of AB', titleTextStyle: {color: 'black'}},
vAxis: {title: 'List of CD', titleTextStyle: {color: 'black'},           gridlines: {color: 'red', count: 4}, minValue: 0},    
legend: 'none'
};
var chart = new google.visualization.ColumnChart(document.getElementById('tooltip'));
chart.draw(dataTable, options);
}

</script>
<div id="tooltip" style="width: 600px; height: 400px;"></div>

load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var dataTable=new google.visualization.dataTable（）；
addColumn（'string'，'Funds'）；
dataTable.addColumn（'number'，'Percentage'）；
addColumn（{type:'string'，role:'annotation'}）；
dataTable.addRows([
[AB1'，30.6'，30.6%']，
[AB2'，40.1，'40.1%']，
[AB3'，45.7，'45.7%']，
[AB4'，50.9，'50.9%]
]);
变量选项={
标题：“ABCD”，
hAxis:{title:'List of AB'，titleTextStyle:{color:'black'}}，
变量：{title:'List of CD'，titleTextStyle:{color:'black'}，网格线：{color:'red'，计数：4}，最小值：0}，
图例：“无”
};
var chart=new google.visualization.ColumnChart（document.getElementById（'tooltip'）；
图表绘制（数据表、选项）；
}

默认值：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
 google.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Funds');
dataTable.addColumn('number', 'Percentage');
dataTable.addColumn({type: 'string', role: 'annotation'});


dataTable.addRows([
['AB1', 30.6, '30.6%'],

['AB2', 40.1,'40.1%'],

['AB3', 45.7,'45.7%'],

['AB4', 50.9,'50.9%']
]);


var options = {
title: 'ABCD',
hAxis: {title: 'List of AB', titleTextStyle: {color: 'black'}},
vAxis: {title: 'List of CD', titleTextStyle: {color: 'black'},           gridlines: {color: 'red', count: 4}, minValue: 0},    
legend: 'none'
};
var chart = new google.visualization.ColumnChart(document.getElementById('tooltip'));
chart.draw(dataTable, options);
}

</script>
<div id="tooltip" style="width: 600px; height: 400px;"></div>

需要：

检查此讨论。 据此,

1.创建堆叠条形图

2.将值为0的数据列添加到视图中，该视图将显示为0高度栏

3.接下来将注释列添加到视图中，以便注释将显示在上一个高度为0的条形图附近

更新的小提琴：

load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var dataTable=new google.visualization.dataTable（）；
addColumn（'string'，'Funds'）；
dataTable.addColumn（'number'，'Percentage'）；
addColumn（{type:'string'，role:'annotation'}）；
var view=newgoogle.visualization.DataView（dataTable）；
view.setColumns（[0,1,1{
键入：“编号”，
计算：函数（dt，行）{
返回0；
}
},2]);
dataTable.addRows([
[AB1'，30.6'，30.6%']，
[AB2'，40.1，'40.1%']，
[AB3'，45.7，'45.7%']，
[AB4'，50.9，'50.9%]
]);
变量选项={
标题：“ABCD”，
hAxis:{title:'List of AB'，titleTextStyle:{color:'black'}，
文本样式：{
fontName:‘时代罗马’，
//尺寸：20，
//黑体字：对，
//斜体：对，
//颜色：'#bdbd'，//文本的颜色。
//不透明度：0.8//文本的透明度。
}},
变量：{title:'List of CD'，titleTextStyle:{color:'black'}，网格线：{color:'red'，计数：4}，最小值：0}，
图例：“无”，
isStacked：是的，
注释：{
文本样式：{
//fontName:‘时代罗马’，
//尺码：18，
//黑体字：对，
//斜体：对，
颜色：'#fff'，//文本的颜色。
auraColor:'透明'，//文本轮廓的颜色。
//不透明度：0.8//文本的透明度。
}
}
};
var chart=new google.visualization.ColumnChart（document.getElementById（'tooltip'）；
图表绘制（视图、选项）；
}

检查一下，这真是太棒了。工作正常。谢谢你。还有一件事，我怎样才能改变字体的颜色和背景。我只想用白色来展示它。可能吗？我已经更新了小提琴和代码。检查选项对象中的注释属性。你可以在那里设置注释样式。你能再帮我一次吗？如何更改水平项目名称的字体样式（来自图像：AB1、AB2等）？我已更新了选项内的fiddle.Chcek hAxis.textStyle属性。您可以在其中设置字体样式。