본문 바로가기

jQuery/jqPlot

[jqPlot] 플러그인 및 옵션 정리

반응형
참조 : 시우아빠님 블로그



■ jqPlot의 플러그인 정리



jqPlot에는 다수의 플러그인들이 있다 그 플러그인들에 따라 그릴 수 있는

  그래프도 천차만별이기에 확인해 두도록 하자.




자주 사용되는 jqPlot plugins 의 종류는 다음과 같다.


플 러 그 인

설        명

 jqplot.barRenderer.js

 · 플러그인은 'plugins'폴더에 들어 있고, 필요에 따라 개별적으로 호출한다.

 jqplot.blockRenderer.js

 · 차트를 만들 때 필요합니다.

 jqplot.bubbleRenderer.js

 · 버블 차트를 생성하는 데 필요합니다.

 jqplot.canvasOverlay.js

 · 그래프에 선을 그 적용하기 위하여 필요합니다.

 jqplot.categoryAxisRenderer.min.js

 · 축을 카테고리 (범주)로 취급 그리드를 카테고리 구분선으로 표시 할 때 필요합니다.

 jqplot.dateAxisRenderer.js

 · 날짜 또는 시간 축을 시간축으로 취급 할 때 필요합니다.

 jqplot.donutRenderer.js

 · 도넛차트를 만들 때 필요하다.

 jqplot.dragable.js

 · 계열의 데이터 요소를 드래그하여 이동하도록 할 때 필요합니다.

 jqplot.highlighter.js

 · 강조 & 툴팁에 필요합니다.

 jqplot.meterGaugeRenderer.js

 · 미터 게이지를 만들 때 필요합니다.

 jqplot.ohlcRenderer.js

 · 촛대 등의 차트를 만들 때 필요합니다.

 jqplot.pieRenderer.js

 · π(파이 차트)를 만들 때 필요합니다.

 jqplot.enhancedLegendRenderer.min.js

 · 범례의 기능을 강화한다.

 jqplot.pointLabels.js

 · 데이터 요소 레이블을 표시하는 데 필요합니다.

 jqplot.trendline.js

 · 추세선을 추가하기 위해 필요하다.










참조 : 0과 1로 표현하는 코드 디자이너




■ jqPlot의 옵션 정리




01. title 옵션


title

 text

 · 타이틀 텍스트

 show

 · 타이틀 표시여부

 fontFamily

 · 타이틀 폰트 종류

 fontSize

 · 폰트 사이즈

 textAlign

 · 타이틀 테긋트 위치 (left, center, right)

 textColor

 · 테스트 컬러





02. axes 옵션


X축 옵션

xaxis

 min

 · X축 최저값 범위지정

 amx

 · X축 최고값 범위 지정

 pad

 · X축 여백조정 면 그래프 작성시는 [0]을 지정하고, 여백을 없에는 경우가 많다.

 ticks

 · X축 눈금지정

 tickOptions

 mark

 · 눈금의 위치 설정 (outside, inside) (default : outside)

 showMark

 · 눈금 표시 여부

 showGridline

 · 그리드선 표시여부 (default : true)

 markSize

 · 눈금 사이즈 (default : 4)

 show

 · 눈금과 mark의 라벨 표시 여부 (default : true)

 showLabel

 · 눈금의 라벨 표시 여부 (default : true)

 formatString

 · 눈금의 라벨형식 지정 (%d : 정수, %f : 소수, %g : 데이터값, % : 문자열)

 showTicks

 · 눈금의 라벨 표시 여부

 showTickMarks

 · 눈금의 mark 표시 여부

 label

 · X축 라벨

 labelOptions

 fontFamily

 

 fontSize

 · 라벨 폰트 크기 설정

 renderer

 ·X축의 카테고리로 사용



Y축 옵션

