HTML5+JSP
XHTML5と JSPを連携させて、グラフを表示してみる。
インラインSVGの機能を使うと、特別なライブラリが必要ないので、グラフの作成が非常に楽になります。
（円グラフを描くには、ライブラリを使った方が良いです。円上の一点を計算出来るなら、SVGだけで円グラフも出来ます）
１、テーブル
以下のようなテーブルから、商品ごとの売り上げを表示するJSPをまず書く。
商品表
w2k=# select * from bdb_items; id | name | price | current | sid ----+---------+-------+---------+------ 1 | USBHab | 1200 | 41 | 1002 2 | Router | 7000 | 77 | 1001 3 | Sandbag | 3000 | 8 | 1003 (3 rows)
顧客表
w2k=# select * from bdb_users; id | name ----+----------- 1 | Yamamoto 2 | Takahashi 3 | Fukuda (3 rows)
売上表
w2k=# select * from bdb_sales;
id | uid | iid | amount | cdate
----+-----+-----+--------+----------------------------
1 | 1 | 1 | 2 | 2010-05-24 14:15:25.856016
2 | 1 | 2 | 4 | 2010-05-24 14:15:25.877221
4 | 1 | 1 | 2 | 2010-05-24 21:02:28.237193
5 | 1 | 2 | 5 | 2010-05-24 21:02:41.694484
7 | 1 | 1 | 3 | 2010-05-26 14:53:36.887445
8 | 1 | 1 | 7 | 2010-05-26 14:54:22.284587
10 | 1 | 1 | 3 | 2010-05-26 15:01:09.293183
11 | 1 | 2 | 3 | 2010-05-26 15:01:09.335036
12 | 1 | 1 | 2 | 2010-05-26 15:03:41.07143
15 | 1 | 1 | 6 | 2010-05-26 15:08:06.878878
17 | 1 | 2 | 5 | 2010-05-26 15:11:03.98625
18 | 1 | 3 | 19 | 2010-05-26 15:11:03.991002
19 | 1 | 1 | 6 | 2010-05-26 15:11:27.75781
21 | 1 | 2 | 9 | 2010-05-26 15:13:27.033916
22 | 1 | 2 | 6 | 2010-05-26 15:13:27.041494
23 | 1 | 2 | 11 | 2010-05-26 15:13:27.045676
3 | 2 | 3 | 3 | 2010-05-24 14:15:25.881239
6 | 2 | 1 | 5 | 2010-05-26 14:50:17.108858
9 | 2 | 1 | 7 | 2010-05-26 14:54:58.781704
13 | 3 | 1 | 3 | 2010-05-26 15:03:41.075274
14 | 3 | 1 | 2 | 2010-05-26 15:04:07.060556
16 | 3 | 1 | 6 | 2010-05-26 15:11:03.980408
20 | 3 | 1 | 5 | 2010-05-26 15:13:04.473796
(23 rows)
商品ごとの売り上げ合計
w2k=# select a.name,sum(amount * price) as goukei from bdb_items a, bdb_sales b where a.id=b.iid group by a.name; name | goukei ---------+-------- USBHab | 70800 Router | 301000 Sandbag | 66000 (3 rows)
上のSQLの結果を表示するJSP(XHTML5フォーマットで出力）
<!DOCTYPE html>
<%@ page contentType="text/html; charset=UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<fmt:requestEncoding value="UTF-8"/>
<fmt:setLocale value="ja_JP" />
<sql:setDataSource dataSource="jdbc/hanrin" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>商品ごとの売り上げ合計</h1>
<sql:query sql="select a.name,sum(amount * price) as goukei from bdb_items a, bdb_sales b where a.id=b.iid group by a.name;" var="rs" />
<table border="1" cellpadding="10">
<tr><th>商品名</th><th>売り上げ合計</th></tr>
<c:forEach var="i" items="${rs.rows}">
<tr><td>${i.name}</td><td style="text-align:right;"><fmt:formatNumber type="currency" value="${i.goukei}" /></td></tr>
</c:forEach>
</table>
</body>
</html>
これをSVGグラフにする。
y座標用変数yyを２０にして、これを増やしてゆく。ラベルの文字とグラフがちょうどそろうように調整する。
売り上げ合計は、数字が大きいので、1000で割る。
<!DOCTYPE html>
<%@ page contentType="text/html; charset=UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<fmt:requestEncoding value="UTF-8"/>
<fmt:setLocale value="ja_JP" />
<sql:setDataSource dataSource="jdbc/hanrin" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>商品ごとの売り上げ合計</h1>
<sql:query sql="select a.name,sum(amount * price) as goukei from bdb_items a, bdb_sales b where a.id=b.iid group by a.name;" var="rs" />
<table border="1" cellpadding="10">
<tr><th>商品名</th><th>売り上げ合計</th></tr>
<c:forEach var="i" items="${rs.rows}">
<tr><td>${i.name}</td><td style="text-align:right;"><fmt:formatNumber type="currency" value="${i.goukei}" /></td></tr>
</c:forEach>
</table>
<c:set var="yy" value="20" />
<svg xmlns="http://www.w3.org/2000/svg" width="550" height="150" style="border: 1px solid black;">
<c:forEach var="j" items="${rs.rows}">
<rect fill="red" x="100" y="${yy}" width="${j.goukei / 1000}" height="10" />
<text x="10" y="${yy+10}">${j.name}</text>
<c:set var="yy" value="${yy+20}" />
</c:forEach>
</svg>
</body>
</html>
問題１
public_html/tomcat/html5にsvggraph.jspというファイルを作り、上の例を入力し、
Safariで表示してください。
次に顧客ごとの売り上げ合計を、グラフ表示しなさい。（商品ごとのグラフの横に表示する）
グラフの色は青にしてください。
問題2
問題１のsvggraph.jspをsvggraph2.jspという名前でコピーしなさい。
public_html/tomcat/html5にsvggraph2.jspというファイルが出来ます。
これを以下のように、改良しなさい。
１、商品ごと、顧客ごとの表示を、切り替えるボタンを作りなさい。
２、グラフの棒の色を切り替えるボタンを作りなさい。