raphael生成柱状图时横坐标显示文字说明

论坛 期权论坛 脚本     
已经匿名di用户   2022-7-2 21:49   2341   0

代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="demo.css" media="screen">
        <link rel="stylesheet" href="demo-print.css" media="print">
        <script src="raphael.js"></script>
        <script src="g.raphael.js"></script>
        <script src="g.bar.js"></script>
        <script>
            window.onload = function () {
                var r = Raphael("holder"),
                    fin = function () {
                        this.flag = r.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this);
                    },
                    fout = function () {
                        this.flag.animate({opacity: 0}, 300, function () {this.remove();});
                    },
                    fin2 = function () {
                        var y = [], res = [];
                        for (var i = this.bars.length; i--;) {
                            y.push(this.bars[i].y);
                            res.push(this.bars[i].value || "0");
                        }
                        this.flag = r.popup(this.bars[0].x, Math.min.apply(Math, y), res.join(", ")).insertBefore(this);
                    },
                    fout2 = function () {
                        this.flag.animate({opacity: 0}, 300, function () {this.remove();});
                    },
                    txtattr = { font: "12px sans-serif" };
                
                r.text(160, 10, "单系列").attr(txtattr);
               // r.text(480, 10, "多系列堆叠").attr(txtattr);
               // r.text(160, 250, "多系列").attr(txtattr);
               // r.text(480, 250, "多系列堆叠").attr(txtattr);

              // var c =  r.barchart(10, 10, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10]]).hover(fin, fout);
                   r.barchart(10, 10, 550, 300, [
            [5.5, 2.0, 7.6, 9.5]
        ]).hover(fin, fout)<span style="color:#FF0000;"><span style="color:#FF0000;">.<strong>label([['星期一','星期二','星期三','星期四']],true</strong>)</span></span>;
               // r.hbarchart(330, 10, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55]], {stacked: true}).hover(fin, fout);
               // r.hbarchart(10, 250, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55]]).hover(fin, fout);
               // var c = r.barchart(330, 250, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55]], {stacked: true, type: "soft"}).hoverColumn(fin2, fout2);
                // c.label([["Uno", "Dos", "Tres", "Cuatro", "Cinco", "Seis", "Siete", "Ocho"]],true);
            };
        </script>
    </head>
    <body class="raphael" >
        <div id="holder"></div>
        
    </body>
</html>
加粗的部分是添加label显示文本的代码,效果图如下:

注:如果效果没有显示出来,并且报labeiles not function错,重新替换g.bar.js,下载地址 https://github.com/jhurt/g.raphael/blob/master/g.bar.js,OK。

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:81
帖子:4969
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP