这里我使用的是堆积柱形图。在此图表中，我试图显示注释值。注释值显示在栏的顶部。但我需要在栏底部显示值。
实际:
除外:
<%@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>
最佳答案
我有类似的需求，我的解决方案是自定义 JavaScript 函数。
我的情况有点不同，但这是完成所需操作的好方法。例如，见下面的功能(我写了一些评论)。
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");
}
}
}
}
最后，您需要在方法内部调用此函数:drawChart 在结束行中，就在绘制图形之后:
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_div'));
fixAnnotationPos();
这是您的代码的一个简单示例。查看注释文本如何改变位置:
关于java - 如何在 google api 图表的堆积柱形图中使用条形底部的注释显示轴值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21045627/