라파엘(Raphaël) js 라이브러리

 

정의

 

• 웹상에서 vector 그래픽을 생성할 수 있는 오픈소스 js 라이브러리
• 차트를 생성하거나 이미지 크롭 및 회전등 구현
• canvas 요소를 사용하지 않고 W3C에서 정의한 SVG와 VML을 기반으로 그래픽 생성
• ie에서 VML, 타브라우저 SVG로 구현
• 크로스브라우징을 지원하고 자바스크립트 이벤트 핸들러와 결합하여 변화를 주는것도 가능
• github 코드 호스팅 사용
• http://raphaeljs.com

 

구현

 

• jQuery 등 js라이브러리와 마찬가지로 홈페이지에서 제공하는 js 파일을 다운로드 하거나, src를 명시해줌으로써 사용 가능
• 라파엘홈 > 레퍼런스 사이트를 통해 배울 수 있다.
• http://raphaeljs.com/reference.html

 

 

원그리기

 

우선 간단하게 그림부터 그려봅니다.

1. paper를 만들어 준다. (영역)

 

var paper = Raphael(50,50,1000,1000);
//x축 y축에서 50px 떨어진 곳에 가로 세로 1000px인 영역

2. paper에 circle을 만들어 준다. (.circle)

 

var testCicle = paper.circle(200,200,100);
//paper에 원 구현 (x축,y축위치,반지름)

3. 그려준 원에 속성값을 지정한다. (.attr)

 

testCircle.attr("stroke","#f00")
//붉은색 선
 
testCircle.attr("stroke-width" , "5");
// 선 굵기 5px
 
testCircle.attr("fill" , "#ccc");
// 옅은 회색으로 채우기

선형 그래프

 

이제 본격적으로 그래프를 그려봅시다!

var paper = Raphael(50,50,1000,1000);
//x축 y축에서 50px 떨어진 곳에 가로 세로 1000px인 영역
 
var graph = paper.path("M 0 100,L50 50,L100 80,L150 20,L200 90,L250 40,L300 50")
//'.path'로 선형 그래프 구현, M은 시작위치, L은 위치에 라인을 그려줌
 
graph.attr({
    "stroke" : "red",
    "stroke-width" : 3
})
//붉은색 3px 선으로 구현

원형 그래프

 

var paper = Raphael(50,50,1000,1000);
//x축 y축에서 50px 떨어진 곳에 가로 세로 1000px인 영역
 
paper.piechart(300,300,150,[55,20,13,32,5,1,2])
//'.piechart'로 반지름 150px의 원형 그래프 구현

 

막대 그래프

 

말풍선 기능이 자체적으로 포함되어 있으니, 함께 구현해보겠습니다.

var paper = Raphael(50,50,1000,1000);
//x축 y축에서 50px 떨어진 곳에 가로 세로 1000px인 영역
 
paper.barchart(0,0,300,300,[26,40,47,60,20])
//가로세로 300px인 영역내에 막대그래프 구현
 
paper.flag(50,180,"$26",20);
//말풍선 표현 (x축,y축위치,값,기울기)
 
paper.popup(92,100,"$40","up");
paper.blob(160,76,"$47",60);
paper.blob(260,190,"$20",60);

 

 

정리

 

우선 가장 맘에 드는 부분은 크로스브라우징으로 스트레스를 받지 않아도 된다는것이다.  

js를 다뤄봤다면 쉽게 구현 가능한 부분이니, css로 구현 불가능한 그래프가 있다면 도전해보자.  

어도비 일러스트레이터를 통해 제작한 이미지를 svg 코드로 변환해 바로 사용할 수 있는것도 매력적!