네이버 차트 라이브러리 Nwagon : Naver Chart Library Nwagon

"네이버 차트 라이브러리 Nwagon"

웹페이지에 차트를 하나 만들어야 하는 데... 원래쓰던 jqplot 를 쓰려다가, Nuli 에서 Nwagon 를 보고 한번 써보기로 했다.

탄탄한 회사의 라이브러리이니 더 신뢰가 간다는 건 개뻥이고... 스마트에디터 버그패치부터 실망했으니;

그냥 심심해서 ... 

사이트 : http://html.nhncorp.com/nwagon

다운로드하여 압축을 푸는 데... 파일이 적다고 당황하지 않고, 스크립트 파일을 호출하면    끝...

우선 소스를 살펴보니... 어떠한 공통 프레임워크(jQuery, 진도 등등)를 쓰지 않았다는 점이 장점인 것 같다.

그 만큼 가볍다는 것, 그리고 SVG 를 사용했다고 한다. SVG 는 2차 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식이다.

그래서 IE에서는 따로 SVG 플러그인을 설치해야 하는 불편함이 있다. 최신버전은 10과 11에서는 설치없이 될 것 같기도 하고...

SVG 위키백과 : http://ko.wikipedia.org/wiki/SVG

우리나라에선 Nwagon 을 사용하기는 아직 무리일 것 같다... 나혼자 산다... 면 모를까~

IE6 이상 버전에서 정상적으로 노출될 수 있게 VML 방식도 지원한다고 함... VML은 IE에서 2차 벡터 그래픽을 사용하기 위한 파일 포맷이다.

Nwagon.html 파일 소스를 참고하면 쉽게 차트를 만들 수 있다.

jqplot 와 비교했을 때 큰 차이점은 모르겠다. (성능제외) 

난 막대차트를 출력하기 위해 아래와 같이 작업을 하였다.

<div id="Nwagon0"></div>
<script>

	var options = {
		'legend': { names: [10,11]}, // 하단 바 이름을 출력할때, 데이터를 배열로 입력
		'dataset': {
			title: '시간별 클릭 통계', 
			values: [1,1], // 바를 표현하기 위한 값, 데이터를 배열로 입력
			colorset: ['#2BC8C9'], // 바 색깔 변경
			},
		'chartDiv': 'Nwagon0', // 차트를 표시할 엘리먼트
		'chartType': 'column',
		'chartSize': {width:800, height:300}, // 차트표 크기
		'leftOffsetValue': 30,
		'bottomOffsetValue':30, // 하단 값 표시 영역 크기
		'increment': 2
	};

	Nwagon.chart(options);

</script>

Syaku Blog by Seok Kyun. Choi. 최석균.