jQuery Chart 심화 — 막대 · 버블 · 파이 + Native Form 완전 정리

 

 

Web Development · jqPlot Charts

jQuery Chart 심화
막대 2 · 버블 · 파이 · Native Form

가로 막대 + 다중 시리즈 / 4차원 버블 / 도넛 / 폼 스타일 끄기

시작 차트 한 단계 더 깊이

앞에서 본 단순 막대·선 그래프를 넘어 여러 시리즈, 가로 막대, 4차원 데이터(버블), 비율 시각화(파이/도넛)까지 다룬다. 마지막엔 jQuery Mobile의 자동 폼 스타일링을 모두 끄고 네이티브 HTML 폼으로 가는 방법까지 정리한다.

---

용어 핵심 키워드

multi series한 차트에 여러 데이터 시리즈

barDirectionvertical / horizontal

legend차트 범례 (시리즈 이름표)

placement범례 위치 — outside/inside

BubbleRenderer버블 차트 렌더러

bubbleAlpha버블 투명도 0~1

PieRenderer파이 차트 렌더러

showDataLabels조각 위 라벨 표시

sliceMargin파이 조각 사이 간격

fill: false파이를 도넛 형태로

data-role="none"jQuery Mobile 자동 스타일 끔

gridPadding차트 영역 안쪽 여백

---

1 가로 막대 + 다중 시리즈

var s1 = [20, 40, 60, 30]; // 남학생 var s2 = [50, 10, 30, 40]; // 여학생 var ticks = ['1학년', '2학년', '3학년', '4학년']; $.jqplot('chartdiv', [s1, s2], { // 시리즈 2개 title: '막대 그래프 예제2', seriesDefaults: { renderer: $.jqplot.BarRenderer, pointLabels: { show: true }, shadowAngle: 135, rendererOptions: { barDirection: 'horizontal' // 가로 막대 } }, series: [ { label: '남학생' }, // 첫 번째 시리즈 이름 { label: '여학생' } ], legend: { show: true, placement: 'outside' // 차트 바깥에 범례 }, axes: { yaxis: { // 가로 막대니까 카테고리는 y축 renderer: $.jqplot.CategoryAxisRenderer, ticks: ticks } } });

⚠ 가로 막대일 때 주의 — barDirection: 'horizontal'이면 카테고리 축이 y축으로 가야 한다. 세로 막대 코드 그대로 두면 라벨이 안 나온다.

가로 막대 + 2개 시리즈 (남학생/여학생)

막대 그래프 예제2

남학생

여학생

1학년

20

50

2학년

40

10

3학년

60

30

4학년

30

40

---

2 버블 차트 — 4차원 데이터를 한 그림에

버블 차트의 데이터는 [x, y, size, label] 형식. x, y 위치 + 크기 + 라벨 4가지 정보를 한 점에 담는다.

