我使用 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>
最佳答案
关于javascript - Raphael JS PieChart 选择部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11677416/