1212 [Sakila]Chart.js

SakilaMapper.java

@Mapper
public interface SakilaMapper {
	// 1. 카테고리 별  영화 수
	List<Map<String,Object>> selectFilmByCategory();
	
	// 2. 러닝타임(length)이 3시간 이상 / 2시간 이상 / 1시간 이상 / 1시간 미만인 영화 수
	Map<String,Object> selectFilmByLength();
	
	// 3. 대여료(rental_rate)가 4달러 이상 / 3달러 이상 / 2달러 이상 / 1달러 이상 / 1달러 미만인 영화 수
	Map<String,Object> selectFilmByRentalRate();
	
	// 4. 영화 등급(rating) 별 수
	List<Map<String,Object>> selectFilmRating();
	
	// 5.가장 많은 배우가 참여한 영화 1~5위
	List<Map<String,Object>> selectFilmByActor();
	
	// 6. 가장 많은 영화에 참여한 배우 1~5위
	List<Map<String,Object>> selectActorByFilm();
	
	// 7. 가장 많이 대여된 영화 1~5위
	List<Map<String,Object>> selectFilmByRental();
	
	// 8.가장 대여 매출이 높은 영화 1~5위
	List<Map<String,Object>> selectFilmByAmount();
	
	// 9. 영화를 가장 많이 대여한 고객 1~5위
	List<Map<String,Object>> selectCustomerByRental();
	
	// 10. 고객이 가장 많은 도시 1~5위
	List<Map<String,Object>> selectCityByCustomer();
	
	// 11. 고객이 가장 많은 나라 1~5위
	List<Map<String,Object>> selectCountryByCustomer();
	
	// 12. 지점 별 2005년 월별 매출액
	List<Map<String,Object>> selectAmountByYear(Integer year);
}

 

쿼리 -> xml

SakilaMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.restSakila.mapper.SakilaMapper">
	<!-- 1. 카테고리 별  영화 수 -->
	<select id="selectFilmByCategory" resultType="Map">
		SELECT 
		   c.category_id categortId
		   , c.name name
		   , COUNT(*) filmCount
		FROM category c
		INNER JOIN film_category fc
		ON c.category_id = fc.category_id
		GROUP BY c.category_id
	</select>
	
	<!-- 2. 러닝타임(length)이 3시간 이상 / 2시간 이상 / 1시간 이상 / 1시간 미만인 영화 수 -->
	<select id="selectFilmByLength" resultType="Map">
		SELECT 
			SUM(CASE WHEN length &lt; 60 THEN 1 ELSE 0 END) 'zero',
			SUM(CASE WHEN length &gt;= 60 AND length &lt; 120 THEN 1 ELSE 0 END) 'one',
			SUM(CASE WHEN length &gt;= 120 AND length &lt; 180 THEN 1 ELSE 0 END) 'two',
		    SUM(CASE WHEN length &gt;= 180 THEN 1 ELSE 0 END) 'three'
		FROM film
	</select>
	
	<!-- 3. 대여료(rental_rate)가 4달러 이상 / 3달러 이상 / 2달러 이상 / 1달러 이상 / 1달러 미만인 영화 수 -->
	<select id="selectFilmByRentalRate" resultType="Map">
		SELECT 
			SUM(CASE WHEN rental_rate &lt; 1 THEN 1 ELSE 0 END) '0dollar',
			SUM(CASE WHEN rental_rate &gt;= 1 AND rental_rate &lt; 2 THEN 1 ELSE 0 END) '1dollar',
		    SUM(CASE WHEN rental_rate &gt;= 2 AND rental_rate &lt; 3 THEN 1 ELSE 0 END) '2dollar',
		    SUM(CASE WHEN rental_rate &gt;= 3 AND rental_rate &lt; 4 THEN 1 ELSE 0 END) '3dollar',
		    SUM(CASE WHEN rental_rate &gt;= 4 THEN 1 ELSE 0 END) '4dollar'
		FROM film;
	</select>
	
	<!-- 4. 영화 등급(rating) 별 수 -->
	<select id="selectFilmRating" resultType="Map">
		SELECT 
		   rating
		   , COUNT(*) ratingCount
		FROM film
		GROUP BY rating
	</select>
	
	<!-- 5.가장 많은 배우가 참여한 영화 1~5위 -->
	<select id="selectFilmByActor" resultType="Map">
		SELECT 
		   f.film_id filmId
		   , f.title title
		   , COUNT(*) totalActor
		FROM film_actor fa
		INNER JOIN film f
		ON fa.film_id = f.film_id
		GROUP BY f.film_id
		ORDER BY totalActor DESC
		LIMIT 5
	</select>
	
	<!-- 6. 가장 많은 영화에 참여한 배우 1~5위 -->
	<select id="selectActorByFilm" resultType="Map">
		SELECT 
		   a.first_name firstName
		   , a.last_name lastName
		   , COUNT(*) totalFilm
		FROM film_actor fa
		INNER JOIN actor a
		ON fa.actor_id = a.actor_id
		GROUP BY fa.actor_id
		ORDER BY totalFilm DESC
		LIMIT 5
	</select>
	
	<!-- 7. 가장 많이 대여된 영화 1~5위 -->
	<select id="selectFilmByRental" resultType="Map">
		SELECT 
			f.title title, 
			count(*) totalRental
		FROM film f INNER JOIN inventory i
		ON f.film_id = i.film_id
		INNER JOIN rental r ON 
		i.inventory_id = r.inventory_id
		GROUP BY f.title
		ORDER BY totalRental DESC
		LIMIT 5
	</select>
	
	<!-- 8.가장 대여 매출이 높은 영화 1~5위 -->
	<select id="selectFilmByAmount" resultType="Map">
		SELECT 
		   f.title title
		   , SUM(p.amount) totalAmount
		FROM payment p
		INNER JOIN rental r
		ON p.rental_id = r.rental_id
		INNER JOIN inventory iv
		ON r.inventory_id = iv.inventory_id
		INNER JOIN film f
		ON iv.film_id = f.film_id
		GROUP BY f.film_id
		ORDER BY totalAmount DESC
		LIMIT 5
	</select>
	
	<!-- 9. 영화를 가장 많이 대여한 고객 1~5위 -->
	<select id="selectCustomerByRental" resultType="Map">
		SELECT 
		   c.customer_id customerId
		   , c.first_name firstName
		   , c.last_name lastName
		   , COUNT(*) rentalCount
		FROM customer c
		INNER JOIN rental r
		ON c.customer_id = r.customer_id
		GROUP BY c.customer_id
		ORDER BY rentalCount DESC
		LIMIT 5
	</select>
	
	<!-- 10. 고객이 가장 많은 도시 1~5위 -->
	<select id="selectCityByCustomer" resultType="Map">
		SELECT 
		   ci.city city
		   , COUNT(*) customers
		FROM customer c
		INNER JOIN address a
		ON c.address_id = a.address_id
		INNER JOIN city ci
		ON a.city_id = ci.city_id
		GROUP BY ci.city_id
		ORDER BY customers DESC
		LIMIT 5
	</select>
	
	<!-- 11. 고객이 가장 많은 나라 1~5위 -->
	<select id="selectCountryByCustomer" resultType="Map">
		SELECT 
			country.country country
			, COUNT(*) customers
		FROM customer c
		JOIN address a
		ON c.address_id = a.address_id
		JOIN city
		ON a.city_id = city.city_id
		JOIN country
		ON city.country_id = country.country_id
		GROUP BY country.country_id
		ORDER BY COUNT(*) DESC
		LIMIT 5
	</select>
	
	<!-- 12.지점 별 2005년 월별 매출액 -->
	<select id="selectAmountByYear" parameterType="Integer" resultType="Map">
		SELECT 
		   sr.store_id storeId,
		   SUM(CASE WHEN MONTH(p.payment_date) = 1 THEN p.amount ELSE 0 END) "January",
		   SUM(CASE WHEN MONTH(p.payment_date) = 2 THEN p.amount ELSE 0 END) "February",
		   SUM(CASE WHEN MONTH(p.payment_date) = 3 THEN p.amount ELSE 0 END) "March",
		   SUM(CASE WHEN MONTH(p.payment_date) = 4 THEN p.amount ELSE 0 END) "April",
		   SUM(CASE WHEN MONTH(p.payment_date) = 5 THEN p.amount ELSE 0 END) "May",
		   SUM(CASE WHEN MONTH(p.payment_date) = 6 THEN p.amount ELSE 0 END) "June",
		   SUM(CASE WHEN MONTH(p.payment_date) = 7 THEN p.amount ELSE 0 END) "July",
		   SUM(CASE WHEN MONTH(p.payment_date) = 8 THEN p.amount ELSE 0 END) "August",
		   SUM(CASE WHEN MONTH(p.payment_date) = 9 THEN p.amount ELSE 0 END) "September",
		   SUM(CASE WHEN MONTH(p.payment_date) = 10 THEN p.amount ELSE 0 END) "October",
		   SUM(CASE WHEN MONTH(p.payment_date) = 11 THEN p.amount ELSE 0 END) "November",
		   SUM(CASE WHEN MONTH(p.payment_date) = 12 THEN p.amount ELSE 0 END) "December"
		FROM payment p
		JOIN staff sf 
		ON p.staff_id = sf.staff_id
		JOIN store sr
		ON sf.store_id = sr.store_id
		WHERE YEAR(p.payment_date) = #{year}
		GROUP BY sr.store_id;
	</select>
