[英]How to bring the annotation part into bottom in google charts?
I am using google chart. 我正在使用谷歌图表。 I want to show the annotation part in bottom of the graph, but the default is in top.
我想在图的底部显示注释部分,但默认值在顶部。 How can I change it.
我该如何更改。 Please share with me if anyone have any idea.
如果有人有任何想法,请与我分享。
Jsfiddle: http://jsfiddle.net/6a9hpewr/ Jsfiddle: http : //jsfiddle.net/6a9hpewr/
My code: 我的代码:
<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>
Default: 默认:
Need: 需要:
Check this disscussion https://groups.google.com/forum/#!topic/google-visualization-api/1yWwsXV-Ysk . 检查此讨论https://groups.google.com/forum/#!topic/google-visualization-api/1yWwsXV-Ysk 。 According to that
根据那个
1.Create a stacked bar chart 1.创建堆叠的条形图
2.Add a data column with value 0 to the view which will be shown as a 0 height bar. 2.在视图中添加一个值为0的数据列,该列将显示为0高度栏。
3.Next add the annotation column to the view so the annoation will be shown near previous bar which has 0 height. 3.接下来,将注释列添加到视图,以便注释将显示在前一个高度为0的条附近。
Updated fiddle : http://jsfiddle.net/6a9hpewr/7/ 更新的小提琴 : http : //jsfiddle.net/6a9hpewr/7/
<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'});
var view = new google.visualization.DataView(dataTable);
view.setColumns([0, 1, {
type: 'number',
calc: function (dt, row) {
return 0;
}
},2]);
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'},
textStyle: {
fontName: 'Times-Roman',
//fontSize: 20,
// bold: true,
// italic: true,
// color: '#BDBDBD', // The color of the text.
//opacity: 0.8 // The transparency of the text.
}},
vAxis: {title: 'List of CD', titleTextStyle: {color: 'black'}, gridlines: {color: 'red', count: 4}, minValue: 0},
legend: 'none',
isStacked: true,
annotations: {
textStyle: {
//fontName: 'Times-Roman',
// fontSize: 18,
// bold: true,
// italic: true,
color: '#fff', // The color of the text.
auraColor: 'transparent', // The color of the text outline.
//opacity: 0.8 // The transparency of the text.
}
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('tooltip'));
chart.draw(view, options);
}
</script>
<div id="tooltip" style="width: 600px; height: 400px;"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.