jqPlot 막대 차트 — BarRenderer 완전 정리

 

 

Web Development · jQuery + jqPlot

jqPlot 막대 차트 —
BarRenderer · CategoryAxis 완전 정리

jQuery 차트 플러그인으로 분기별 매출 시각화

시작 오늘 분석할 코드

4분기 매출 데이터를 막대 그래프로 그리는 jqPlot 코드다. 차트가 그려지려면 (1) 라이브러리 여러 개를 순서대로 로드하고 (2) $.jqplot()으로 차트 옵션을 설정해야 한다.

<!-- 1. 필요한 플러그인들 --> <script src="jqplot/jquery.jqplot.min.js"></script> <script src="jqplot/plugins/jqplot.barRenderer.min.js"></script> <script src="jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script> <script src="jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script> <script src="jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script> <script src="jqplot/plugins/jqplot.pointLabels.min.js"></script> // 2. 차트 그리기 $(document).ready(function() { var s1 = [631, 217, 754, 1008]; var ticks = ['1분기', '2분기', '3분기', '4분기']; $.jqplot('chartdiv', [s1], { title: '막대 그래프 예제1', seriesDefaults: { renderer: $.jqplot.BarRenderer, pointLabels: { show: true } }, axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer, ticks: ticks, label: '분기' }, yaxis: { label: '매출액' } } }); });

실제 출력 미리보기

막대 그래프 예제1

매출액

631

217

754

1008

1분기

2분기

3분기

4분기

분기

---

용어 핵심 키워드

$.jqplot()차트 그리기 — id, 데이터, 옵션 3개 인자

renderer차트 모양 결정 — Bar/Line/Pie 등

CategoryAxisx축에 텍스트 카테고리 사용

pointLabels막대 위에 숫자값 표시

ticks축에 표시할 텍스트 배열

seriesDefaults모든 데이터 시리즈에 공통 옵션

---

1 jqPlot이란?

jqPlot은 jQuery 기반의 차트 라이브러리다. 막대·선·원·산점도 같은 흔한 그래프를 짧은 코드로 그릴 수 있다.

• HTML <canvas>를 이용해 그림
• 차트 종류는 plugin으로 추가 — 필요한 것만 로드
• 배포는 EOL 상태 — 신규 프로젝트엔 Chart.js, ECharts 같은 후속자 권장

---

2 $.jqplot() — 3개 인자

jqPlot의 핵심 함수다. (1) div의 id, (2) 데이터, (3) 옵션 세 개를 넣는다.

$.jqplot( 'chartdiv', // (1) 그릴 div의 id [s1], // (2) 데이터 — [[시리즈1], [시리즈2], ...] { title: ..., axes: ..., seriesDefaults: ... } // (3) 옵션 );

⚙ 왜 [s1]? — jqPlot은 여러 시리즈를 한 차트에 같이 그릴 수 있다. 그래서 2차원 배열로 받는다. 한 시리즈여도 [s1]로 감싼다.

---

3 renderer — 차트 종류 결정

기본은 선 그래프(line). 막대로 그리려면 BarRenderer를 명시한다.

seriesDefaults: { renderer: $.jqplot.BarRenderer, // 막대 pointLabels: { show: true } // 막대 위 숫자 }

• BarRenderer — 막대 (이번 코드)
• PieRenderer — 원형
• BubbleRenderer — 버블
• (기본) — 선 그래프

---

 

반응형

 

4 CategoryAxisRenderer — x축에 텍스트

일반 그래프의 x축은 숫자 (1, 2, 3...). 본 코드는 "1분기, 2분기..."처럼 카테고리 텍스트가 필요하다. CategoryAxisRenderer 플러그인을 쓰고 ticks로 텍스트 배열을 준다.

xaxis: { renderer: $.jqplot.CategoryAxisRenderer, ticks: ['1분기', '2분기', '3분기', '4분기'], label: '분기' }

---

5 플러그인 로딩 순서

jqPlot은 모듈식이다 — 사용할 기능마다 별도 .js 파일을 로드해야 한다. 본 코드의 5개 플러그인:

플러그인	역할
jquery.jqplot.min.js	코어 — 반드시 첫 번째
jqplot.barRenderer.min.js	막대 그래프 그리기
jqplot.categoryAxisRenderer.min.js	x축 텍스트 카테고리
jqplot.canvasTextRenderer.min.js	축 라벨을 캔버스 텍스트로
jqplot.canvasAxisLabelRenderer.min.js	회전된 라벨 (y축 라벨 등)
jqplot.pointLabels.min.js	막대 위 숫자값

⚠ 로딩 순서 중요 — 코어가 먼저, 그 다음 플러그인. jQuery → jqPlot → 플러그인 순.

---

6 div 크기 명시 필수

본 코드의 <div id="chartdiv" style="height: 400px; width: 300px;">처럼 차트 그릴 영역의 크기를 명시해야 한다. jqPlot은 div의 크기를 캔버스로 만든다.

⚠ 크기 안 주면? — 0×0 캔버스가 만들어져 차트가 안 보인다. width/height는 픽셀로.

---

7 자주 하는 실수

실수	증상	해결
플러그인 누락	renderer is undefined 에러	필요한 .js 모두 로드
div 크기 미지정	차트 안 보임	width/height 픽셀로
jQuery 미로드	$ 정의 안 됨 에러	jQuery → jqPlot 순서
데이터를 [s1] 아닌 s1로	차트 그려지지 않음	2차원 배열로 감싸기
ticks 개수 ≠ 데이터 개수	축 라벨이 어긋남	둘의 길이를 맞춤

---

8 현대식 대안

jqPlot은 EOL이라 신규 프로젝트엔 권장하지 않는다. 표준 대안:

• Chart.js — 가장 흔히 쓰임, 가볍고 직관적
• ECharts — 풍부한 차트 종류, 한국어 지원 좋음
• D3.js — 가장 강력하지만 학습 곡선 가파름
• Recharts / Victory — React 환경

// Chart.js 예시 — 같은 막대 차트 new Chart(ctx, { type: 'bar', data: { labels: ['1분기', '2분기', '3분기', '4분기'], datasets: [{ data: [631, 217, 754, 1008] }] } });

---

핵심 한 줄 요약

$.jqplot(id, [데이터], 옵션)차트 그리기 함수

BarRenderer막대 그래프 모드

CategoryAxisRendererx축에 텍스트 카테고리

ticks: [...]축에 표시할 라벨 배열

pointLabels.show막대 위 숫자 표시

div 크기 명시width/height 픽셀 필수

현대식Chart.js / ECharts

Tags

#jqPlot #막대차트 #BarRenderer #CategoryAxisRenderer #ticks #pointLabels #jQuery #차트 #데이터시각화 #Chart-js #ECharts #JS #CSS #HTML #웹개발 #티스토리

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

jqPlot, 막대차트, BarRenderer, CategoryAxisRenderer, ticks, pointLabels, jQuery, 차트, 데이터시각화, Chart-js, ECharts, JS, CSS, HTML, 웹개발, 티스토리