var arr = [ [11, 123, 1236, "수원"], // [x, y, 크기, 라벨] [45, 92, 1067, "인천"], [24, 104, 1176, "서울"], [50, 23, 610, "충청"], [18, 17, 539, "오산"], [ 7, 89, 864, "부천"], [ 2, 13, 1026, "동탄"] ]; $.jqplot('chartdiv', [arr], { title: '버블 그래프 예제', seriesDefaults: { renderer: $.jqplot.BubbleRenderer, rendererOptions: { bubbleAlpha: 0.6 // 60% 투명 — 겹쳐도 다 보임 }, shadow: true, shadowAlpha: 0.05 } });

버블 차트 — 도시별 4가지 지표를 한 차트로

버블 그래프 예제

수원

서울

인천

충청

오산

부천

동탄

💡 버블 차트가 좋은 경우 — 도시별 인구·면적·GDP·이름처럼 3+1 차원 데이터를 한 그림에 담고 싶을 때. 막대로 보면 4개의 별도 차트가 필요하다.

---

3 파이 차트 — 비율 시각화

$.jqplot('chartdiv', [[ ['서울', 18], ['경기', 14], ['강원', 3], ['기타', 7] ]], { title: '원형 그래프 예제', gridPadding: { top:25, bottom:38, left:0, right:0 }, seriesDefaults: { renderer: $.jqplot.PieRenderer, rendererOptions: { padding: 8, showDataLabels: true // 조각 위에 % 표시 } }, legend: { show: true, placement: 'outside', rendererOptions: { numberRows: 1 }, location: 's', // 'n'/'s'/'e'/'w' (북남동서) marginTop: '15px' } });

파이 차트 — [라벨, 값]의 배열

원형 그래프 예제

 

서울 (18)

경기 (14)

강원 (3)

기타 (7)

---

반응형

4 도넛 차트 — fill: false + sliceMargin

같은 파이 차트에 두 옵션만 추가하면 도넛이 된다. fill: false는 가운데를 비우고, sliceMargin은 조각 사이를 띄운다.

seriesDefaults: { renderer: $.jqplot.PieRenderer, shadow: true, rendererOptions: { fill: false, // 가운데 비움 → 도넛 sliceMargin: 4, // 조각 사이 4px 여백 showDataLabels: true } }

파이 (fill: true)

• 가운데가 꽉 찬 형태
• 전통적인 원그래프
• fill 기본값

도넛 (fill: false)

• 가운데가 빈 형태
• 모던한 디자인
• sliceMargin으로 조각 분리

---

5 legend — 범례 옵션

옵션	값	의미
show	true / false	범례 표시 여부
placement	inside / outside / outsideGrid	차트 안 / 바깥
location	n / s / e / w / ne / nw / se / sw	방위 (북남동서)
rendererOptions.numberRows	1, 2, ...	가로 줄 수
rendererOptions.numberColumns	1, 2, ...	세로 칸 수
marginTop	'15px' 등	차트와 범례 간격

---

6 Native Form — jQuery Mobile 스타일 모두 끄기

jQuery Mobile은 모든 폼 요소를 자동으로 모바일 친화적인 스타일로 바꾼다. 그런데 회원가입 같은 PC 위주 폼이거나 디자인을 직접 통제하고 싶을 땐 이 자동 변환이 방해된다. 모든 input에 data-role="none"을 주면 원래의 HTML 모양 그대로.

<form method="get" action="form.jsp"> <fieldset> <legend>필수 정보</legend> <table> <tr> <td><label for="s_id">학번</label></td> <td><input type="text" id="s_id" data-role="none"/></td> </tr> </table> </fieldset> <fieldset> <legend>부가 정보</legend> 가입날짜 : <input type="date" value="2014-11-11" data-role="none"/> 성별 : <select data-role="none"> ... </select> 학년 : <input type="radio" name="syear" data-role="none"> </fieldset> <input type="submit" value="확인" data-role="none"/> <input type="reset" value="취소" data-role="none"/> </form>

data-role="none"으로 모두 네이티브 HTML 모양

동아리 회원 가입

필수 정보

학번
성명

부가 정보

전화번호 :

가입날짜 :

성별 : 남자 여자

학년 : 1학년 2학년 3학년 4학년

나이 :

※ data-role="none"의 활용 패턴

• jQuery Mobile UI와 자체 디자인을 한 페이지에 섞어 쓰기
• 접근성·키보드 단축키를 표준 input으로 보장
• 외부 라이브러리(date picker 등)와 충돌 방지
• 전체에 일괄 적용하려면 jQM 초기화 시 $.mobile.page.prototype.options.degradeInputs.{type} 옵션 활용

---

7 차트 종류별 데이터 형식 비교

차트	데이터 형식	플러그인
선	[[3, 7, 9, 1]]	없음 (기본)
막대 (세로)	[[631, 217, 754]]	BarRenderer + CategoryAxisRenderer
막대 (가로)	같음 + barDirection	BarRenderer + CategoryAxisRenderer
파이	[[['서울',18],['경기',14]]]	PieRenderer
도넛	같음 + fill:false	PieRenderer
버블	[[[x,y,size,라벨],...]]	BubbleRenderer

---

8 자주 하는 실수

증상	원인	해결
가로 막대인데 라벨 안 나옴	xaxis에 카테고리 설정	yaxis에 CategoryAxisRenderer + ticks
여러 시리즈가 한 색상	jqPlot 자동 색상 무시	seriesColors 옵션으로 명시
버블이 다 가려짐	bubbleAlpha 1 (불투명)	0.5~0.7 권장
파이 라벨이 안 보임	showDataLabels 누락	rendererOptions에 추가
도넛이 안 됨	fill: true 또는 옵션 위치 잘못	rendererOptions 안에 fill: false
네이티브 폼인데 jQM 스타일 적용됨	일부 input에만 data-role 설정	모든 폼 요소에 빠짐없이

---

9 핵심 한 줄 요약

JQUERY CHART · NATIVE FORM

다중 시리즈$.jqplot('id', [s1, s2, s3], opts)

가로 막대rendererOptions.barDirection: 'horizontal' + yaxis 카테고리

범례legend: { show, placement, location }

버블 데이터[x, y, size, label]

파이 데이터[[라벨, 값], ...]

도넛PieRenderer + fill: false + sliceMargin

데이터 라벨showDataLabels: true

jQM 스타일 끄기data-role="none"

Tags

#jqPlot #barChart #horizontalBar #bubbleChart #pieChart #donutChart #legend #multiSeries #nativeForm #dataRoleNone #차트라이브러리 #티스토리

▼ 티스토리 태그 입력란 복사용

jqPlot, barChart, horizontalBar, bubbleChart, pieChart, donutChart, legend, multiSeries, nativeForm, dataRoleNone, 차트라이브러리, 티스토리