728x90
반응형
MES 시스템 서비스 위한 웹페이지를 만들다가 설비 가동률을 그리기 위해 여러 자료를 찾던 중, router를 사용하는 경우는 별로 없다는 사실을 알게되었다.
꺽은선 그래프는 부트스트랩을 통해서 차트를 그리는 방법을 선택했다.
router를 처음 시작하기 위한 설정이나, 실행 index.js 파일에 대한 설명은 생략하려고 한다.
상단에 header 파일을 호출했다. Capacity utilization 버튼을 클릭하면 graph.ejs를 get 방식으로 호출한다.
// routes 폴더의 main.js에 graph.ejs 를 get방식으로 호출
router.get("/graph",function(req,res){
res.render("graph");
})다음은 graph.ejs 파일 구성이다.
//graph.ejs
<% extend('header') %>
<html lang="en"> <!-- <html lang="en" style="height: 100%"> -->
<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>부트스트랩 차트그리기</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- 차트 링크 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
</head>
<body>
<div class="container">
<canvas id="myChart"></canvas>
</div> <!-- 부트스트랩 -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <!-- 차트 -->
<script>
// chart colors
const colors = ['red','orange','yellow','green','blue','purple','pink','black']; // const datas = [589, 445, ...] 선언하고 아래서 datas 변수만 써줘도 된다.
var ctx = document.getElementById('myChart');
var chartData = { labels: ["2019.11.07", "2019.11.08", "2019.11.09", "2019.11.10", "2019.11.11", "2019.11.12", "2019.11.13","2019.11.14"],
datasets: [{
label: 'EQP11',
data: [97.222, 25, 28, 28, 28, 28, 26,0],
backgroundColor: 'transparent',
borderColor: colors[0],
borderWidth: 3,
},
{
label: 'EQP12',
data: [100, 30.093, 28, 28, 28, 28, 26,0],
backgroundColor: 'transparent',
borderColor: colors[1],
borderWidth: 3,
},
// 생략
{
label: 'EQP33',
data: [0, 15,34, 22, 14, 25, 27,16],
backgroundColor: 'transparent',
borderColor: colors[7],
borderWidth: 3,
} ]
};
var myChart = new Chart(ctx, { // 챠트 종류를 선택
type: 'line', // 챠트를 그릴 데이타
data: chartData, // 옵션
options: { legend: { display: true }
, title: { display : true, text: '설비별 가동률' } } });
</script>
</body>
</html>여기서 중요한 건, chartData 와 Chart() 함수이다.
charData는 일반적으로 아래와 같이 구성된다.
var chartData = { labels: [x축에 해당하는 요소들(,로 구분)],
datasets: [{
label: '항목이름',
data: [y축에 들어갈 데이터 값],
backgroundColor: 'transparent',
borderColor: 선 색깔,
borderWidth: 3,
},- labels 는 x축의 요소들을 넣으면 된다.
- datasets의 label은 그래프를 이루는 항목의 이름을 넣으면 된다.
- data에는 그 항목들이 가지고 있는 값들을 넣어준다.
- backgroundColor도 따로 지정해 줄 수 있는다. transparent로 지정해주면 그래프의 선만 표시된다. 여기에 색깔을 따로 지정해주면 그래프 아래부터 x축까지의 범위가 지정된 색깔로 채워진다.
- borderColor는 선 색깔, borderWidth는 선의 굵기이다.
varChart는 아래와 같이 구성된다.
var myChart = new Chart(ctx, {
type: 'line', // 챠트 종류를 선택
data: chartData, // 챠트를 그릴 데이타
options: { legend: { display: true } // 옵션
, title: { display : true, text: '설비별 가동률' } } });- ctx에는 document.getElementById('myChart'); 라는 명령어가 들어간다. myChart는 div안에 임의로 canvas id를 지정한 값이니 변경해도 된다.
- type 은 다양한데 꺽은선 그래프를 그릴 것이니 line을 지정해준다.
- data에는 위에 만들어놓은 chartData가 data로 들어간다.
- option의 처음 legend : {display : true or false} 부분은 chartData에서 지정해줬던 그래프별 항목명을 표시하느냐 마냐를 정한다. true로 하면 지정해준 항목명이 표시되고 false는 표시되지 않는다.
- title: { display : true, text: '차트 이름' } 차트의 상단 중앙에 위차하는 차트 이름을 표시하는 부분이다. true로 하면 적은 이름이 표시되고 false는 표시되지 않는다.
위의 코드대로 실행시키면 아래와 같은 모습이 된다.
각 항목별 데이터만 보고 싶다면 설비별 가동률 아래에 있는 데이터 목록의 이름을 클릭하면 - 표시로 지워지는대, 해당 표시가 되어있는 데이터는 그래프가 표시되지 않는다. 또한 각각의 세부적인 데이터 항목을 보려면 점 표시에 마우스를 커서를 가져다 대면 아래와 같이 세부데이터가 표시된다.
DB에서 들어오는 데이터로 바로 표시하게 만들면 좋겠지만...다음에 시도해보려고 한다!
728x90
반응형
'스마트한 개발 공부 > Node.js | Java | html' 카테고리의 다른 글
| [JavaScript] Ajax를 사용하여 간단한 웹페이지 만들기 (0) | 2021.07.14 |
|---|---|
| [Node.js] Node.js에서 사용하는 MySQL (0) | 2021.07.13 |
| [jQuery] html에서 jQuery를 사용하는 방법 (0) | 2021.07.12 |
| [Node.js] Node.js에서 mysql을 이용하여 웹서비스 만들기 #2 (1) | 2021.07.09 |
| [Node.js] Node.js에서 mysql을 이용하여 웹서비스 만들기 #1 (0) | 2021.07.05 |