jqPlot 가로 막대 차트 — barDirection, legend, 다중 시리즈 완전 정리

 

 

Web Development · jQuery + jqPlot

jqPlot 가로 막대 차트 —
barDirection · 다중 시리즈 · legend

남학생 / 여학생을 학년별로 가로로 비교

시작 오늘 분석할 코드

bar-chart1과 비교해 3가지가 새로 추가됐다. (1) 두 시리즈를 한 차트에, (2) 막대 방향을 가로로, (3) legend(범례)를 차트 옆에.

var s1 = [20, 40, 60, 30]; // 남학생 var s2 = [50, 10, 30, 40]; // 여학생 var ticks = ['1학년', '2학년', '3학년', '4학년']; $.jqplot('chartdiv', [s1, s2], { title: '막대 그래프 예제2', seriesDefaults: { renderer: $.jqplot.BarRenderer, pointLabels: { show: true }, shadowAngle: 135, rendererOptions: { barDirection: 'horizontal' } }, series: [ { label: '남학생' }, { label: '여학생' } ], legend: { show: true, placement: 'outside' }, axes: { yaxis: { renderer: $.jqplot.CategoryAxisRenderer, ticks: ticks } } });

실제 출력 미리보기

막대 그래프 예제2

1학년

20

50

2학년

40

10

3학년

60

30

4학년

30

40

 

남학생

 

여학생

---

용어 핵심 키워드

[s1, s2]두 시리즈 — 두 막대 그룹

barDirection'vertical'(기본) / 'horizontal'

series시리즈별 옵션 (label 포함)

legend범례 — 어떤 색이 어느 시리즈인지

placementlegend 위치 — outside / inside

CategoryAxis y가로 막대일 땐 y축에 카테고리

---

1 다중 시리즈 — 두 그룹 한 차트

데이터를 [s1, s2]처럼 2차원으로 주면 jqPlot은 두 시리즈를 같은 차트에 그린다. 각 시리즈는 자동으로 다른 색을 가진다.

// 한 시리즈 $.jqplot(id, [s1], opts); // 두 시리즈 (같은 차트) $.jqplot(id, [s1, s2], opts); // 세 시리즈도 가능 $.jqplot(id, [s1, s2, s3], opts);

---

2 barDirection: 'horizontal' — 막대 가로

기본은 세로 막대 (위로 솟음). barDirection: 'horizontal'은 막대를 옆으로 눕힌다. 카테고리 라벨이 길거나 항목이 많을 때 더 읽기 쉽다.

⚙ 축 위치도 바뀐다 — 가로 막대일 땐 카테고리가 y축에 온다. 그래서 본 코드의 axes도 yaxis에 CategoryAxisRenderer를 단다.

---

3 series — 시리즈별 옵션

seriesDefaults는 모든 시리즈에 공통되는 옵션이고, series: [...]는 시리즈마다 다르게 설정할 때 쓴다. 본 코드는 label만 다르게 준다.

series: [ { label: '남학생', color: '#5b8def' }, // 첫 시리즈 { label: '여학생', color: '#f08080' } // 두 번째 시리즈 ]

label은 legend(범례)에 표시되는 이름이다. 사용자가 어떤 색이 어떤 그룹인지 구분할 수 있게 해준다.

---

 

반응형

 

4 legend — 범례

두 시리즈가 있으면 색만 보고는 무엇이 무엇인지 모른다. legend는 색과 이름을 매핑해서 보여주는 작은 박스다.

• show: true — legend 표시
• placement: 'outside' — 차트 영역 밖에 (안 가림)
• placement: 'inside' — 차트 안에 겹쳐 (공간 절약)
• location: 's' — south(아래쪽). n/e/w/s 4방향

---

5 shadowAngle — 그림자 방향

shadowAngle: 135는 막대 뒤에 떨어지는 그림자의 각도를 정한다. 기본은 0~360 사이의 도(degree).

• 0° — 오른쪽으로 그림자
• 90° — 아래쪽으로 그림자
• 135° — 오른쪽-아래 대각선 (본 코드)
• 180° — 왼쪽으로 그림자

그림자는 입체감을 줘서 막대가 평면이 아니라 떠 있는 듯 보이게 한다.

---

6 가로 막대 vs 세로 막대 — 언제?

상황	추천
카테고리가 시간순 (월별, 분기별)	세로 — 시간 흐름 자연
카테고리 라벨이 김 ("자동차 정비공" 등)	가로 — y축에 적기 편함
항목이 많음 (10개 이상)	가로 — 세로 스크롤로 모두 표시
순위 비교 (top 5 등)	가로 — 길이 비교 직관적

---

7 자주 하는 실수

실수	증상	해결
가로 막대에 xaxis ticks	표시 안 됨	가로일 땐 yaxis ticks
series 길이 ≠ 데이터 시리즈 수	label 짝 안 맞음	series 배열 길이 맞추기
legend show: false	색만 있고 무엇인지 모름	다중 시리즈는 거의 항상 show: true
seriesDefaults vs series 혼용	설정 우선순위 헷갈림	공통은 Defaults, 개별은 series

---

8 현대식 (Chart.js 가로 막대)

new Chart(ctx, { type: 'bar', data: { labels: ['1학년','2학년','3학년','4학년'], datasets: [ { label: '남학생', data: [20,40,60,30] }, { label: '여학생', data: [50,10,30,40] } ] }, options: { indexAxis: 'y' } // 가로 막대 });

---

핵심 한 줄 요약

[s1, s2]다중 시리즈 — 한 차트에 두 그룹

barDirection: 'horizontal'막대를 옆으로 눕히기

series: [{label:...}]시리즈별 이름·색

legend.placementoutside / inside / location

가로 시 yaxis ticks카테고리 축이 y로 이동

shadowAngle그림자 각도 — 입체감

Tags

#jqPlot #가로막대차트 #barDirection #horizontal #legend #시리즈 #BarRenderer #shadowAngle #jQuery #차트 #데이터시각화 #JS #CSS #HTML #웹개발 #티스토리

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

jqPlot, 가로막대차트, barDirection, horizontal, legend, 시리즈, BarRenderer, shadowAngle, jQuery, 차트, 데이터시각화, JS, CSS, HTML, 웹개발, 티스토리