Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make lines around piechart position evenly?

I put chart lines as pointers to labels around the piechart. Lines are made of 3 points. I am trying to make horizontal ends of these lines evenly spread vertically so that label values could fit properly. What I need is an algorithm or an advice how to measuring lines points positions so that they could be positioned evenly, like a grid.

Chart

UPDATE

I have simplified the task a bit by making legs vertical, not coming from center of the circle, so that not to waste too much time on achieving the effect. I will prepare a fiddle and update here if anyone is interested.

Now it looks like this:

enter image description here

like image 745
Sergei Basharov Avatar asked Nov 11 '22 08:11

Sergei Basharov


1 Answers

What a fun question, I can't resist giving it a quick thinking through. :-)

Generally speaking...

  1. I would first collect and sort the Y coordinates of the black dots in your diagram.
  2. Then I would take the median point and work outwards, pushing the higher coordinates up and the lower down as needed, so that there was some minimum space between them (based on text height I assume).
  3. Then it is a matter of determining the three points of each label line. The math wouldn't be too hard as you have the slope from the line from the circle center to the black dot. Take the sloped line out until you hit your label slot Y.
  4. You probably want to split the work and do it twice, once for each vertical half of the chart.

You're after a very pretty look, I like it, good luck.

like image 104
moodboom Avatar answered Nov 15 '22 09:11

moodboom