色分けが上手くいかずですが、棒グラフ作ってみました。
前回までの、「動的 Webプロジェクト」を使っていきます。
Eclipseで、「パッケージ・エクスプローラー」 のプロジェクトの中の「WebContent」フォルダを選択した状態で、右クリックし、「新規(N)」>「JSPファイル」を選択。「JSPファイル」が表示されて無い場合は、「その他(O)...」をクリックしてから、「Web」>「JSPファイル」で。
「ファイル名」を入力し、「次へ(N)>」をクリック。
「完了(F)」をクリック。
jspファイルが作成されました。
ファイルを編集します。
<%@page import="java.util.Random"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% // 棒グラフの高さ int indexLength = 24; // 棒グラフ int[] grafh = new int[indexLength]; Random rand = new Random(); // 棒グラフの中で一番長いものを判定用 int max = 0; // 棒グラフの長さを10で割ったときの余りを格納用 int[] grafh_surplus = new int[grafh.length]; for(int index = 0; index < grafh.length; index++) { grafh[index] = rand.nextInt(indexLength); // 最大値の検索 if(max < grafh[index]) { max = grafh[index]; } } %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>グラフを描画</title> <style> body { font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'MS Pゴシック','MS PGothic', sans-serif ; } span { display: inline-block; } .orange { background: #fe7316; } .yellowgreen { background: #c3d825; } .skyblue { background: #38a1db; } .red { background: #f6bfbc; } </style> </head> <body> <div id="grafh"> <% String color = ""; // 棒グラフのマス目が描画されたか int[] drawing_count = new int[grafh.length]; for(int row = 0; row < grafh.length; row++) { for(int col = 0; col < grafh.length; col++) { // グラフの色分け if(drawing_count[col] <= grafh[col] * 0.1) { color = "skyblue"; } else if(drawing_count[col] <= grafh[col] * 0.3) { color = "yellowgreen"; } else if(drawing_count[col] <= grafh[col] * 0.6) { color = "orange"; } else { color = "red"; } // 棒グラフ描画 if(max <= grafh[col]) { out.print("<span class=\"" + color + "\"> </span>"); // 描画カウント drawing_count[col]++; } else { out.print("<span> </span>"); } } max--; out.println("<br><span class=\"line\">"); grafh_surplus[row] = grafh[row] % 10; if(row == grafh.length -1) { for(int i = 0; i < grafh.length; i++) { out.print("--"); } out.println("</span><br>"); for(int i = 0; i < grafh.length; i++) { if(i != 0) { out.print("<span> </span>"); } out.print("<span>" + grafh_surplus[i] + "</span>"); } } } %> </div> </body> </html>
サーバーが起動しました。
Eclipseの内部ブラウザの表示。
ブラウザで「http://localhost:8080/プロジェクト名/jspファイル名」でアクセス。
点線の幅も足りてないという.....駄目だコリャ。
今回はこのへんで。