jqPlot 도넛 파이 차트 — fill:false, sliceMargin 완전 정리

 

 

Web Development · jQuery + jqPlot

jqPlot 도넛 파이 차트 —
fill:false · sliceMargin 완전 정리

조각 분리 + 외곽선만 — 가벼운 시각 인상

시작 오늘 분석할 코드

pie-chart.html과 같은 데이터인데 두 가지 옵션이 다르다 — fill: false(외곽선만)와 sliceMargin: 4(조각이 떨어짐). 결과는 채워지지 않은 도넛 같은 모양.

$.jqplot('chartdiv', [[['서울',18],['경기',14],['강원',3],['기타',7]]], { title: '원형 그래프 예제', gridPadding: { top: 25, bottom: 38, left: 0, right: 0 }, seriesDefaults: { renderer: $.jqplot.PieRenderer, shadow: true, rendererOptions: { fill: false, // ⭐ 채우지 않음 (외곽선만) sliceMargin: 4, // ⭐ 조각 사이 4px 분리 showDataLabels: true } }, legend: { show: true, placement: 'outside', rendererOptions: { numberRows: 1 }, location: 's', marginTop: '15px' } } );

실제 출력 미리보기

원형 그래프 예제

43% 33% 7% 17%

 

서울

 

경기

 

강원

 

기타

---

용어 핵심 키워드

filltrue=조각 채움 / false=외곽선만

sliceMargin조각 사이 간격 (px)

showDataLabels조각 위 값 표시 (기본 그대로)

shadow: true그림자 (외곽선에도 적용)

"채워진" 효과색은 보이되 안쪽이 비어있음

시각 무게기본 파이보다 가볍고 모던

---

1 pie-chart와의 차이 한눈에

pie-chart (기본)

 

pie-chart2 (도넛)

 

• 왼쪽 — 가운데가 꽉 찬 표준 파이
• 오른쪽 — 가운데 비어 있는 도넛 + 조각 분리

---

2 fill: false — 외곽선만

기본은 fill: true로 조각 안쪽까지 색을 채운다. fill: false는 가장자리 둘레만 그림을 그린다.

• 가운데가 비어 도넛 모양이 됨
• 색이 옅어 시각적 인상이 가벼움
• 대시보드에서 KPI 옆에 작은 차트로 자주 사용

💡 모던한 인상 — 채워진 파이는 1990년대 인상, 도넛은 모던. 디자인 트렌드도 도넛 쪽이다.

---

3 sliceMargin — 조각 분리

sliceMargin: 4는 조각 사이에 4px 빈 공간을 둔다. 분리된 조각이 정확히 어디부터 어디까지인지 명확해진다.

• 0 — 조각이 딱 붙음 (이전 차트의 padding과 차이)
• 2~4 — 가장 흔한 값, 자연스러움
• 10+ — 매우 분리, 비율 인식이 어려워짐

⚠ padding과 sliceMargin 차이 — padding은 조각 가장자리의 여백, sliceMargin은 조각 사이의 간격. 비슷해 보이지만 jqPlot 내부에서 다르게 처리한다.

---

 

반응형

 

4 어떤 데이터에 어울리는가

• 대시보드 KPI — 작게 표시되어도 비율 파악 용이
• 진행률 — 가운데 빈 공간에 % 큰 글씨
• 모던 보고서 — 가벼운 인상이 표/숫자와 잘 어울림

전통적인 발표·인쇄물에는 채워진 파이가 더 적합할 수 있다. 도넛은 디지털 친화적.

---

5 가운데 빈 공간 활용

도넛 모양의 큰 장점은 가운데에 텍스트를 둘 수 있다는 것이다. 핵심 숫자나 라벨을 표시한다.

// HTML — 차트 div 위에 absolute로 텍스트 겹치기 <div class="chart-wrap"> <div id="chartdiv"></div> <div class="chart-center">총 42명</div> </div>

jqPlot은 직접 가운데 라벨 옵션이 없어 HTML로 위에 덮어쓰는 방식이다.

---

6 자주 하는 실수

실수	증상	해결
fill: false에 옅은 색	외곽선이 거의 안 보임	진한 색 또는 굵기 ↑
sliceMargin이 너무 큼	조각이 점점이 흩어진 인상	2~6 권장
showDataLabels와 fill:false 함께	라벨이 흰 배경에 떠 가독성 저하	라벨 색 명시 또는 다른 위치
shadow가 외곽선만 따라감	의도치 않은 모양	shadow: false 또는 받아들이기

---

7 현대식 (Chart.js doughnut)

Chart.js는 도넛 차트가 별도 type으로 있어 더 깔끔하다.

new Chart(ctx, { type: 'doughnut', // pie 대신 doughnut data: { labels: ['서울','경기','강원','기타'], datasets: [{ data: [18,14,3,7] }] }, options: { cutout: '60%' // 가운데 구멍 크기 } });

---

핵심 한 줄 요약

fill: false조각 외곽선만 — 도넛 효과

sliceMargin: 4조각 사이 4px 분리

시각 무게기본 파이보다 가볍고 모던

가운데 활용총합/KPI 큰 글씨로 표시

현대식Chart.js type:'doughnut' + cutout

Tags

#jqPlot #도넛차트 #doughnut #fill #sliceMargin #PieRenderer #jQuery #차트 #데이터시각화 #KPI #JS #CSS #HTML #웹개발 #티스토리

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

jqPlot, 도넛차트, doughnut, fill, sliceMargin, PieRenderer, jQuery, 차트, 데이터시각화, KPI, JS, CSS, HTML, 웹개발, 티스토리