Java 如何在google api图表的堆叠柱状图中使用条形底部的注释显示轴值？
这里我使用的是堆叠柱形图。在这个图表中，我试图显示注释值。注释值显示在条的顶部。但我需要在栏的底部显示值 实际： 例外情况：Java 如何在google api图表的堆叠柱状图中使用条形底部的注释显示轴值？,java,javascript,google-api,google-visualization,Java,Javascript,Google Api,Google Visualization,这里我使用的是堆叠柱形图。在这个图表中，我试图显示注释值。注释值显示在条的顶部。但我需要在栏的底部显示值 实际： 例外情况： DAR折线图 load（“可视化”、“1”、{packages:[“corechart”]}）； setOnLoadCallback（drawChart）； 函数绘图图（）{ var data=new google.visualization.DataTable（）； addColumn（{type:'string'，label:'label'}）； addColu
DAR折线图
load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
addColumn（{type:'string'，label:'label'}）；
addColumn（{type:'number'，label:'No visions'}）；
addColumn（{type:'number'，label:'All members'}）；
addColumn（{type:'number'，role:'annotation'}）；
addRows（[['我有类似的需求，我的解决方案是一个自定义JavaScript函数
我的案例有点不同，但这是一个很好的方法来做你需要的事情
下面是一个代码的快速示例。请参见注释文本如何更改位置：
点击这里查看答案
，您不能将其底部对齐，但我们可以为每个堆栈条指定注释无法控制注释的位置。
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Line chart for DAR</title>
<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 data =new google.visualization.DataTable();
data.addColumn({type: 'string', label: 'label'});
data.addColumn({type: 'number', label: 'No visits'});
data.addColumn({type: 'number', label: 'All members'});
data.addColumn({type: 'number', role: 'annotation'});
data.addRows([['<2', 25, 23, 23],
['2-5', 36, 37, 37],
['6-8', 18, 19, 19],
['9-11', 25, 26, 26],
['12-15', 25, 24, 24],
['16-19', 25, 21, 21],
['20-34', 25, 22, 22],
['35-49', 25, 28, 28],
['50-64', 25, 29, 29],
['65-74', 25, 30, 30],
['75+', 25, 25, 25]
]);
var options = {
isStacked: true,
vAxis: {
baselineColor: '#fff',
gridlineColor: '#fff',
textPosition: 'none'
},
tooltip: {
trigger: 'none'
},
series: {
0: {
color: '#4169E1'
},
1: {
color: '#87CEFA'
}
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="columnchart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
function fixAnnotationPos(){
//the text tag
var textTags = document.getElementsByTagName("text");
//bucle for each text tag
for (var i = 0; i < textTags.length; i++) {
// the attributes text-anchor, x and y are in each text tag of my annotation
if (textTags[i].hasAttribute("text-anchor") && textTags[i].hasAttribute("x") && textTags[i].hasAttribute("y")) {
var textanchor = textTags[i].getAttribute("text-anchor");
var x = textTags[i].getAttribute("x");
var fill = textTags[i].getAttribute("fill");
//in my case, only the annotations text have a attribute with
// name: text-anchor and value: end
// in your case, it can be different and maybe you need make exta validations
// my recomendations is see the tags and attributes in your SVG graph to make the correct validations.
if (textanchor == 'end') {
// now, I can change the X position and other styles easy.
// this can inspire you to do more stuff
x = parseInt(x)
textTags[i].setAttribute("x", x + 86);
textTags[i].setAttribute("fill", "#bfbfbf");
textTags[i].setAttribute("font-weight", "bold");
textTags[i].setAttribute("font-size", "13");
}
}
}
}
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_div'));
fixAnnotationPos();
use string type annotation for each stack