graphJS를 이용해서 그래프들을 그리는 연습을 했다.
option들이 상당히 많아서 나중에 필요할 때 차차 살펴보는 것으로 하고 기본적인 모양을 구현하는 것에 집중했다.
graphJS 간단 사용법
- graphJS는 여러가지 방식으로 불러올 수 있지만 나는 DOM 방식으로 불러왔다
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>이것을 써주면 된다.
- 그리고 git에 가면 예제들을 볼 수 있는데 그것을 바탕으로 연습했고, utils.js 란 파일에 랜덤값 생성과 같은 유용한 기능들을 제공하고 있어 사용했다.
- graph js 는 canvas 태그를 바탕으로 canvas 안에 도표를 그리는 방식이다.
<body>
<canvas id="barChart"></canvas>
</body>1. Bar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>barChart</title>
</head>
<body>
<canvas id="barChart"></canvas>
</body>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="./utils.js"></script>
<script>
//Bar charts(Vertical)
var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var color = Chart.helpers.color;
var barChartData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Dataset 1',
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
borderColor: window.chartColors.red,
borderWidth: 1,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
]
}, {
label: 'Dataset 2',
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
borderColor: window.chartColors.blue,
borderWidth: 1,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
]
}]
};
// take a graph
window.onload = function () {
var ctx = document.getElementById('barChart').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Bar Chart'
}
}
});
};
</script>
</html>
2. Line
(위와 비슷한 Head 와 Body 부분은 생략했다.)
<script>
var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var config = {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: window.chartColors.red,
borderColor: window.chartColors.red,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
fill: false,
}, {
label: 'My Second dataset',
fill: false,
backgroundColor: window.chartColors.blue,
borderColor: window.chartColors.blue,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Line Chart'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
elements: {
line: {
tension: 0.000001
}
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
}
}
};
// take a graph
window.onload = function () {
var ctx = document.getElementById('lineChart').getContext('2d');
window.myLine = new Chart(ctx, config);
};
</script>
(option 부분에서 tension을 설정하지 않으면 곡선으로 그려진다)
3. Radar
<script>
var chartData = {
labels: ['a', 'b', 'c', 'd', 'e', 'f'],
datasets: [{
label: 'My First dataset',
fill: false,
backgroundColor: window.chartColors.red,
borderColor: window.chartColors.red,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
}, {
label: 'My Second dataset',
fill: false,
backgroundColor: window.chartColors.blue,
borderColor: window.chartColors.blue,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
}]
};
var chartOptions = {
tooltips: {
mode: 'label'
},
};
window.onload = function() {
var ctx = document.getElementById('radarChart').getContext('2d');
window.myRadar = new Chart(ctx, {
type: 'radar',
data: chartData,
options: chartOptions
});
}
</script>
4. Pie
<script>
var chartData = {
labels: ['a', 'b', 'c', 'd', 'e', 'f'],
datasets: [{
label: ['Mage', "Warrior", "Archor", "Healer", "Knight", "Gunner"],
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
backgroundColor: [
window.chartColors.red,
window.chartColors.purple,
window.chartColors.orange,
window.chartColors.yellow,
window.chartColors.green,
window.chartColors.blue,
]
}]
};
var chartOptions = {
responsive: true,
animation: {
animateScale: true,
animateRotate: true
}
};
window.onload = function() {
var ctx = document.getElementById('pieChart').getContext('2d');
window.myPie = new Chart(ctx, {
type: 'pie',
data: chartData,
options: chartOptions
});
}
</script>
5. Doughnut
<script>
var chartData = {
labels: ['a', 'b', 'c', 'd', 'e', 'f'],
datasets: [{
label: ['Mage', "Warrior", "Archor", "Healer", "Knight", "Gunner"],
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
backgroundColor: [
window.chartColors.red,
window.chartColors.purple,
window.chartColors.orange,
window.chartColors.yellow,
window.chartColors.green,
window.chartColors.blue,
]
}]
};
var chartOptions = {
responsive: true,
animation: {
animateScale: true,
animateRotate: true
}
};
window.onload = function() {
var ctx = document.getElementById('doughnutChart').getContext('2d');
window.myDoughnut = new Chart(ctx, {
type: 'doughnut',
data: chartData,
options: chartOptions
});
}
</script>
블록체인, IOT, 클라우드에 관심이 많은 개발자 지망생