jqPlot 선 차트 — 기본 line chart 완전 정리

 

 

Web Development · jQuery + jqPlot

jqPlot 선 차트 —
기본 line chart 완전 정리

한 시리즈의 숫자 배열을 꺾인 선으로 표시

시작 오늘 분석할 코드

jqPlot의 가장 단순한 차트다. 한 줄 데이터 배열만 주면 알아서 선 그래프를 그린다. renderer를 명시하지 않으면 기본 라인이다.

$(document).ready(function() { var plot1 = $.jqplot('chartdiv', [[3,7,9,1,5,3,8,2,5]], { title: '선 그래프 예제', axesDefaults: { labelRenderer: $.jqplot.CanvasAxisLabelRenderer }, axes: { xaxis: { label: "X 축" }, yaxis: { label: "Y 축" } } }); });

실제 출력 미리보기

선 그래프 예제

X 축Y 축1234567890369

---

용어 핵심 키워드

데이터 [[...]]2차원 배열 — 외측은 시리즈, 내측은 값

기본 renderer생략하면 LineRenderer (선 그래프)

axesDefaultsx/y축 모두에 적용할 옵션

label축 이름 — "X 축" "Y 축"

CanvasAxisLabelRenderery축 라벨을 90° 회전해 그림

자동 ticks데이터가 9개라 x축 1~9 자동 생성

---

1 bar-chart와 무엇이 다른가

구분	bar-chart1	line-chart (이 코드)
renderer	BarRenderer 명시	생략 — 기본 LineRenderer
x축 종류	CategoryAxis (텍스트)	기본 숫자 축
ticks	['1분기', ...] 명시	자동 (1, 2, 3, ...)
플러그인 수	5개	2개

💡 가장 단순한 차트 — 옵션 없이 데이터만 던져도 선 그래프가 나온다. jqPlot의 기본 모드는 line이다.

---

2 데이터 형식 — 2차원 배열

[[3,7,9,1,5,3,8,2,5]]는 9개 값 한 시리즈다. 외측 [...]은 시리즈 묶음, 내측 [3,7,9,...]는 한 시리즈의 값들.

// 한 시리즈 (9 값) [[3,7,9,1,5,3,8,2,5]] // 두 시리즈 (둘 다 9 값) — 한 차트에 두 선 [[3,7,9,1,5,3,8,2,5], [5,2,4,6,8,3,2,7,4]] // (x, y) 쌍 형식 — x축이 임의 값일 때 [[[1,3],[2,7],[3,9], ...]]

---

3 axesDefaults — 축에 공통 옵션

axesDefaults는 x축과 y축 모두에 같은 옵션을 적용할 때 쓴다. 본 코드는 둘 다 CanvasAxisLabelRenderer로 그리게 했다.

axesDefaults: { labelRenderer: $.jqplot.CanvasAxisLabelRenderer // 둘 다 이 렌더러 }

이건 다음과 같이 풀어 쓴 것과 동등하다.

axes: { xaxis: { labelRenderer: $.jqplot.CanvasAxisLabelRenderer, ... }, yaxis: { labelRenderer: $.jqplot.CanvasAxisLabelRenderer, ... } }

---

 

반응형

 

4 CanvasAxisLabelRenderer — 왜 필요?

축 라벨("X 축", "Y 축")은 HTML로 그리면 회전이 안 된다. y축은 90° 돌려서 세로로 표시해야 한다. CanvasAxisLabelRenderer는 라벨을 HTML5 canvas에 직접 그려 회전·폰트 자유 조정이 가능하게 만든다.

⚙ 관련 플러그인 둘 다 필요 — jqplot.canvasTextRenderer.min.js(기본 캔버스 텍스트 그리기)와 jqplot.canvasAxisLabelRenderer.min.js(축 라벨용 wrapper). 본 코드도 두 개 다 로드한다.

---

5 자동 x축 ticks

x축에 별도 옵션이 없다 — jqPlot이 자동으로 1부터 데이터 개수까지 표시한다. 본 코드는 9개 데이터라 1~9가 표시된다.

• 커스텀 라벨이 필요하면 ticks: ['Mon','Tue', ...] + CategoryAxisRenderer
• (x,y) 쌍 데이터를 주면 x축이 임의 숫자 (균등 간격 X)
• 날짜축은 DateAxisRenderer 플러그인 필요

---

6 y축 자동 범위

y축도 자동이다. 데이터의 최솟값~최댓값을 보고 적절한 범위를 정한다. 본 코드 데이터는 1~9이므로 y축은 0~10 정도로 잡힌다.

강제 범위를 주려면:

yaxis: { min: 0, max: 100, label: "Y 축" }

---

7 자주 하는 실수

실수	증상	해결
데이터를 1차원 배열로	차트 안 그려짐	[ ]로 한 번 더 감싸기
div 크기 미지정	0×0 캔버스 → 안 보임	style로 width/height 지정
jQuery 다음에 jqPlot 안 로드	$.jqplot is not a function	스크립트 순서 확인
한국어 라벨 깨짐	charset 오류	meta utf-8 + canvas 폰트 설정

---

8 현대식 대안 (Chart.js)

new Chart(ctx, { type: 'line', data: { labels: [1,2,3,4,5,6,7,8,9], datasets: [{ label: '시리즈1', data: [3,7,9,1,5,3,8,2,5], borderColor: '#5b8def' }] } });

---

핵심 한 줄 요약

$.jqplot(id, [[데이터]], 옵션)3개 인자만 — 가장 단순한 차트

기본 rendererLineRenderer (생략 가능)

데이터 [[...]]2차원 — 외측 시리즈, 내측 값

axesDefaultsx/y 둘 다에 공통 옵션

자동 x축1~데이터 개수까지 표시

CanvasAxisLabely축 라벨 회전·캔버스 그리기

Tags

#jqPlot #line-chart #선차트 #LineRenderer #axesDefaults #CanvasAxisLabel #시리즈 #jQuery #차트 #데이터시각화 #JS #CSS #HTML #웹개발 #티스토리

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

jqPlot, line-chart, 선차트, LineRenderer, axesDefaults, CanvasAxisLabel, 시리즈, jQuery, 차트, 데이터시각화, JS, CSS, HTML, 웹개발, 티스토리