</mapper>

 

Rest Controller

@RestController
public class SakilaRest {
	@Autowired SakilaMapper sakilaMapper;
	
	@GetMapping("/getFilmByCategory") // 1
	public ResponseEntity<List<Map<String,Object>>> getFilmByCategory(){
		ResponseEntity<List<Map<String, Object>>> re = null;
		try {
			re = ResponseEntity.ok(sakilaMapper.selectFilmByCategory()); // ok: 200번대
		} catch(Exception e) {
			re = ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
			// re = ResponseEntity.status(500).build();
		}
		return re;
	}
	
	@GetMapping("/getFilmByLength") // 2
	public ResponseEntity<Map<String,Object>> getFilmByLength(){
		ResponseEntity<Map<String, Object>> re = null;
		re = ResponseEntity.ok(sakilaMapper.selectFilmByLength());
		return re;
	}
	
	@GetMapping("/getFilmByRentalRate") // 3
	public ResponseEntity<Map<String,Object>> getFilmByRentalRate(){
		ResponseEntity<Map<String, Object>> re = null;
		re = ResponseEntity.ok(sakilaMapper.selectFilmByRentalRate());
		return re;
	}
	
	@GetMapping("/getFilmRating") // 4
	public ResponseEntity<List<Map<String,Object>>> getFilmRating(){
		ResponseEntity<List<Map<String, Object>>> re = null;
		re = ResponseEntity.ok(sakilaMapper.selectFilmRating());
		return re;
	}
	
	@GetMapping("/getFilmByActor") // 5
	public ResponseEntity<List<Map<String,Object>>> getFilmByActor(){
		ResponseEntity<List<Map<String, Object>>> re = null;
		re = ResponseEntity.ok(sakilaMapper.selectFilmByActor());
		return re;
	}
	
	@GetMapping("/getActorByFilm") // 6
	public ResponseEntity<List<Map<String,Object>>> getActorByFilm(){
		ResponseEntity<List<Map<String, Object>>> re = null;
		re = ResponseEntity.ok(sakilaMapper.selectActorByFilm());
		return re;
	}
	
	@GetMapping("/getFilmByRental") // 7
	public ResponseEntity<List<Map<String,Object>>> getFilmByRental(){
		ResponseEntity<List<Map<String, Object>>> re = null;
		re = ResponseEntity.ok(sakilaMapper.selectFilmByRental());
		return re;
	}
	
	@GetMapping("/getFilmByAmount") // 8
	public ResponseEntity<List<Map<String,Object>>> getFilmByAmount(){
		ResponseEntity<List<Map<String, Object>>> re = null;
		re = ResponseEntity.ok(sakilaMapper.selectFilmByAmount());
		return re;
	}
	
	@GetMapping("/getCustomerByRental") // 9
	public ResponseEntity<List<Map<String,Object>>> getCustomerByRental(){
		ResponseEntity<List<Map<String, Object>>> re = null;
		re = ResponseEntity.ok(sakilaMapper.selectCustomerByRental());
		return re;
	}
	
	@GetMapping("/getCityByCustomer") // 10
	public ResponseEntity<List<Map<String,Object>>> getCityByCustomer(){
		ResponseEntity<List<Map<String, Object>>> re = null;
		re = ResponseEntity.ok(sakilaMapper.selectCityByCustomer());
		return re;
	}
	
	@GetMapping("/getCountryByCustomer") // 11
	public ResponseEntity<List<Map<String,Object>>> getCountryByCustomer(){
		ResponseEntity<List<Map<String, Object>>> re = null;
		re = ResponseEntity.ok(sakilaMapper.selectCountryByCustomer());
		return re;
	}
	
