6. 차트
6.1 구글 차트
6.1.1 https://google-developers.appspot.com/chart/
6.1.2 사용 예
6.1.3 작업 순서
6.1.3.1 pom.xml에 라이브러리 추가
<dependency>
<groupId>com.googlecode.json-simple</groupId>
<artifactId>json-simple</artifaceId>
<version>1.1.1</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifaceId>
<version>2.9.4</version>
</dependency>
6.1.3.2 자바스크립트를 이용하여 차트 작성에 필요한 JSON 데이터를 리턴받아 화면에 출력시킴
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load('visualization', '1', {
'packages' : [ 'corechart' ]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url : "${path}/json/sampleData.json",
dataType : "json",
async : false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var chart = new google.visualization.PieChart(document
.getElementById('chart_div'));
chart.draw(data, {
width: 400,
height: 240
});
}
</script>
6.1.3.3 JSON 데이터의 형식
{
"cols": [
{"id":"","label":"Topping","pattern":"","type":"string"},
{"id":"","label":"Slices","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Mushrooms"},{"v":3}]},
{"c":[{"v":"Onions"},{"v":1}]},
{"c":[{"v":"Olives"},{"v":1}]},
{"c":[{"v":"Zucchini"},{"v":1}]},
{"c":[{"v":"Pepperoni"},{"v":2}]},
]
}
6.2 구글 차트 실습예제
6.2.1 views/include/admin_menu.jsp에 하이퍼링크 추가
6.2.2 controller.chart.GoogleChartController.java
6.2.3 service.chart.GoogleChartService.java
6.2.4 service.chart.GoogleChartServiceImpl.java
6.2.5 views/json/sampleData.json
6.2.7 servlet-context.xml에 리소스 매핑 추가
6.2.8 views/chart/chart01.jsp 01;06;25
6.3 JFreeChart
http://www.jfree.org/jfreechart/
다양한 형태의 차트 지원
Swing, JSP, Servlet에서 많이 사용되고 있음
pdf 또는 png, jpg 등의 다양한 이미지 파일 형식으로 export 가능
오픈 소스 라이브러리
pom.xml에 라이브러리 추가(최신 버전은 1.5.0이지만 여기서는 다른 라이브러리와의 호환성을 위해 1.0.18로 테스트)
6.4 JFreeChart 실습예제
6.4.1 controller.chart.JFreeChartController.java
6.4.2 service.chart.JFreeChartService.java
6.4.3 service.chart.JFreeChartServiceImpl.java
39;26