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

숫자를 비율로 표시해서 애니메이션이 되는 원그래프, 파이 그래프 형태의 다양한 샘플을 보실수 있습니다. 다운로드 받은 파일의 압축을 풀면 나오는 docs/index.html 파일을 웹브라우저로 열어서 보면 샘플을 확인하는게 가능합니다. 위 그림 보다 더 많은 예제를 확인 해볼수 있습니다. 입력박스의 숫자를 조절해보면 그래프가 변경되는게 애니메이션으로 진행이 되네요. 일반 자바스크립트를 이용해도 작동하고, Jquery 를 이용해도 작동하도록 되어 있네요. 출처는https://www.jqueryscript.net/loading/percentage-circle-progress.html 입니다

웹페이지에 여러가지 유형의 그래프를 생성해내는 자바스크립트 플러그인입니다. 다운로드 받은 파일의 압축을 풀면 아래 그림과 같은 폴더 구조가 나옵니다. examples 폴더 안에는 위 그림과 같이 각 그래프를 위한 예제들이 있습니다. 각 예제폴더마다 html 문서가 하나씩 있고 그 문서를 웹브라우저로 열어서 보면 어떤 그래프인지는 아래 그림처럼 같이 확인이 됩니다. 그래프를 위한 데이터들은 정리해서 아래 그림 처럼 JSON 포맷으로 작성하면 되나 보네요. 데모는 http://mbostock.github.io/protovis/ex/ 여러가지 그래프형태를 볼수 있으며 하나씩 클릭해보면 http://mbostock.github.io/protovis/ex/bullet.html 어떤 그래프이며, 어떤 소스코드로 작..

웹페이지에 심플한모양의 그래프를 쉽게 출력할 수 있는 Jquery 플러그인입니다. 다운로드 받은 파일의 압축을 풀고 index.html 을 웹브라우저로 열어서 보면 위와 같은 그래프가 표시되는게 확인이 가능합니다. index.html 파일의 소스코드를 보면 그래프를 구성하는 라벨, 그래프의 높이, 바의 굵기, 바의 색상 등을 javascript 소스코드내의 텍스트를 조절해서 변경하는게 가능합니다. 출처는 http://xaviershay.github.io/tufte-graph/ 입니다.

도넛형태부터 라인,바,막대그래프,차트형등 다양한 그래프를 아이콘처럼 작은 사이즈로 보여주는 소스로 작은 항목별로 그래프를 사용할 수 있습니다. 또한 수치를 늘리면 해당 수치만큼 그래프가 변경되는 이벤트도 구현이 가능합니다. 자세한 사용법은 아래의 링크를 통해 확인해보시기 바랍니다. http://benpickles.github.io/peity/