1) 다운로드
2) pom.xml 설정
아래 소스 추가
<!-- 구글 차트 시작 -->
<!-- https://mvnrepository.com/artifact/com.googlecode.json-simple/json-simple -->
<dependency>
<groupId>com.googlecode.json-simple</groupId>
<artifactId>json-simple</artifactId>
<version>1.1.1</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.13.1</version>
</dependency>
3) 프로젝트 우클릭 > Run As > 4 Maven Build 클릭 > Build Success 확인
1) 목록 만들기
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<title>구글차트</title>
</head>
<body>
<a href="/chart/chart01">구글차트(JSON)</a><br>
<a href="/chart/chartFruit">좋아하는 과일 판매가 차트</a><br>
<a href="/chart/chart02">상품 별 판매 금액 합계 차트</a><br>
</body>
</html>
2) 구글 차트
<!-- 구글 차트 -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
//구글 차트 라이브러리 로딩
google.load("visualization", "1",{
"packages":["corechart"]
});
//Callback : 구글 차트 로딩이 완료가 된 후에 drawChar라는 함수를 실행(파라미터는 없음)
//responseText : json 데이터를 텍스트로 읽어들임
//JSON.stringify(j/s객체) : javascript 객체를 json 데이터를 읽어들임
google.setOnLoadCallback(drawChart);
function drawChart(){
var jsonData = $.ajax({
url: "/resources/json/sampleData.json",
dataType:"json",
async:false
}).responseText;
console.log("jsonData : " + jsonData);
//1) 데이터 테이블 생성
var data = new google.visualization.DataTable(jsonData);
//2) 차트 출력할 영역 지정
var chart = new google.visualization.ColumnChart(document.getElementById("chart_div"));
//1) + 2) => 차트 출력! 차트객체.draw(데이터테이블, 옵션)
//curveType : "function" => 곡선
chart.draw(data,{
title:"차트 예제",
curveType:"function",
width:600,
height:440
})
}
</script>
차트로 출력할 JSON 파일 :
{
"cols":[
{"id":"","label":"상품명","pattern":"","type":"string"},
{"id":"","label":"금액","pattern":"","type":"number"}
],
"rows" :[
{"c":[{"v":"귤"},{"v":35000}]},
{"c":[{"v":"딸기"},{"v":88000}]},
{"c":[{"v":"레몬"},{"v":16500}]},
{"c":[{"v":"오렌지"},{"v":20000}]},
{"c":[{"v":"키위"},{"v":30000}]},
{"c":[{"v":"샤인머스캣"},{"v":15000}]}
]
}
package kr.or.ddit.common;
import org.json.simple.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import kr.or.ddit.lprod.service.LprodService;
@RequestMapping("/chart")
@Controller
public class ChartController {
@Autowired
LprodService lprodService;
@GetMapping("/chartMain")
public String chartMain() {
//forwarding
return "chart/chartMain";
}
@GetMapping("/chart01")
public String chart01() {
//forwarding
return "chart/chart01";
}
@GetMapping("/chartFruit")
public String chartFruit() {
//forwarding
return "chart/chartFruit";
}
@GetMapping("/chart02")
public String chart02() {
//forwarding
return "chart/chart02";
}