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

最新推荐文章于 2018-05-15 23:11:34 发布

qqliang1314

最新推荐文章于 2018-05-15 23:11:34 发布

阅读量1.4k

点赞数

分类专栏： web开发文章标签： raphael 柱状图 label标签

本文链接：https://blog.csdn.net/qqliang1314/article/details/41830417

版权

web开发专栏收录该内容

9 篇文章 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显示文本的代码，效果图如下：