[Spring] 구글 차트(간단한 JSON)

1. 다운로드 & Setting

1) 다운로드

jackson-simple
jackson-databind
두가지가 필요

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 확인

2. JSP 만들기

1) 목록 만들기

chartMain.jsp

<%@ 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) 구글 차트

JSP에 구글 차트 cdn 추가

<!-- 구글 차트 -->
<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>

3. 차트로 출력할 JSON 객체 만들기

차트로 출력할 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}]}
]
}

4. Controller 만들기

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";
	}

차트 결과화면 :

Author And Source

이 문제에 관하여([Spring] 구글 차트(간단한 JSON)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gksmf6699/Spring-구글-차트간단한-JSON

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)