I am facing a problem, I have created a pie chart, and want to place Text inside each compartment.
var pie = paper.piechart(pwidth / 2, pheight / 2, radius/1.2, data, {
stroke: bgcolor,
strokewidth: 1,
startFromFixedAngle: 0,
colors: barcolors
});
And Adding Text:
var t = paper.text(pwidth / 2 - 200, pheight / 2 - 300, 'Reports').attr({ 'fill': '#000000',
'font-size': '18', "font-weight": 800, 'opacity': 1.0 });
Now the problem is when I add a hover event on the pie chart and the cursor moves over the text It raises a MouseOut Event causing my animation to scale down and again as cursor moves out of text raises a MouseOver Event causing animation to again scale up.
How can I avoid this so my animation works correctly?
Thank you.
The Solution: 1) Make another pie chart with the same arguments and data, say pieShadow. 2) Make each and every sector's opactity: 0
pieShadow.series.items[0].attr({ 'opacity': 0 });
3) Now add a hover event on pieShadow and identify which sector is user hovering on:
for (var index_i = 0; index_i < pie.covers.items.length; index_i++) {
if (this.cover == pie.covers.items[index_i]) {
break;
}
}
and make the actual pie show the hover effect:
pie.series.items[index_i].scale(1.1, 1.1, this.cx, this.cy);