Spring]Googleチャート(簡単なJSON)

15332 ワード
テキストリンク

1.ダウンロードと設定


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個クリック構築の検証>構築の検証に成功

    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にGoogleチャートcdn
    • を追加
    <!-- 구글 차트 -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
  • JavaScriptコード
    • <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.コントローラの作成

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

    グラフ結果画面:


    航海993期学習2組2回(Javascript文法資料型)
    Seleniumによる週次作業レポートの自動化