jqPlot 파이 차트 — PieRenderer, legend 완전 정리

 

 

Web Development · jQuery + jqPlot

jqPlot 파이 차트 —
PieRenderer · showDataLabels · legend

전체 100%에서 항목별 비중을 한 원에 표시

시작 오늘 분석할 코드

지역별 인원수를 원형 그래프로 표시한다. 각 조각의 크기로 비중을 보여주고, 라벨/legend로 어느 지역인지 식별한다.

var plot1 = $.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', marginTop: '15px' } } );

실제 출력 미리보기

원형 그래프 예제

43% 33% 7% 17%

 

서울

 

경기

 

강원

 

기타

---

용어 핵심 키워드

PieRenderer원형 차트 렌더러

[label, value] 쌍조각 하나 — 이름 + 크기

showDataLabels조각마다 값/% 표시

padding조각 사이 간격

gridPadding차트 영역 안쪽 여백

legend.location 's'south — 차트 아래쪽 범례

---

1 데이터 형식 — 라벨 + 값 쌍

다른 차트와 데이터 형식이 다르다. 파이는 [라벨, 값] 쌍의 배열이다.

// 한 시리즈, 4개 조각 [[['서울',18], ['경기',14], ['강원',3], ['기타',7]]] // 외측 [...] = 시리즈 묶음 (파이는 보통 1개) // 내측 [...] = 한 시리즈의 조각들 // [['이름', 값]] = 각 조각 — 이름과 크기

⚙ 왜 [...] 세 겹? — jqPlot의 일관성 때문. 다른 차트는 [[3,7,9],[5,2,4]]로 시리즈가 여러 개일 수 있다. 파이도 같은 구조라 한 시리즈여도 [...]로 한 번 더 감싼다.

---

2 자동 % 계산

본 코드 데이터는 18, 14, 3, 7 (총 42). jqPlot은 자동으로 비율을 계산해서 조각 크기에 반영한다 — 18은 약 43%, 14는 33%, 3은 7%, 7은 17%.

showDataLabels: true는 이 계산된 % 또는 원래 값을 조각 위에 표시한다. 사용자는 정확한 비율을 한눈에 볼 수 있다.

---

3 padding — 조각 사이 간격

padding: 8은 각 조각의 가장자리 사이에 8px의 빈 공간을 둔다. 조각이 분리된 듯 보여 가독성이 좋다.

• padding: 0 — 조각이 딱 붙어 매끈한 원
• padding: 8 — 조금 떨어져 — 본 코드
• sliceMargin 옵션이 비슷한 효과 (다른 변형)

---

 

반응형

 

4 gridPadding — 외부 여백

gridPadding은 차트 영역 안쪽의 여백이다. 제목과 legend가 잘리지 않도록 미리 공간을 확보한다.

• top: 25 — 제목 공간 (위)
• bottom: 38 — legend 공간 (아래, 'south')
• left/right: 0 — 좌우는 꽉 채움

⚠ 너무 작으면? — legend가 잘리거나 제목이 차트와 겹친다. 위치(location)에 따라 적절히 조정.

---

5 legend 옵션 자세히

옵션	의미
show: true	legend 표시 켜기
placement: 'outside'	차트 영역 밖에 (안 가림)
location: 's'	south — 아래쪽 (n/e/w/s)
numberRows: 1	모든 항목을 한 줄로 나란히
marginTop: '15px'	차트와 legend 사이 간격

---

6 파이 차트는 언제?

• 전체에 대한 비중이 의미 있을 때 (시장 점유율, 예산 분배)
• 5개 이하의 항목 — 더 많으면 가독성 ↓
• 크기 차이가 명확할 때 — 비슷비슷하면 비교 어려움

⚠ 파이 차트는 비판받는다 — 인간 눈이 각도를 정확히 비교 못 한다. 막대 차트가 더 정확하다는 의견이 많다. 그래도 직관적이고 친숙해서 보고서에 자주 쓰임.

---

7 자주 하는 실수

실수	증상	해결
데이터를 [[label, value],...] 평탄하게	차트 안 그려짐	[ ]로 한 번 더 감싸기
음수 값 포함	잘못된 비율 표시	파이는 양수만
showDataLabels 누락	조각만 색깔 — 값 모름	true로 켜기
gridPadding 너무 작음	제목/legend 잘림	적절히 늘리기
항목 7개 이상	조각 너무 작아 안 보임	"기타"로 묶기

---

8 현대식 (Chart.js pie)

new Chart(ctx, { type: 'pie', data: { labels: ['서울','경기','강원','기타'], datasets: [{ data: [18,14,3,7] }] } });

---

핵심 한 줄 요약

PieRenderer원형 차트 렌더러

[[label, value],...]데이터 — 라벨 + 값 쌍

showDataLabels조각 위 값/% 표시

padding조각 사이 간격

gridPadding제목/legend 영역 확보

legend.location='s'아래쪽 한 줄로

자동 % 계산합산 후 비율 표시

Tags

#jqPlot #파이차트 #PieRenderer #showDataLabels #padding #gridPadding #legend #jQuery #차트 #데이터시각화 #비율 #JS #CSS #HTML #웹개발 #티스토리

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

jqPlot, 파이차트, PieRenderer, showDataLabels, padding, gridPadding, legend, jQuery, 차트, 데이터시각화, 비율, JS, CSS, HTML, 웹개발, 티스토리