Page 1 of 1
Pie labels overlap problem
Posted: Tue May 17, 2016 1:34 pm
by 15677821
How to fix the pie chart overlap problem? . We found the fix for .Net code , but not for javascript with Html5.
http://www.teechart.net/support/viewtop ... 10&t=14601
Re: Pie labels overlap problem
Posted: Wed May 18, 2016 3:48 pm
by yeray
Hello,
Here it is a simple example using TeeChart for HTML5/Javascript:
Code: Select all
var pie1 = Chart1.addSeries(new Tee.Pie());
pie1.data.values = [300, 5, 2, 3, 4];
pie1.data.labels = ["first", "second", "third", "fourth", "fifth"];
pie1.marks.antioverlap = true;
pie1.marks.drawPolar=function(center,radius,angle,index) {
var text=this.series.markText(index),
px=center.x+Math.cos(angle)*radius,
py=center.y+Math.sin(angle)*radius,
c=this.chart.ctx;
this.text=text;
this.resize();
var b=this.bounds, p2x, p2y, p=this.position;
radius+=this.arrow.length;
p2x=center.x+Math.cos(angle)*radius,
p2y=center.y+Math.sin(angle)*radius;
if (p2x-b.width<0)
p2x-=(p2x-b.width-4);
if (this.antioverlap) {
if (!this.positions) {
this.positions = [];
}
var p1 = new Rectangle(p2x, p2y, b.width, b.height);
for (var i = 0; i < this.positions.length; i++) {
if (i != index) {
var p2 = this.positions[i];
while (p2 && (p1.contains(new Point(p2.x, p2.y)) ||
p1.contains(new Point(p2.x, p2.y + p2.height)) ||
p1.contains(new Point(p2.x + p2.width, p2.y)) ||
p1.contains(new Point(p2.x + p2.width, p2.y + p2.height)) ) ) {
p1.x += 2;
p1.y += 2;
}
}
}
this.positions[index] = p1;
p2x = p1.x;
p2y = p1.y;
}
if (Math.abs(p2x-center.x)<b.width)
p.x=p2x-b.width*0.5;
else
p.x= (p2x<center.x) ? p2x-b.width : p2x;
if (Math.abs(p2y-center.y)<b.height)
p.y=p2y-b.height*0.5;
else
p.y= (p2y<center.y) ? p2y-b.height : p2y;
c.beginPath();
c.moveTo(px,py);
c.lineTo(p2x,p2y);
if (this.arrow.underline) {
if ((p2y<=p.y) || (p2y>=(p.y+b.height))) {
c.moveTo(p.x,p2y);
c.lineTo(p.x+b.width,p2y);
}
}
this.arrow.stroke.prepare();
c.stroke();
this.draw();
}
Chart1.draw();
}
function Point(x,y) {
this.x=x;
this.y=y;
}
function Rectangle(x,y,width,height)
{
this.set(x,y,width,height);
}
Rectangle.prototype.contains=function(p) {
return (p.x>=this.x) && (p.x<=(this.x+this.width)) &&
(p.y>=this.y) && (p.y<=(this.y+this.height));
};
Rectangle.prototype.set=function(x,y,width,height) {
this.x=x;
this.y=y;
this.width=width;
this.height=height;
};