Chart Library Nwagon

네이버 서비스의 접근성 현황을 표현하기 위한 방법 모색 중, 지침별 수준을 수치화하는 폴리곤 모양의 레이다 차트 구현의 필요성을 기반으로 Nwagon 차트 개발은 시작되었습니다.
개발 전 고려된 무료 기반의 라이브러리들은 우리가 필요로 하는 필수 기능들을 표현한 사례가 없었고, 이를 위해 간단하면서도 사용하기 쉬운 자체 차트 라이브러리를 고민하였습니다.
차트의 이름은 차트 개발의 시발점이 된 Web Accessibility의 약자인 WA와 차트의 모티브가 된 폴리곤 의 gon을 조합한 wagon으로 네이버의 N과 결합하여 최종 이름을 Nwagon으로 명명되었습니다.

  • 자동완성되는 접근성 데이터

    추가적인 작업 없이 차트를 구현함과 동시에 자동으로
    접근성 보장된 데이터 생성

  • 빠른 속도

    SVG를 이용하여 랜더링 속도가 빠르며 DOM을 이용한
    event나 CSS Selector 적용 가능

  • 손쉬운 사용

    JSON 형태로, 라이브러리 사용시 한번의
    function call만으로 차트가 완성되는 용이성

  • 크로스브라우징

    IE6를 포함한 주요 브라우저 지원 가능
    (Chrome, Firefox, Safari, IE since v.6)
    추가적인 plug-in 없이 VML을 이용하여 IE 하위 버전 지원

  • 간결한 디자인

    컬러와 크기 등 조절의 간편함

How to use

Nwagon의 사용방법은 아주 간단합니다.
소스코드를 다운로드한 후 차트를 추가하고자 하는 페이지에 다음과 같이 CSS와 JS 파일을 포함시킨 후 나타내고 자 하는 정보를 차트 타입에 맞는 JSON 포맷에 맞춰주면 됩니다.

  1. <link rel="stylesheet" href="Nwagon.css" type="text/css">
  2. <script src="Nwagon.js"></script>

단, Nwagon이 SVG 기반으로 개발되었기 때문에 SVG에 대한 기본적인 이해도가 있다면 사용하기 훨씬 수월합니다.

SVG tutorial

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial새 창
http://www.w3schools.com/svg/새 창
다음 링크로 접속하면 Nwagon으로 구현한 파이 차트를 볼 수 있으며, 아래의 샘플 코드를 이용해 다른 타입의 차 트도 직접 구현해 보면서 Nwagon에 대한 이해도를 만들어도 좋습니다.
http://jsfiddle.net/dl_nuli/6aqdyjko새 창