	@GetMapping("/getAmountByYear/{year}") // 12
	public ResponseEntity<List<Map<String,Object>>> getAmountByYear(@PathVariable Integer year){
		ResponseEntity<List<Map<String, Object>>> re = null;
		re = ResponseEntity.ok(sakilaMapper.selectAmountByYear(year));
		return re;
	}
}

 

<body>
	<h1>HOME</h1>
	<div><!-- 대시보드 4행 3열: 12개 차트 -->
		<!-- 1행 -->
		<div class="row">
			<div class="col-sm-3">
				<canvas id="chartGetFilmByCategory" style="width:100%;"></canvas>
			</div>
			<div class="col-sm-3">
				<canvas id="chartGetFilmByLength" style="width:100%;"></canvas>
			</div>
			<div class="col-sm-3">
				<canvas id="chartGetFilmByRentalRate" style="width:100%;"></canvas>
			</div>
		</div><br>
		<!-- 2행 -->
		<div class="row">
			<div class="col-sm-3">
				<canvas id="chartGetFilmRating" style="width:100%;"></canvas>
			</div>
			<div class="col-sm-3">
				<canvas id="chartGetFilmByActor" style="width:100%;"></canvas>
			</div>
			<div class="col-sm-3">
				<canvas id="chartGetActorByFilm" style="width:100%;"></canvas>
			</div>
		</div><br>
		<!-- 3행 -->
		<div class="row">
			<div class="col-sm-3">
				<canvas id="chartGetFilmByRental" style="width:100%;"></canvas>
			</div>
			<div class="col-sm-3">
				<canvas id="chartGetFilmByAmount" style="width:100%;"></canvas>
			</div>
			<div class="col-sm-3">
				<canvas id="chartGetCustomerByRental" style="width:100%;"></canvas>
			</div>
		</div><br>
		<!-- 4행 -->
		<div class="row">
			<div class="col-sm-3">
				<canvas id="chartGetCityByCustomer" style="width:100%;"></canvas>
			</div>
			<div class="col-sm-3">
				<canvas id="chartGetCountryByCustomer" style="width:100%;"></canvas>
			</div>
			<div class="col-sm-3">
				<canvas id="chartGetAmountByYear" style="width:100%;"></canvas>
			</div>
		</div>
	</div>
	<script>
		// 3
		$.ajax({
			url:'/getFilmByRentalRate'
		})
		.done(function(json){
				const xValues = [];
				const yValues = [];
				
				// json 데이터를 xValues, yValues변환
				for(key in json){
					xValues.push(key);
					yValues.push(json[key])
				}
				
				const barColors = ["#b91d47","#00aba9","#2b5797","#e8c3b9","#1e7145"];
				
				new Chart("chartGetFilmByRentalRate", {
					  type: "doughnut",
					  data: {
					    labels: xValues,
					    datasets: [{
					      backgroundColor: barColors,
					      data: yValues
					    }]
					  },
					  options: {
								  title: {
								    display: true,
								    text: "대여료 별 영화 수"
								  }
					  }
				});
		})
		.fail(function(){
			alert('REST호출 실패: chartGetFilmByRentalRate');
		});
		
		// 4
		$.ajax({
			url:'/getFilmRating'
		})
		.done(function(json){
				const xValues = [];
				const yValues = [];
				
				// json 데이터를 xValues, yValues변환
				$(json).each(function(index,item){
					xValues.push(item.rating);
					yValues.push(item.ratingCount)
				});
				const barColors = ["#b91d47","#00aba9","#2b5797","#e8c3b9","#1e7145"];
				
				new Chart("chartGetFilmRating", {
					  type: "bar",
					  data: {
					    labels: xValues,
					    datasets: [{
					      backgroundColor: barColors,
					      data: yValues
					    }]
					  },
					  options: {
								  title: {
								    display: true,
								    text: "영화 등급 별 수"
								  }
					  }
				});
		})
		.fail(function(){
			alert('REST호출 실패: chartGetFilmRating');
		});
	
		// 5
		$.ajax({
			url:'/getFilmByActor'
		})
		.done(function(json){
				const xValues = [];
				const yValues = [];
				
				// json 데이터를 xValues, yValues변환
				$(json).each(function(index,item){
					xValues.push(item.title);
					yValues.push(item.totalActor)
				});
				const barColors = ["#b91d47","#00aba9","#2b5797","#e8c3b9","#1e7145"];
				
				new Chart("chartGetFilmByActor", {
					  type: "doughnut",
					  data: {
					    labels: xValues,
					    datasets: [{
					      backgroundColor: barColors,
					      data: yValues
					    }]
					  },
					  options: {
								  title: {
								    display: true,
								    text: "많은 배우가 참여한 영화 1~5위"
								  }
					  }
				});
		})
		.fail(function(){
			alert('REST호출 실패: chartGetFilmByActor');
		});
	
		// 6
		$.ajax({
			url:'/getActorByFilm'
		})
		.done(function(json){
				const xValues = [];
				const yValues = [];
				
				// json 데이터를 xValues, yValues변환
				$(json).each(function(index,item){
					xValues.push(item.firstName);
					yValues.push(item.totalFilm)
				});
				const barColors = ["#b91d47","#00aba9","#2b5797","#e8c3b9","#1e7145"];
				
				new Chart("chartGetActorByFilm", {
					  type: "doughnut",
					  data: {
					    labels: xValues,
					    datasets: [{
					      backgroundColor: barColors,
					      data: yValues
					    }]
					  },
					  options: {
								  title: {
								    display: true,
								    text: "영화에 많이 참여한 배우 1~5위(First name)"
								  }
					  }
				});
		})
		.fail(function(){
			alert('REST호출 실패: chartGetActorByFilm');
		});
	
		// 7
		$.ajax({
			url:'/getFilmByRental'
		})
		.done(function(json){
				const xValues = [];
				const yValues = [];
				
				// json 데이터를 xValues, yValues변환
				$(json).each(function(index,item){
					xValues.push(item.title);
					yValues.push(item.totalRental)
				});
				const barColors = ["#b91d47","#00aba9","#2b5797","#e8c3b9","#1e7145"];
				
				new Chart("chartGetFilmByRental", {
					  type: "doughnut",
					  data: {
					    labels: xValues,
					    datasets: [{
					      backgroundColor: barColors,
					      data: yValues
					    }]
					  },
					  options: {
								  title: {
								    display: true,
								    text: "많이 대여된 영화 1~5위"
								  }
					  }
				});
		})
		.fail(function(){
			alert('REST호출 실패: chartGetFilmByRental');
		});
	
		// 8
		$.ajax({
			url:'/getFilmByAmount'
		})
		.done(function(json){
				const xValues = [];
				const yValues = [];
				
				// json 데이터를 xValues, yValues변환
				$(json).each(function(index,item){
					xValues.push(item.title);
					yValues.push(item.totalAmount)
				});
				const barColors = ["#b91d47","#00aba9","#2b5797","#e8c3b9","#1e7145"];
				
				new Chart("chartGetFilmByAmount", {
					  type: "doughnut",
					  data: {
					    labels: xValues,
					    datasets: [{
					      backgroundColor: barColors,
					      data: yValues
					    }]
					  },
					  options: {
								  title: {
								    display: true,
								    text: "대여 매출이 높은 영화 1~5위"
								  }
					  }
				});
		})
		.fail(function(){
			alert('REST호출 실패: chartGetFilmByAmount');
		});
	
		// 9
		$.ajax({
			url:'/getCustomerByRental'
		})
		.done(function(json){
				const xValues = [];
				const yValues = [];
				
				// json 데이터를 xValues, yValues변환
				$(json).each(function(index,item){
					xValues.push(item.firstName);
					yValues.push(item.rentalCount)
				});
				const barColors = ["#b91d47","#00aba9","#2b5797","#e8c3b9","#1e7145"];
				
				new Chart("chartGetCustomerByRental", {
					  type: "doughnut",
					  data: {
					    labels: xValues,
					    datasets: [{
					      backgroundColor: barColors,
					      data: yValues
					    }]
					  },
					  options: {
								  title: {
								    display: true,
								    text: "영화를 많이 대여한 고객 1~5위 (First Name)"
								  }
					  }
				});
		})
		.fail(function(){
			alert('REST호출 실패: chartGetCustomerByRental');
		});
	
		// 10
		$.ajax({
			url:'/getCityByCustomer'
		})
		.done(function(json){
				const xValues = [];
				const yValues = [];
				
				// json 데이터를 xValues, yValues변환
				$(json).each(function(index,item){
					xValues.push(item.city);
					yValues.push(item.customers)
				});
				const barColors = ["#b91d47","#00aba9","#2b5797","#e8c3b9","#1e7145"];
				
				new Chart("chartGetCityByCustomer", {
					  type: "doughnut",
					  data: {
					    labels: xValues,
					    datasets: [{
					      backgroundColor: barColors,
					      data: yValues
					    }]
					  },
					  options: {
								  title: {
								    display: true,
								    text: "고객이 많은 도시 1~5위"
								  }
					  }
				});
		})
		.fail(function(){
			alert('REST호출 실패: chartGetCountryByCustomer');
		});
	
		// 11
		$.ajax({
			url:'/getCountryByCustomer'
		})
		.done(function(json){
				const xValues = [];
				const yValues = [];
				
				// json 데이터를 xValues, yValues변환
				$(json).each(function(index,item){
					xValues.push(item.country);
					yValues.push(item.customers)
				});
				const barColors = ["#b91d47","#00aba9","#2b5797","#e8c3b9","#1e7145"];
				
				new Chart("chartGetCountryByCustomer", {
					  type: "doughnut",
					  data: {
					    labels: xValues,
					    datasets: [{
					      backgroundColor: barColors,
					      data: yValues
					    }]
					  },
					  options: {
								  title: {
								    display: true,
								    text: "고객이 많은 나라 1~5위"
								  }
					  }
				});
		})
		.fail(function(){
			alert('REST호출 실패: chartGetCountryByCustomer');
		});
	
		// 12.
		$.ajax({
			url: '/getAmountByYear/2005'
		})
		.done(function(json){ // 멀티라인 차트
			const xValues = ['January','February','March','April','May','June','July','August','September','October','November','December'];
			let y1 = [];
			$(xValues).each(function(index,item){
				y1.push(json[0][item]);
			});
			
			let y2 = [];
			$(xValues).each(function(index,item){
				y2.push(json[1][item]);
			})
			
			new Chart("chartGetAmountByYear", {
				  type: "line",
				  data: {
				    labels: xValues,
				    datasets: [{ 
				      label: '1지점',
				      data: y1,
				      borderColor: "orange",
				      fill: false
				    }, { 
				      label: '2지점',
				      data: y2,
				      borderColor: "blue",
				      fill: false
				    }]
				  },
				  options: {
				    legend: {display: true},
				    title: {
					    display: true,
					    text: "지점 별 2005년 월별 매출액"
					  }
				  }
				}); // 멀티라인 차트 끝
		})
		.fail(function(){
			
		});
		
		// 2. chartGetFilmByLength
		$.ajax({
			url:'/getFilmByLength'
		})
		.done(function(json){
				const xValues = [];
				const yValues = [];
				
				// json 데이터를 xValues, yValues변환
				for(key in json){
					xValues.push(key);
					yValues.push(json[key])
				}
				
				const barColors = ["#b91d47","#00aba9","#2b5797","#e8c3b9","#1e7145"];
				
				new Chart("chartGetFilmByLength", {
					  type: "doughnut",
					  data: {
					    labels: xValues,
					    datasets: [{
					      backgroundColor: barColors,
					      data: yValues
					    }]
					  },
					  options: {
								  title: {
								    display: true,
								    text: "러닝타임 별 영화 수"
								  }
					  }
				});
		})
		.fail(function(){
			alert('REST호출 실패: chartGetFilmByCategory');
		});
	
		// 1. chartGetFileByCategory
		$.ajax({
			url:'/getFilmByCategory'
		})
		.done(function(json){
				const xValues = [];
				const yValues = [];
				
				// json 데이터를 xValues, yValues변환
				$(json).each(function(index,item){
					xValues.push(item.name);
					yValues.push(item.filmCount)
				});
				const barColors = ["green","blue","orange","brown"
									,"green","blue","orange","brown"
									,"green","blue","orange","brown"
									,"green","blue","orange","brown"];
				
				new Chart("chartGetFilmByCategory", {
					  type: "bar",
					  data: {
					    labels: xValues,
					    datasets: [{
					      backgroundColor: barColors,
					      data: yValues
					    }]
					  },
					  options: {
								  legend: {display: false},
								  title: {
								    display: true,
								    text: "카테고리 별 영화 수"
								  }
					  }
				});
		})
		.fail(function(){
			alert('REST호출 실패: chartGetFilmByCategory');
		});
	</script>
</body>

 

--> bar, doughnut, multi line 차트

localhost/home.html