Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Построение круговой диаграммы (https://javascript.ru/forum/misc/26540-postroenie-krugovojj-diagrammy.html)

Harvey 12.03.2012 12:45

Построение круговой диаграммы
 
Привет, друзья!

Надоело ломать голову. Пытаюсь построить круговую диаграмму. Есть по 2 пары полей - Имя и Значение. Как описано в этом уроке, я высчитываю начальную и конечную позицию каждого сектора, учитывая, что длина всей окружности = 2П(6.28).
Например, такие параметры:

Красный = 50
Синий = 50

В этом случае
Начальная позиция Красного = 0, Конечная позиция = 3.14
Начальная позиция Синего = 3,14, Конечная позиция = 6,28

Вот теперь я могу понять, что мне делать с этими значениями, как связать их с тригонометрическими функциями и высчитать позицию конкретной точки в пикселях на диаграмме.
Подскажите пожалуйста или дайте ссылку на соответствующий материал.

Спасибо!

nikita.mmf 12.03.2012 16:31

http://ru.wikipedia.org/wiki/%D0%9F%...BD%D0%B0%D1%82

Harvey 12.03.2012 20:47

nikita.mmf, крутейшая ссыль, читал на вики об этом, но чтоб так подробно... спасибо!

101111101111 06.05.2012 15:49

Эвольвента окружности
 
http://ru.wikipedia.org/wiki/%DD%E2%EE%EB%FC%E2%E5%ED%F2%E0_%EE%EA%F0%F3%E6%ED% EE%F1%F2%E8

function matika(k){
var s = 10;
var r = 10;//расстояние между витками(радиус окружности)
var	x=Math.floor(r*(Math.cos(k)+k*Math.sin(k)))
var	y=Math.floor(r*(Math.sin(k)-k*Math.cos(k)))

    var t =x+200;var l =y+200

document.write('<div style=\"position:absolute; top:'+l+'px;left:'+t+'px ;width:'+s+'px;height:'+s+'px;background:#00F;\">'+'</div>');	 		 		 		 }	   
window.onload=function (){
for(var i=50;i>0;i-=0.01){
       //расстояние между div_ами(угол поворота радиуса окружности)
                  matika(i);           
	}	                    
}

Kolyaj 06.05.2012 20:59

И?


Часовой пояс GMT +3, время: 03:09.