个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 11:23:42 26 4
gpt4 key购买 nike

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

实际: 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>

最佳答案

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

关于java - 如何在 google api 图表的堆积柱形图中使用条形底部的注释显示轴值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21045627/

26 4 0
文章推荐： swift - 在 Swift 中重写 CIImage 最终会导致处理器下降到 0% 并卡住
文章推荐： javascript - 防止用户在 Discord 的昵称前加点 (discord.js/Discord Bot)
文章推荐： ios - 使用 Swift for iOS 处理来自关闭应用程序的推送通知，如何仅显示它然后返回关闭或暂停？
文章推荐： ios - UITableView 页脚和页眉背景颜色比指定暗
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com