javaScript 벡터 차트 라이브러리-gRaphael은 몇 줄의 코드를 사용하여 아름다운 막대 차트/원형 차트/포인트 차트/곡선 차트

javaScript 벡터 차트 라이브러리-gRaphael은 몇 줄의 코드를 사용하여 아름다운 막대 차트/원형 차트/포인트 차트/곡선 차트_javascript 기술을 구현합니다.

WBOY

풀어 주다： 2016-05-16 17:44:10

원래의

1750명이 탐색했습니다.

gRaphael 은 강력한 Raphael 벡터 그래픽 라이브러리를 기반으로 개발자가 웹 페이지에 다양하고 아름다운 차트를 그릴 수 있도록 지원하는 Javascript 라이브러리입니다. 아름다운 막대 차트, 원형 차트, 점 도표 및 곡선 차트를 만들려면 몇 줄의 간단한 코드만 작성하면 됩니다.

gRaphael은 그래픽 생성을 위한 기반으로 SVG W3C 권장 표준과 VML을 사용합니다. 현재 지원되는 브라우저는 Firefox 3.0, Safari 3.0입니다. , Chrome 5.0, Opera 9.5 및 Internet Explorer 6.0.

사용법: 페이지에 raphael.js, g.raphael.js 파일을 도입하고 필요에 따라 g.line.js(곡선 차트), g.bar.js(막대 차트)를 도입합니다.) , g.dot.js(도트 차트) 및 g.pie.js(원형 차트) 파일을 선택한 다음 제공된 방법을 사용하여 원하는 아름다운 차트를 만듭니다. 다음은 두 가지 간단한 예입니다.

정적 원형 차트 만들기

두 줄의 코드만 필요합니다. 샘플 코드:

코드 복사 코드는 다음과 같습니다.

r.piechart(320, 240, 150, [55, 20, 13, 32, 5, 1, 2, 10]);

효과 시연 및 전체 소스 코드 다운로드
:

소스 코드 다운로드

대화형 원형 차트 만들기
호버 및 클릭 이벤트와 애니메이션 방법을 결합하면 아름다운 대화형 원형 차트를 만들 수 있습니다. :

코드 복사

코드는 다음과 같습니다. // 좌표(10,50) ) 640 × 480 캔버스 생성 var r = Raphael(10, 50, 640, 480)

// 중심 좌표(320, 240), 반경 100 및 데이터 [55, 20, 13, 32, 5, 1, 2, 10] 원형 차트

pie = r.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2, 10], { 
legend: ["%%.%% - Enterprise Users", "IE Users"], 
legendpos: "west", 
href: ["http://raphaeljs.com", " http ://g.raphaeljs.com"] 
}); 
// 좌표(320, 100)에 텍스트 그리기 
r.text(320, 100, "Interactive Pie Chart").attr ( { 
font: "20px sans-serif" 
}); 
// 원형 차트에 호버 이벤트 추가 
pie.hover(function() { 
this.sector.stop( ); 
this.sector.scale(1.1, 1.1, this.cx, this.cy) 

if(this.label) { 
this.label[0].stop() ; 
this.label[0].attr({ 
r: 7.5 
}) 
this.label[1].attr({ 
"font-weight": 800 
}); 
} 
}, function() { 
this.sector.animate({ 
transform: 's1 1 ' this.cx ' ' this.cy 
}, 500, "bounce"); 
// 애니메이션 효과 추가
if(this.label) { 
this.label[0].animate({ 
r: 5 
}, 500 , "바운스"); 
this.label[1].attr({ 
"font-weight": 400 
}) 




효과 시연 및 전체 소스 코드 다운로드
: