ドーナツグラフメモ

# 参考
https://algorithm.joho.info/programming/javascript/chartjs-pie-doughnut/
http://vdeep.net/chart-js

# ソース
```jsp:dounut.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Insert title here</title>
<script type="text/javascript">

	window.onload=function () {
	
	<c:forEach var="id" items="${requestScope.list}">
	    var data = [['未着手', '着手', '完了'],
	        [2, 15, 8]]

		  var ctx = document.getElementById('${id}').getContext('2d');
		  //var ctx = document.ggetElementsByClassName('graph').getContext('2d');
		  var datas = {
		    labels: data[0],
		    datasets: [{
		      backgroundColor: ["rgba(200,20,20,0.3)","rgba(20,200,20,0.3)","rgba(20,20,200,0.3)"],
		      hoverBackgroundColor: ["rgba(250,20,20,0.3)","rgba(20,250,20,0.3)","rgba(20,20,250,0.3)"],
		      data: data[1]
		    }]
		  };
		  var config = {
		    type: 'doughnut',
		    data: datas
		  };

		  var myChart = new Chart(ctx, config);
	</c:forEach>
};

</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table">
	<thead>
		<tr>
			<c:forEach var="id" items="${requestScope.list}" begin="0" end="2" varStatus="status">		      
		        <th>${status.count}</th>
			</c:forEach>
		</tr>
    </thead>
    
    <tbody>
    	<tr>
	    	<c:forEach var="id" items="${requestScope.list}" begin="0" end="2">
			    <td>
					<div style="width:300px"><canvas id="${id}"></canvas>
					</div>
	       		</td>
       		</c:forEach>
       	</tr>
	</tbody>
  </table>
</div>
</body>
</html>
```

```java:dounut.rb


import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class ExerProgress
 */
@WebServlet("/ExerProgress")
public class ExerProgress extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public ExerProgress() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		List<String> list = new ArrayList<>();
		list.add("g1");
		list.add("g2");
		list.add("g3");
		list.add("g4");
		list.add("g5");
		request.setAttribute("list", list);
		request.getRequestDispatcher("/exerProgress.jsp").forward(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

```