Question

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

实际值： enter image description here

的例外： enter image description here

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

Answer 1

我有类似的需求，我的解决方案是自定义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

Answer 2

use string type annotation for each stack

点击这里查看答案 example in jsfiddle，您无法将其对齐到底部，但我们可以为每个堆栈栏分配注释

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

2 个答案: