728x90
1. 아래 홈페이지 접속하기
https://www.highcharts.com/demo
Highcharts | Highcharts.com
www.highcharts.com
2. 메뉴 Demos > Highchars JS Demos 선택
3. 원하는 차트 선택 (저는 DEFALUT의 Basic line을 선택했습니다!)
4. EDIT IN CODEPEN 선택
5. (Eclipse Spring Tool 기준) 프로젝트 > src > main > webapp > WEB-INF > views > jsp 파일을 만든다.
6. (4번에서 들어간 페이지의) HTML, CSS, JS 코드를 (5번에서 만든) JSP 파일에 복사 붙여 넣기 한다.
<!--sample.jsp-->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- HTML의 script 태그 복붙 -->
<style type="text/css">
<!-- CSS 전체 코드 복붙 -->
</style>
</head>
<body>
<!-- HTML의 figure 태그 복붙 -->
<script type="text/javascript">
<!-- JS 전체 코드 복붙 -->
</script>
</body>
</html>
7. JSP 실행하면 완성!
[Controller를 이용하여 값 바꾸는 방법]
1. 프로젝트 > src\main\java > 패키지 > java 파일(Controller) 파일을 만든다.
2. 아래와 같이 Controller, RequestMapping, HashMap 등 설정해준다.
import ~~;
@Controller
public class 컨트롤러이름 {
@RequestMapping(value="URL이름", method=RequestMethod.GET)
public String 메서드이름(Model model) {
Map<String, List<Integer>> map = new HashMap();
List<Integer> list01 = new ArrayList();
list01.add(99999); list01.add(99999); list01.add(99999); list01.add(99999);
list01.add(99999); list01.add(99999); list01.add(99999); list01.add(99999);
map.put("MAP에 담을 값의 이름=Installation", MAP에 담을 값=list01);
model.addAttribute("JSP에 보낼 값의 이름=datas", JSP에 보낼 값=map);
return "JSP 이름=sample";
}
}
3. sample.jsp JS 부분 아래와 같이 수정하기 (변수명은 달라도 됩니다)
<!--sample.jsp-->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- HTML의 script 태그 복붙 -->
<style type="text/css">
<!-- CSS 전체 코드 복붙 -->
</style>
</head>
<body>
<!-- HTML의 figure 태그 복붙 -->
<script type="text/javascript">
<!-- 수정한 부분!!! -->
var installation = ${Model에서 받은 이름=datas.Installation=map의 이름}
//값을 배열로 바꾸는 작업
var ary = new Array();
for(var i=0 ; i < installation.length ; i++) {
ary.push(installation[i]);
}
<!-- JS 전체 코드 복붙 -->
///
series: [{
name: 'Installation',
data: ary
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
///
</script>
</body>
</html>
4. Installation 값이 SampleCtrl에서 입력한 99999로 바뀐 것을 확인할 수 있음!
'두두의 IT' 카테고리의 다른 글
| 가상머신에서 Anaconda 설치 후 Jupyter 사용하기 (Putty 이용) (0) | 2022.01.03 |
|---|---|
| Virtual Box 설치 > CentOS 설치 > 네트워크 설정 (0) | 2022.01.03 |
| Eclipse exERD (0) | 2021.12.29 |
| Oracle XE 설치하기 & Eclipse와 DB 연동하기 (0) | 2021.12.29 |
| Eclipse 설치하기 & Project 종류 (0) | 2021.12.29 |
