상용이나 공개 되어 있는 라이브러리를 사용하지 말고 '그냥 내가 다 만들어 보자' 라는 마음으로 시작!
라이브러리를 사용할 때 보통
HTML에는
<div id='라이브러리에서요구하는이름'></div>
JS 에는
let 이름 = new 라이브러리('라이브러리에서요구하는이름', options);
이름.메소드(옵션);
이런식으로 되어 있다.
그리고 소스를 보면 ....ㅋㅋㅋ 복잡하다.
이리저리 복잡한 많은 소스를 보면서 주눅이.....
진짜 복잡한것도 있지만 대부분의 소스는 안쓰는 소스들도 상당한 부분을 차지 한다.
이유는 특정 부분처리를 위해서 다른 라이브러리를 불러 와서 사용하기 때문이다.
라고 나는 생각한다.
이번에 블로그를 보는 당신과 같이 만들어 볼것은 차트 이다.
원형 차트로 구역을 나누고 마우스를 올렸을때 타이틀을 보여 주고 약간의 에니메이션을 주는
예시로 삼은 차트는 am차트이다.
이차트는 항목을 누르면 하위로 내려가는 식이다.
거기까지 구현할지는 잘 모르겠다.
www.amcharts.com/demos/drill-down-sunburst-chart/?theme=dataviz
Drill-down sunburst chart - amCharts
www.amcharts.com
모든 개발은 퇴근을 하고 코딩을 하기 때문에 하루 한시간 이상을 할 것이지만
진행이 많이 느릴 수도 있다.
차트이름은 DittyChart
HTML 문서는 이렇게
<!DOCTYPE html>
<html>
<head>
<title>DittyChart</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="dittyChartDivName"></div>
<script src="src/index.js"></script>
</body>
</html>
index.js 문서는
import "./styles.css";
import DittyChart from "./DittyChart";
let option = [
{
name: "진행",
value: 40,
backColor: "",
children: [
{
name: "정상",
value: 32,
backColor: ""
},
{
name: "지연",
value: 8,
backColor: ""
}
]
},
{
name: "완료",
value: 230,
backColor: "",
children: [
{
name: "정상",
value: 180,
backColor: ""
},
{
name: "지연",
value: 50,
backColor: ""
}
]
}
];
let dittyChart = new DittyChart("dittyChartDivName", option);
dittyChart.creatChart();
DittyChart.js
function DittyChart(divname, option) {
this.divname = divname;
this.option = option;
}
DittyChart.prototype.creatChart = function () {
console.log(this);
};
export default DittyChart;
BPM 프로세스 완료건과 진행건을 차트로 보여 주면서
클릭 혹은 마우스 올렸을 때 지연, 정상에 대해서도 보여주도록
option을 만들었다.
backColor는 차트의 색상을 정하도록 하였다.
이제 DittyChart.js에 DittyChart 생성자 함수를 만들고
받는 param은 차트가 생성될 div의 id값과 차트의 내용이될 option 값이다.
'Learning > Javascript' 카테고리의 다른 글
| 마우스 스크롤과 메뉴 하이라이트 주기 (0) | 2021.02.03 |
|---|---|
| 호이스팅(hoisting) (0) | 2021.02.03 |
| 논리연산자 && || ! (0) | 2021.01.31 |
| addEventListener 와 자주 사용하는 event (0) | 2021.01.10 |
| 함수 매개변수의 기본값 설정하기-삼항 연산자 , = === 사용 (0) | 2021.01.08 |
