일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- #업종별
- 쇼핑몰
- 웹솔루션
- 홈페이지
- #솔루션
- php
- 솔루션
- #이미지
- #뉴스
- #CSS
- jquery
- #해피CGI
- CSS
- #동영상
- javascript
- #jQuery
- happycgi
- CGIMALL
- #웹솔루션
- 해피CGI
- 게시판
- 홈페이지제작
- #홈페이지제작
- #쇼핑몰
- #happycgi
- #홈페이지
- 해피씨지아이
- #image
- 사이트제작
- #cgimall
- Today
- Total
웹솔루션개발 22년 노하우! 해피CGI의 모든것
[해피CGI][cgimall] Horizontal Bar Chart Plugin - jQuery Devstratum JQP Graph 본문
웹프로그램밍 자료실/JAVA 자료
[해피CGI][cgimall] Horizontal Bar Chart Plugin - jQuery Devstratum JQP Graph
해피CGI윤실장 2020. 2. 28. 09:07가로 막대 그래프를 손쉽게 웹페이지에 표시할수 있는 jQuery 플러그인입니다.
다운로드 받은 파일의 압축을 해제하면 생기능
demo/index.html 파일을 웹브라우저로 열어서 보면 데모를 확인하는게 가능합니다.
위 그림은 가장 심플한 예제입니다.
소스코드를 열어보면
위 그림 처럼
제목, 단위, 세부설명문구, 각 그래프의 레이블, 값 정도만 설정하면
첫번째 그림 처럼 화면에 막대 그래피를 생성할수 있는 예제입니다.
몇가지 옵션들을 이용해서,
막대그래프를 위 그림 처럼 줄로 구분해서 나누는게 가능합니다.
한개의 그래프를 위한 예제 소스코드인데,
그래프가 1개일때 보다는 약간 복잡하네요.
또 다른 예제는
막대 그래프를 줄로 구분하는게 아닌 한줄로 구분하는 예제도 있네요.
예제 소스코드에선,
그래프가 2개일 때와 큰 차이는 없어 보이는데요.
각 그래프의 제목과, 색상, 값을 설정하는 코드가 2개에서,
3개로 늘어난 것과, 최대값과, 최대구분값 정도를 추가했는게 확인이 되네요.
웹페이지에
간단하게 막대그래프를 표시해야할때 사용하기가 간편할것 같네요.
'웹프로그램밍 자료실 > JAVA 자료' 카테고리의 다른 글
[해피CGI][cgimall] 부트스트랩을 이용한 4단계 드랍메뉴 (0) | 2020.03.05 |
---|---|
[해피CGI][cgimall] jQuery 를 이용한 image zoom in, zoom out (0) | 2020.03.04 |
[해피CGI][cgimall] 텍스트 입력 및 삭제 애니메이션 - animateTyping.js (0) | 2020.02.26 |
[해피CGI][cgimall] 터치식 360도 제품보기 Jquery 플러그인 - 360 ImageRotate (0) | 2020.02.25 |
[해피CGI][cgimall] [jquery] Poppa : Lightweight jQuery Validation Plugin (0) | 2020.02.18 |
Comments