Raphael JS PieChart選擇部分

我已經使用JS庫Raphael創建餅圖。我想爲每個扇區分配一些文本，以便當您將鼠標懸停在特定部分上時，可以在圓圈中間顯示文本。所以首先，我需要選擇一個圓的特定部分，並將其分配爲一個變量並向其添加文本。任何人都可以幫我弄清楚如何選擇圈子中的第一部分？Raphael JS PieChart選擇部分

<!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>

來源

2012-07-26 John Doe

作爲一個方面說明，我強烈建議切換到一個真正的JS圖表庫，如Highcharts，它實際上有文檔。 – Don 2012-07-27 17:12:21

拉斐爾是一個真正的圖表庫！不要撕裂它！ – 2012-07-27 18:37:26

對不起，我的意思是gRaphael – Don 2012-07-27 19:09:34

別介意我找到了答案，是我在這個崗位尋找.....

Raphael JS Pie: Add ID to path slices

這個人基本上是在尋找同樣的事情。感謝那些試圖幫助我的人。

來源

2012-07-27 17:10:16

Raphael JS PieChart選擇部分

回答

相關問題