고정 헤더 영역
 |
 |
 |
 |
 |
 |
 |
상세 컨텐츠
본문
반응형
jQuery 로 만들어진 무료차트 입니다
비교적 쉽게 사용가능하고 선차트, 가로바차트, 세로바차트, 파이차트등 다양한 기능을 가진 차트소스를 소개드립니다
첫째, 아래와 같이 jquery 파일을 추가합니다
Chart.min.js 파일과 utils.js 파일은 아래에 첨부합니다
Chart.min.js
0.17MB
utils.js
0.00MB
|
1
2
|
<script src="./chart/Chart.min.js"></script>
<script src="./chart/utils.js"></script>
|
cs |
둘째, 페이지 로드시 기본세팅을 해줍니다
type 부분을 변경하면 챠트의 형태를 변경할 수 있습니다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myHorizontalBar = new Chart(ctx, {
// type 을 변경하면 선차트, 가로막대차트, 세로막대차트 등을 선택할 수 있습니다
// ex) horizontalBar, line, bar, pie, bubble
type: 'line',
data: ChartData,
options: {
responsive: true,
maintainAspectRatio: false ,
title: {
display: true,
text: '2021년 영업현황'
}
}
});
};
|
cs |
셋째, 챠트데이터를 넣어줍니다
각 항목별 설명을 달아놓았으니 변경하면서 테스트 해보시기 바랍니다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
var color = Chart.helpers.color;
var ChartData = {
labels: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], // 챠트의 항목명 설정
datasets: [{
label: '영업1팀', // 데이터셑의 이름
pointRadius: 15, // 꼭지점의 원크기
pointHoverRadius: 30, // 꼭지점에 마우스 오버시 원크기
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(), // 챠트의 백그라운드 색상
borderColor: window.chartColors.red, // 챠트의 테두리 색상
borderWidth: 1, // 챠트의 테두리 굵기
lineTension:0, // 챠트의 유연성( 클수록 곡선에 가깝게 표시됨)
fill:false, // 선챠트의 경우 하단 부분에 색상을 채울지 여부
data: [18,21,13,44,35,26,54,17,32,23,22,35,0] // 해당 데이터셋의 데이터 리스트
}, {
label: '영업2팀',
pointRadius: 5,
pointHoverRadius: 10,
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
borderColor: window.chartColors.green,
borderWidth: 1,
lineTension:0,
fill:false,
data: [31,24,23,42,25,14,37,21,13,44,35,23,0] // 해당 데이터셋의 데이터 리스트
}]
};
|
cs |
아래 차트는 위 코드로 만들 수 있는 차트의 종류 몇가지 입니다.
보다 자세한 내용은 www.chartjs.org/ 를 참고하시기 바랍니다. MIT라이선스 입니다
아래는 전체 소스코드 입니다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
<!doctype html>
<html>
<head>
<title>챠트</title>
<script src="./chart/Chart.min.js"></script>
<script src="./chart/utils.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div id="container" style="width: 800px;height:480px;">
<canvas id="canvas" ></canvas>
</div>
<script>
var color = Chart.helpers.color;
var ChartData = {
labels: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], // 챠트의 항목명 설정
datasets: [{
label: '영업1팀', // 데이터셑의 이름
pointRadius: 15, // 꼭지점의 원크기
pointHoverRadius: 30, // 꼭지점에 마우스 오버시 원크기
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(), // 챠트의 백그라운드 색상
borderColor: window.chartColors.red, // 챠트의 테두리 색상
borderWidth: 1, // 챠트의 테두리 굵기
lineTension:0, // 챠트의 유연성( 클수록 곡선에 가깝게 표시됨)
fill:false, // 선챠트의 경우 하단 부분에 색상을 채울지 여부
data: [18,21,13,44,35,26,54,17,32,23,22,35,0] // 해당 데이터셋의 데이터 리스트
}, {
label: '영업2팀',
pointRadius: 5,
pointHoverRadius: 10,
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
borderColor: window.chartColors.green,
borderWidth: 1,
lineTension:0,
fill:false,
data: [31,24,23,42,25,14,37,21,13,44,35,23,0] // 해당 데이터셋의 데이터 리스트
}]
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myHorizontalBar = new Chart(ctx, {
// type 을 변경하면 선차트, 가로막대차트, 세로막대차트 등을 선택할 수 있습니다
// ex) horizontalBar, line, bar, pie, bubble
type: 'line',
data: ChartData,
options: {
responsive: true,
maintainAspectRatio: false ,
title: {
display: true,
text: '2021년 영업현황'
}
}
});
};
</script>
</body>
</html>
|
cs |
참고로 저 동해둘리가 직접 운영하는 '성공하는 중이다' 카페를 소개드립니다.
각자의 분야에서 성공을 향해 가는 과정에서 힘이되는 이야기, 힘이되는 사진, 성공스토리, 실패스토리 등을 나누고자 합니다. 많은 참여 부탁드려요
https://cafe.naver.com/ingsuccess
성공하는 중이다 : 네이버 카페
성공을 위해 실패를 두려워하지 않는 분들의 이야기를 나누고 싶습니다. 우리는 성공하는 중이니까요!
cafe.naver.com
반응형
댓글 영역