参考

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

ソース

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>

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

}

ドーナツグラフメモ

参考

ソース