yaxis

 min

 · Y축 최저값 범위지정

 amx

 · Y축 최고값 범위지정

 pad

 · Y축 여백조정 면그래프 작성시는 [0]을 지정하고, 여백을 없에는 경우가 많다.

 ticks

 · Y축 눈금지정

 tickOptions

 mark

 · 눈금의 위치 설정 (outside, inside) (default : outside)

 showMark

 · 눈금 표시 여부

 showGridline

 · 그리드선 표시여부 (default : true)

 markSize

 · 눈금 사이즈 (default : 4)

 show

 · 눈금과 mark의 라벨 표시 여부 (default : true)

 swhoLabel · 눈금의 라벨 표시 여부 (default : true)

 formatString

 · 눈금의 라벨형식 지정 (%d : 정수, %f : 소수, %g : 데이터값, % : 문자열)

 showTicks

 · 눈금의 라벨 표시 여부

 showTickMarks

 · 눈금의 mark 표시 여부

 label

 · Y축 라벨

 labelOptions

 fontFamily

 

 fontSize

 · 라벨 폰트 크기 설정

 render

 · Y축의 카테고리로 사용



03. seriesDefaults


seriesDefaults

 show

 · 그래프 표시여부 (default : true)

 color

 ·

 linePattern

 · 그래프 선종류 지정 (solid, dashed, dotted) (default : solid)

 · '.-.' 형식으로 조합 사용 가능

 · [2, 4 , 2, 7, 4, 2] 파선의 길이와 파선의 간격 다음의 파선의

 · 길이와 간격 배열로 지정 가능

 lineWidth

 · 그래프 선의 두께

 shadowAngle

 · 그래프 그림자 각도 X축세어 시계방향

 showLine

 · 그래프 선 표시 여부 (default : true)

 showMarker

 · marker 표시 여부 (default : true)

 fill

 · 그래프 선 밑 색으로 채우기 여부 (default : true)

 fillAndStroke

 · 그래프 선 표시여부 (면 그래프 생성시 사용하는 옵션)

 fillColor

 · 선 및 채우기 색

 fillAlpha

 · 선 밑 채우기 색의 불투명도

 fillToZero

 · 그래프선과 0 사이 채우기 여부 (default : false)

 renderer

 jQuery.jqplot.BarRenderer

 · 바 그래프

 jQuery.jqplot.BezierCurveRenderer

 · 곡선 그래프

 jQuery.jqplot.BlockRenderer

 · 블록 차트

 jQuery.jqplot.BubbleRenderer

 · 버블 차트

 jQuery.jqplot.DonutRenderer

 · 도넛 차트

 jQuery.jqplot.MeterGaugeRenderer

 · 미터 게이지

 jQuery.jqplot.MekkoRenderer

 · 마리메코 차트

 jQuery.jqplot.OHLCRenderer

 ·

 jQuery.jqplot.PieRenderer

 · 파이 그래프

 jQuery.jqplot.PyramidRenderer

 · 피라미드 그래프

 rendererOptions

 barDirection

 · 바생성 옵션

 · barDirection: 'vertical', //바그래프 vertical, horizontal.

 markerOptions

 show

 · 눈금 표시 여부 (default : true)

 style

 눈금 스타일 (default : filledCircle)

 · diamond, ciamond, circle, square, x, plus, dash, filedDiamond

  , filedCircle, filedSquare

 lineWidth

 · 눈금선 두께 (default : 2)

 size

 · 눈금크기 (default : 9)

 color

 · 눈금색 (default : 그래프 라인색과 같음)

 shadow

 · 눈금 그림자 표시 여부 (기본값 : true)

 shadowAngle

 · 눈금 그리자 각도, X축에서 시계방향 (기본값 : 45)

 shadowOffset

 · 눈금과 눈금 그림자의 간격 (기본값 : 1)

 shadowDepth

 · 눈금 그림자의 길이 (기본값 : 1)

 shadowAlpha

 · 눈금 그림자의 불투명도 (기본값 : 0.07)

 legend

 show

 · 범례 표시 여부 (기본값 : true)

 placement

 · 범례 표시 영역 (insideGrid, outsideGrid, outside)

 location

 · 범례 표시 위치 지정 (n, e, s, w, nw, ne, se, sw)

 xoffset

 · X축, X2축에서 범례 영역까지의 거리

 yoffset

 · Y축, Y2축에서 범례 영역까지의 거리

 stackSeries

 ·




반응형