如何在google api图表的堆积柱形图中使用条形底部的注释显示轴值？答案

【问题标题】：How to display the axis value using annotation in bottom of bar in stacked column chart of google api chart?如何在google api图表的堆积柱形图中使用条形底部的注释显示轴值？
【发布时间】：2014-01-10 13:30:25
【问题描述】：

这里我使用堆叠柱形图。在此图表中，我试图显示注释值。注释值显示在栏的顶部。但我需要在栏底部显示值。

实际：

例外：

<%@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>

【问题讨论】：

无法控制注解的位置。

标签： java javascript google-api google-visualization

【解决方案1】：

我有类似的需求，我的解决方案是自定义 JavaScript 函数。

我的情况有点不同，但它是满足您需要的好方法。比如看下面的函数（我写了一些cmets）。

    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

【讨论】：

【解决方案2】：

use string type annotation for each stack

点击这里查看答案 example in jsfiddle ，你不能将它底部对齐，但是我们可以为每个堆栈栏分配注释

【讨论】：