안녕하세요. 명월입니다.
이 글은 그래프 오픈 라이브러리(jqplot)에 대한 글입니다.
Jqplot의 관한 글은 제가 5년전에 처음 소개하고 잊고 지내다가 지금에서야 Jqplot에 대한 자세한 소개와 설명을 합니다.
최근에는 그래프 관련 오픈 라이브리러가 워낙 많아서 jqplot보다 좋은 라이브러리가 참 많습니다. 예를 들면 google chart도 있고 high chart는 정말 많이 사용하는 그래프 라이브러리입니다.
high chart는 유료이고, google chart는 아직 저도 다루어 보지 않아서 잘 모르겠습니다. 찾아보니 high chart도 무료로 사용할 수 있는 영역이 있네요.
jqplot은 정말 가볍고 싸게 사용할 수 있는 차트이지 않을까 싶습니다.
최근 사이트 관리도 안 하나 봅니다. 엉망이네요..(여기서 이걸 소개해야 하나 말아야 하나 고민 많이 했습니다.)
먼저 기본 cdn 연결과 기본 설정입니다.
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<!-- jquery cdn -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- jqplot cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.js"></script>
</head>
<body>
<!-- 그래프로 사용될 div 태그입니다. -->
<div id="chartdiv" style="height:400px;width:300px; "></div>
<script>
$(function(){
// id명을 넣고 뒤에 데이터를 넣습니다.
// 데이터는 삼중 대괄호가 되어있는데 이건 아래에서 자세히 설명하고 값은 [x:1 y:2],[x:3 y:5.12],[x:5 y:13.1]...의 구조입니다.
$.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
});
</script>
</body>
</html>
.jqplot은 첫번째 파라미터에는 div의 id, 두번째는 chart 값(여기서는 플롯이라는 용어를 사용하네요), 그리고 마지막은 옵션의 설정으로 그래프를 설정할 수 있습니다.
옵션은 아래와 같습니다.
var option = {
seriesColors: [ "#4bb2c5", "#c5b47f"], // 선 색상, 배열은 차트의 순번. 만약, 차트의 배열이 색보다 많은 경우 처음으로 돌아간다.
negativeSeriesColors: [ "#498991", "#C08840"], //
sortData : true, // 값을 정렬한다.
stackSeries: true, // 스택 폴롯
title: '', // 제목
title: { // 제목 상세 설정
text: 'title',
show: true,
},
animate : true, // 애니메이션 설정
animateReplot : false, // 애니메이션 반복 설정
captureRightClick : true, // 오른쪽 마우스 클릭 이벤트
dataRenderer : undefined, // 플롯에 전달 된 데이터를 전처리하는 데 사용할 수있는 호출 가능 항목
dataRendererOptions : undefined, // dataRenderer에 전달 될 옵션
gridData : [], // 데이터 포인트에 해당하는 그리드 좌표 배열.
axesDefaults: {
show: false, // 축 렌더링 여부입니다. 자동으로 결정된다.
min: null, // 축의 최소 숫자 값. 자동으로 결정된다.
max: null, // 축의 최대 숫자 값. 자동으로 결정된다.
pad: 1.2, // 축의 데이터 범위에 곱한 인수
ticks: [], // 사용할 틱 배열. 자동으로 계산된다.
numberTicks: undefined, // 틱 간격
renderer: $.jqplot.LinearAxisRenderer, // 렌데링.
rendererOptions: {}, // 렌더 옵션
tickOptions: { // 틱 옵션
mark: 'outside', // 마크 위치, 'outside', 'inside', 'cross'
showMark: true, // 마크 표시 여부
showGridline: true, //그리드 라인 표시 여부
isMinorTick: false, // 작은 틱 표시 여부
markSize: 4, // 마크 크기
show: true, // 틱 표시 여부
showLabel: true, // 라벨 표시여부
prefix: '', // 눈금 레이블 앞에 붙는 글자
suffix: '', // 눈금 레이블 뒤에 붙는글자
formatString: '', // 포멧팅
fontFamily: '', // 폰트
fontSize: '', // 글자 크기
textColor: '', // 글자 색
escapeHTML: false // 인코딩 여부
},
showTicks: true, // 눈금 레이블 표시여부
showTickMarks: true, // 눈금 표시 여부
},
axes: { // 축
xaxis: { }, // x축 - 옵션은 axesDefaults와 같다.
yaxis: { }, // y축 - 옵션은 axesDefaults와 같다.
x2axis: { }, // x2축 - 옵션은 axesDefaults와 같다.
y2axis: { } // y2축 - 옵션은 axesDefaults와 같다.
},
seriesDefaults: {
show: true, // 렌더링 여부.
xaxis: 'xaxis', // x축 옵션 설정, 'xaxis'또는 'x2axis'
yaxis: 'yaxis', // y축 옵션 설정, 'yaxis'또는 'y2axis'
label: '', //이 줄의 범례에 사용할 레이블
color: '', // 라인에 사용할 CSS 색상 사양. 자동으로 결정
lineWidth: 2.5, // 선의 너비 (픽셀).
shadow: true, // 그림자 표시 여부.
shadowAngle: 45, // x 축에서 시계 방향으로 그림자의 각도 (도).
shadowOffset: 1.25, // 그림자의 선으로부터 오프셋.
shadowDepth: 3, // 그림자를 그릴 때 획 수
shadowAlpha: 0.1, // 그림자의 불투명도.
showLine: true, // 선분 렌더링 여부
showMarker: true, // 데이터 포인트 마커를 렌더링
fill: false, // 줄 아래를 채우기
fillAndStroke: false, // 채우기 영역 상단에 선 그리기
fillColor: undefined, // 채워진 선의 사용자 정의 채움 색상
fillAlpha: undefined, // fillColor에 적용 할 맞춤 알파
renderer: $.jqplot.LineRenderer, // 옵션이 렌더러에 전달
rendererOptions: {}, // 렌더러 옵션
markerRenderer: $.jqplot.MarkerRenderer, // 데이터를 그리는 데 사용할 렌더러
markerOptions: {
show: true, // 데이터 포인트 마커를 표시할지 여부.
style: 'filledCircle', // circle, diamond, square, filledCircle, filledDiamond, filledSquare.
lineWidth: 2, // 마커를 그리는 선의 너비.
size: 9, // 마커의 크기 (직경, 가장자리 길이 등).
color: '#666666', // 마커 색상, 기본적으로 선 색상으로 설정됩니다.
shadow: true, // 마커에 그림자를 그릴 지 여부.
shadowAngle: 45, // 그림자 각도. x 축에서 시계 방향.
shadowOffset: 1, // 그림자 선에서 오프셋,
shadowDepth: 3, // 그림자를 그릴 때 획 수
shadowAlpha: 0.07 // 그림자의 불투명도
}
},
// seriesDefaults와 같은 옵션, 각 차트마다 각기 옵션을 설정할 수 있음.
series:[ ],
// 범례
legend: {
show: false, // 표시 여부
location: 'ne', // 위치 nw, n, ne, e, se, s, sw, w.
xoffset: 12, // x (또는 x2) 축에서 범례 상자의 픽셀 오프셋.
yoffset: 12, // 는 y2) 축에서 범례 상자의 픽셀 오프셋
},
// 그리드
grid: {
drawGridLines: true, // 그리드에 선을 그릴 지 여부.
gridLineColor: '#cccccc', // 그리드 선의 색
background: '#fffdf6', // 그리드의 배경색에 대한 CSS 색
borderColor: '#999999',// 그리드 주변의 테두리에 대한 CSS 색
borderWidth: 2.0, // 격자 선 주변의 픽셀 너비.
shadow: true, // 그리드의 그림자를 그린다.
shadowAngle: 45, // 그림자 각도. x 축에서 시계 방향.
shadowOffset: 1.5, // 그림자 선에서 오프셋
shadowWidth: 3, // 그림자의 획 너비.
shadowDepth: 3, // 그림자를 그릴 때 획 수.
shadowAlpha: 0.07, // 그림자의 불투명도
renderer: $.jqplot.CanvasGridRenderer, // 그리드를 그리는 데 사용할 렌더러.
rendererOptions: {} // 렌더러에 전달할 옵션
},
// 플롯이 포함 된 그리드의 크기
gridDimensions: {
height: 500, // 높이
width: 500 // 너비
},
// 플롯이 포함 된 그리드 주위에 적용 할 여백.
gridPadding: {
top: null,
bottom: null,
left: null,
right: null
},
// BarRenderer를 사용하면 rendererOptions 객체에 추가 옵션을 지정할 수 있다.
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barPadding: 8,
barMargin: 10,
barDirection: 'vertical',
barWidth: null,
shadowOffset: 2,
shadowDepth: 5,
shadowAlpha: 0.8,
}
},
// 커서
cursor: {
style: 'crosshair', // 커서 유형을 변경하기위한 CSS 사양
show: true, // 표시
showTooltip: true, // 커서 위치를 보여주는 툴팁
followMouse: false, // 툴팁이 마우스를 따라야하는지 아니면 움직이지 않아야하는지 여부.
tooltipLocation: 'se', // 마우스를 기준으로 한 툴팁의 위치
tooltipOffset: 6, // 마우스 또는 축에서 툴팁의 픽셀 오프셋.
showTooltipGridPosition: false, // 마우스의 격자 픽셀 좌표 표시
showTooltipUnitPosition: true, // 마우스의 데이터 단위로 좌표 표시
tooltipFormatString: '%.4P', // 툴팁 값의 sprintf 스타일 형식 문자열
useAxesFormatters: true, // 동일한 포맷터 및 formatStrings 사용 여부
tooltipAxesGroups: [], // 툴팁에 지정된 축 그룹 만 표시
},
// 드래그 기능
// 드래그 가능한 옵션은 최상위 레벨의 "드래그 가능"오브젝트로 지정됩니다.
dragable: {
color: undefined, // 드래그 한 점과 드래그 한 선에 사용할 사용자 정의 색
constrainTo: 'none', // 부분. 기본적으로 선 색상의 투명 변형을 사용한다.
},
// 강조
highlighter: {
lineWidthAdjust: 2.5, // 데이터 포인트 마커를 쓰다듬어 크기 선에 추가 할 픽셀
sizeAdjust: 5, // 하이라이트를 그릴 때 채워진 마커의 크기에 추가 할 픽셀.
showTooltip: true, // 데이터 포인트 값으로 툴팁을 표시합니다.
tooltipLocation: 'nw', // 툴팁을 표시하거나 숨기려면 페이드 효과를 사용합니다.
fadeTooltip: true, // 툴팁을 표시하거나 숨기려면 페이드 효과
tooltipFadeSpeed: "fast", // slow, def, fast, a number of milliseconds.
tooltipOffset: 2, // 툴팁의 픽셀 오프셋.
tooltipAxes: 'both', // 툴팁에 표시 할 축 값, x, y, both
tooltipSeparator: ', ', // 툴팁의 값을 구분합니다.
useAxesFormatters: true, // 축에 사용 된 것과 동일한 형식 문자열과 포맷터를 사용
tooltipFormatString: '%.5P' // 툴팁의 sprintf 형식 문자열
},
// LogAxisRenderer 일때 사용되는 옵션
axesDefaults: {
base: 10,
tickDistribution: 'even',
},
// PieRenderer 일때 사용되는 옵션
seriesDefaults: {
rendererOptions: {
diameter: undefined,
padding: 20,
sliceMargin: 0,
fill: true,
shadowOffset: 2,
shadowDepth: 5,
shadowAlpha: 0.07
}
},
// Trendline 일대 사용되는 옵션
seriesDefaults: {
trendline: {
show: true,
color: '#666666',
label: '',
type: 'linear',
shadow: true,
lineWidth: 1.5,
shadowAngle: 45,
shadowOffset: 1.5,
shadowDepth: 3,
shadowAlpha: 0.07
}
}
};
저도 위 옵션을 정리하고 보니, 좀 무언가 애매한 옵션이 꽤 많이 보이네요...
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<!-- jquery cdn -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- jqplot cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.pointLabels.min.js"></script>
</head>
<body>
<!-- 일반 차트 -->
<div id="chartdiv1" style="height:400px;width:300px; "></div>
<!-- sine 데이터 차트 -->
<div id="chartdiv2" style="height:400px;width:300px; "></div>
<!-- bar 차트 -->
<div id="chartdiv3" style="height:400px;width:300px; "></div>
<script>
$(function(){
// 「y = 5x」의 그래프
var chart1 = (function(){
var ret = [];
for(i=1; i<10;i++){
ret.push([i,i*5]);
}
return ret;
})();
// 「y = x^2」의 그래프
var chart2 = (function(){
var ret = [];
for(i=1; i<10;i++){
ret.push([i,i*i]);
}
return ret;
})();
// 「y = 5x」의 그래프와 「y = x^2」의 그래프
$.jqplot('chartdiv1', [chart1, chart2] );
// 데이터 값에 값을 넣지 않고 dataRenderer에 함수 식을 넣어서 구현.
$.jqplot('chartdiv2', [], {
title: 'Sine Data Renderer',
dataRenderer: function() {
var data = [[]];
for (var i=0; i<13; i+=0.5) {
data[0].push([i, Math.sin(i)]);
}
return data;
}
});
// bar 차트
$.jqplot('chartdiv3', [[2, -6, 7, -5]], {
seriesDefaults:{
// 바 그래프
renderer:$.jqplot.BarRenderer,
rendererOptions: { fillToZero: true },
pointLabels: { show: true }
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ['a', 'b', 'c', 'd']
}
}
});
});
</script>
</body>
</html>
여기서 제가 기본 그래프가 아닌 bar차트를 사용했습니다. bar 차트의 경우는 기본 jqplot으로는 되지 않고 추가 render 라이브러리도 참조를 해야합니다.
링크 - http://www.jqplot.com/examples/
cdn 링크 - https://cdnjs.com/libraries/jqPlot
여기서 제가 bar차트를 사용하고 싶으면 예제에서 오른쪽 하단을 보고 참조 랜더러를 찾습니다.
그리고 cdn에서 찾아서 연결하면 사용 가능합니다.
다 정리하고 보니 라이브러리 자체가 참 애매한 부분이 많습니다. 업데이트도 꽤 오래 전부터 없고, 버그도 간간히 보이네요.
여기까지 그래프 오픈 라이브러리(jqplot)에 대한 글이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Open source > Javascript, Jquery, CSS' 카테고리의 다른 글
| [Javascript] Full calendar(스케줄 달력)의 사용법 (0) | 2021.07.15 |
|---|---|
| [Javascript] 브라우져 화면 캡쳐 라이브러리(html2canvas) (0) | 2019.11.22 |
| [Javascript] Select2 (Select searching, multiselect, ajax) (0) | 2019.08.27 |
| [Javascript] 날짜 포맷 설정하는 방법(moment 라이브러리) (0) | 2019.08.22 |
| [Javascript] 알람 메시지 라이브러리(toastr 라이브러리) (0) | 2019.08.21 |
| Google OAuth 사용법 (0) | 2019.06.18 |
| [CSS] 구글 폰트 (Google font) 이용하기 (0) | 2019.05.31 |
| JqGrid (0) | 2015.07.14 |