Java for文の練習棒グラフを描画

色分けが上手くいかずですが、棒グラフ作ってみました。

前回までの、「動的 Webプロジェクト」を使っていきます。

Eclipseで、「パッケージ・エクスプローラー」のプロジェクトの中の「WebContent」フォルダを選択した状態で、右クリックし、「新規（N）」>「JSPファイル」を選択。「JSPファイル」が表示されて無い場合は、「その他（O）...」をクリックしてから、「Web」>「JSPファイル」で。

f:id:ts0818:20170729225057j:plain

「ファイル名」を入力し、「次へ（N）>」をクリック。

f:id:ts0818:20170729225058j:plain

「完了（F）」をクリック。

f:id:ts0818:20170729225059j:plain

jspファイルが作成されました。

f:id:ts0818:20170729225100j:plain

ファイルを編集します。

<%@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 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>

f:id:ts0818:20170729225101j:plain