0

JS ライブラリ Raphael を使用して円グラフを作成しました。特定のセクションにカーソルを合わせたときに円の中央にテキストを表示できるように、各セクターにテキストを割り当てたいと考えています。まず、円の特定のセクションを選択して変数として割り当て、テキストを追加する必要があります。円の最初のセクションを選択する方法を理解するのを手伝ってくれる人はいますか??

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>g·Raphaël Dynamic Pie Chart</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.pie.js"></script>

        <style type="text/css">

        body {
    background: #fff;
    font: 100.01% "Fontin Sans", Fontin-Sans, "Myriad Pro", "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Helvetica, sans-serif;
    color: #000;
    margin: 10px 0 0 0;
    padding: 0;
    text-align: center;
}

#holder {
    margin: 0 auto;
    width: 640px;
    height: 480px;
}

p {
    text-align: left;
    margin: .5em 2em;
}

        </style>

        <script>
        //BUG FOUND if the user scrolls over where the original sector would be and keeps going in and out of the original region
        //the sector keeps getting bigger and bigger....it is tougher to do with a smaller animation time

            window.onload = function () {
                //creates raphael canvas located at the specified id
                var r = Raphael("holder"),
                    //creates piechart in raphael (x, y, radius) [  amounts which are distributed according to sum ]  ??legend?? ??href??
                    pie = r.piechart(320, 240, 100, [70,20,5,5], { legend: ["%%.%% - Enterprise Users", "IE Users"], legendpos: "southeast", href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]});

                    //inner circle
                    innner = r.circle(320,240, 60).attr("fill", "red");
                    //invisible circle for text
                    innertext = r.circle(320,240,60).attr({"fill-opacity":"0"});

                //writes text at specified location
                r.text(320, 100, "Interactive Pie Chart").attr({ font: "20px sans-serif" });
                pie.hover(function () {
                    //if the user tries hovering over while the animation is finishing up in the specified time for the
                    //animation to last the user will not get the desired effect.  this says that the animation is over
                    //once the function is called again
                    this.sector.stop();
                    //describes how big the sector will be when hovered over
                    this.sector.scale(1.1, 1.1, this.cx, this.cy);

                    //does the same as above telling the legends to stop and what to do during animation
                    if (this.label) {
                        this.label[0].stop();
                        this.label[0].attr({ r: 7.5 });
                        this.label[1].attr({ "font-weight": 800 });
                    }
                }, function () {
                    //tells the selected sector to animate at the given speed and animation type
                    this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");

                    //creates the labesls in the legend and describes how they will be animated
                    if (this.label) {
                        this.label[0].animate({ r: 5 }, 500, "linear");
                        this.label[1].attr({ "font-weight": 400 });
                    }
                });
            };
        </script>
    </head>
    <body class="raphael" id="g.raphael.dmitry.baranovskiy.com">
        <div id="holder"></div>
        <p>
            Pie chart with legend, hyperlinks on two first sectors and hover effect.
        </p>

    </body>
</html>
4

1 に答える 1

0

この投稿で私が探していたものへの答えを見つけたことは気にしない.....

Raphael JS Pie: パス スライスに ID を追加する

この人は基本的に同じものを探しています。私を助けようとしたすべての人に感謝します。

于 2012-07-27T17:10:16.890 に答える