jquery 차트 플러그인 추천

웹사이트를 개발하게 되면 각종 숫자나 통계자료를 그래프 형태로 나타내야 할 때가 있습니다. 이럴 때는 jquery 차트 라이브러리를 사용해야 하는데 그중에 좋다고 생각했던 하이차트를 소개해 드립니다.

jQuery 및 Javascript와 HTML5를 사용하는 하이차트는 JSP 상에서 숫자로 표현된 수치를 다양한 형태의 그래프로 나타내는 자바스크립트 라이브러리입니다.

해당 라이브러리를 다운 받으려면 하이차트 공식사이트에서 파일을 받으실 수 있습니다.

하이차트 홈페이지 상단에 각종 메뉴가 있는데요.

메뉴에서 DEMO에서 Hightcharts demos를 누르면 여러 가지 형태의 차트를 만나볼 수 있습니다.

1. 차트 예제

다음과 같이 바형, 기본형, 막대형, 파이형, 라인형 등등의 예제가 마련되어 있습니다.

또한, 예제를 살펴보면서 자신만의 데이터로 바꾸어 출력 형태를 바꿀 수 있습니다.

이 하이차트를 다운받아서 사용하려면 라이브러리를 설치해야 하는데요.

SUPPORT에서 Download를 눌러 파일을 받아 줍니다.

압축 파일을 풀고 examples 폴더를 보시면 많은 예제가 있는데요.

해당 폴더에 있는 html 코드를 복사해서 jsp 페이지에 복사하시면 됩니다.

그럼 위와 같이 내 페이지에서 차트를 보실 수 있습니다.

예제 소스를 그대로 복사해 사용할 경우 차트가 동작하는데 문제가 없으나 js 파일등의 경로는 프로젝트의 내부에 두어 연동시키는 것이 좋습니다. (소스코드는 하이차트 웹사이트의 js파일 사용)

다음 시간에는 레이어팝업과 DB에서 가져온 데이터를 가지고 차트를 꾸며보는 예제를 만들어 보도록 하겠습니다.