웹솔루션개발 25년 노하우! 해피CGI의 모든것

현재 4.4.1 버전으로 지속적으로 업데이트 되고 있는 차트 JS 입니다. https://www.chartjs.org/docs/latest/getting-started/ 위 링크의 스타트 설명을 따라 하다보면 쉽게 적용이 가능합니다. 다양한 차트와 여러 애니메이션 효과도 줄 수 있으니 차트가 필요하시다면 사용을 추천 드립니다.

Line, Area, Bar 등의 다양한 차트를 지원하는 차트를 손쉽게 구현 할 수 있는 TOAST UI Chart 입니다. https://ui.toast.com/tui-chart 지원되는 차트는 아래 이미지를 참고 하시면 되겠습니다. 한국어 메뉴얼은 아래 페이지를 통해 접속 하시면 되고, 각 차트별로 메뉴얼을 볼 수 있습니다. https://github.com/nhn/tui.chart/blob/main/docs/ko/README.md 최신버전 및 버전별 소스 다운로드는 https://github.com/nhn/tui.chart/releases 페이지에서 제공 됩니다.

다양한 차트 그래프를 출력 가능한 javascript 라이브러리 vis.js 입니다. 네트워크, 타임라인, 3d, 2d 차트등을 지원합니다. https://visjs.org/ 페이지로 접속시 아래와 같이 각 차트의 문서 및 데모를 열람이 가능 합니다. 샘플보기 페이지로 이동시 쉽게 샘플을 볼 수 있도록 미리보기 기능이 제공 되며, 클릭하여 실제 샘플을 볼 수 있습니다. https://visjs.github.io/vis-network/examples/ (네트워크 그래프 데모)

반응형으로 구현된 차트 위젯 입니다. 차트 페이지만 개별로 구현하시길 원하시는 경우 사용하시면 좋을듯 합니다. 라이센스는 MIT 라이센스 입니다. 압축 파일을 해제하면 index.html 파일이 있습니다. 해당 파일을 브라우저에서 호출하면 샘플 확인이 가능 합니다. 차트의 데이터는 동일 경로의 script.js 에 선언되어 있습니다. 차트 데이터는 아래와 같은 방식으로 선언합니다. 한가지 아쉬운점은 기능에 대한 옵션 안내 또는 메뉴얼이 없네요.

* circleChart CircleChart는 간단한 원형 차트를 만드는 데 유용한 jQuery 플러그인입니다. * License MIT License * 사용방법 첨부된 압축파일을 다운받아 압축해제후 원하는 웹루트 디렉터리에 업로드 합니다 그후 원형차트 그래프가 출력될 div 영역 선언과 스크립트를 실행할 수 있도록 코드를 작성합니다 스크립트내에 사용할 수 있는 각각의 옵션은 첨부된 압축파일안에 있는 README.md 에서 확인이 가능합니다 위의 코드에 대한 출력결과는 아래와 같습니다

* Chart.js 는 디자이너 및 개발자를 위한 차트이며 단순하면서도 유연한 자바 스크립트가 특징입니다 * 라이센스 - MIT License * 기능 - 혼합차트, 믹스앤 매치바, 라인차트 데이터세트 사이에 시작적으로 명확하게 구분가능 - 로그 및 사용자 정의 날짜 시간 데이터제공 - 8가지 차트유형 제공 - HTML5 캔버스 * 사용방법 첨부되어있는 압축파일을 받아 압축을 풀고 samples 폴더에 있는 다양한 유형의 html파일(차트)를 브라우저에서 확인하고 응용할 수 있게 소스가 오픈되어있습니다 아래는 bar 형태의 차트샘플입니다 각 차트에 대한 설명이나 샘플, 옵션 설정에 관련된 내용은 아래의 링크를 클릭 하여 확인하실 수 있습니다 http://www.chartjs.org/docs/#line-c..

pChart 사진을 만들기 위해 GD 라이브러리를 사용합니다. csv 나 DB를 연동하여 사용할 수도 있습니다. http://pchart.sourceforge.net/documentation.php 위 url 에 자세한 내용들이 나와 있으니 pChart를 이용하실때 참고하시면 됩니다. 압축을 받아 풀어보시면 여러가지 샘플페이지 들이 있습니다. 다만, 샘플파일들은 바로 웹으로 보여주기 않고 그냥 이미지 파일만 생성하니 img src 태그로 넣어 확인하시며 됩니다.

위와 같이 차트 타입, 높이, 그리고 데이터를 넣으면 위와 같이 차트가 나오는 요긴한 플러그인 입니다. 설치 방법은 파일내에 README.md. 를 읽어보시면 상세히 나와 있습니다.