如何在google api图表的堆叠柱状图中使用条形图底部的注释显示轴值？
如何在google api图表的堆叠柱状图中使用条形图底部的注释显示轴值？
提问于 2014-01-10 21:30:26
这里我使用的是堆积柱状图。在此图表中，我尝试显示注释值。注释值显示在栏的顶部。但我需要在栏的底部显示的值。
实际：
例外情况：
<%@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>回答 2
Stack Overflow用户
发布于 2014-02-21 05:07:33
我也有类似的需求，我的解决方案是一个自定义的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();下面是您的代码的一个快速示例。查看带注释的文本如何更改位置：
example in jsbin
Stack Overflow用户
发布于 2014-05-27 21:09:04
use string type annotation for each stack 单击此处查看answer example in jsfiddle，您不能将其底部对齐，但我们可以为每个堆栈栏分配注释
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21045627
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号