|
JavaのWebアプリケーション開発フレームワークによる、Webサイト開発の顛末記です。 EclipseのMavenを使った、Spring-MVC、Thymeleaf、MyBatis 等のプログラミングテクニックを、 備忘録的に記録しています。実際に動くソースコードを多用して説明していますので、 これからEclipseや、Spring-MVCを始めたいと思っている人にとって、少しでも参考になれば幸いです。 |
|
|
JavaのWebアプリケーション開発フレームワークによる、Webサイト開発の顛末記です。 EclipseのMavenを使った、Spring-MVC、Thymeleaf、MyBatis 等のプログラミングテクニックを、 備忘録的に記録しています。実際に動くソースコードを多用して説明していますので、 これからEclipseや、Spring-MVCを始めたいと思っている人にとって、少しでも参考になれば幸いです。 |
<!doctype html>
<html lang="ja">
<head>
<title>JSONパラメータ受け渡しのサンプル</title>
<meta charset="UTF-8" />
<!--[if lt IE 9]>
<script type="text/javascript" src="./js/jquery-1.11.2.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="./js/jquery-2.2.3.js"></script>
<!--<![endif]-->
<script type="text/javascript" src="./js/Chart.js"></script>
<script type="text/javascript">
<!--
$(function(){
//ドーナツグラフ用データ
var DoughnutChartData;
/***********************************
//以下は、ドーナツグラフ用サンプルデータフォーマットです。
//Java側で、このフォーマットのJSON文字列を生成します。
var DoughnutChartData = {
labels: [
"Red",
"Green",
"Yellow"
],
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};
***********************************/
//棒グラフオプション y軸を0Baseとする
//これが無いと、グラフデータ最小値がy軸ベースになりカッコよくない
var options = {
scales: {
yAxes: [{
stacked: true
}]
}
};
//凡例を表示させない場合は下を有効にする
Chart.defaults.global.legend.display=false;
//凡例を下に表示する
//Chart.defaults.global.legend.position="bottom";
//ドーナツグラフグラフサイズ設定
$("#DoughnutCanvas").width(300);
$("#DoughnutCanvas").height(300);
//ドーナツグラフのインスタンスを作成する
var ctxDoughnut = $("#DoughnutCanvas")[0].getContext("2d");
myDoughnutChart = null;
//グラフデータリクエストAjaxの実行
//category : 画面で選択されたセレクトボックスの値
var postRequest = function (category) {
//分類パラメータをJSONオブジェクト化する
var reqparam = {
"category" : category
};
//Ajaxを実行する(Over 1.8系)
$.ajax({
url : "./doughnutchartdraw2.html", //実行するサーブレット
dataType: "json", //サーバから返却されるデータの型(xml, html, json, jsonp, text ...
type : "post", //post, get
data : JSON.stringify(reqparam),
}).done(function(resData) { //callback data:response
//resDataにドーナツグラフ描画情報がJSON形式で返却されてくる
drawDoughnutChart(resData); //グラフ描画
}).fail(function(resData) {
console.log("faild resData["+JSON.stringify(resData,null,' ')+"]");
});
}
//ドーナツグラフの描画Callback
//response:Ajaxで返却されたグラフデータ(JSON)
var drawDoughnutChart = function(response) {
//ドーナツグラフを一旦destroy
if(myDoughnutChart != null) myDoughnutChart.destroy();
//Chartインスタンスを作り直し
//ドーナツグラフの描画
myDoughnutChart = new Chart(ctxDoughnut,{
type: 'bar', //棒グラフ
data: response, //ドーナツグラフデータをセットする
options:options //オプション
});
}
//グラフ描画ボタンクリック時
$("#draw").click(function(){
var category = $("#category").val();
//グラフ描画Ajax実行
postRequest(category);
});
});
//-->
</script>
</head>
<body class="in_background">
<form>
<table>
<tr>
<td>
<table>
<tr>
<td>
<span class="bold blue">■JSON型のDBからデータを検索して棒グラフを描画するサンプル</span>
</td>
</tr>
<tr>
<td>
実際のサンプルを動かしてみましょう。<br/>
前回と違うところは、ドーナッツグラフではなく棒グラフを描画します。<br />
データは、ドーナッツグラフと全く同じものを使います。<br />
サーブレットもそのまま流用します。<br />
セレクトボックスを選択して「グラフを描画」ボタンをクリックしてください。<br/>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
グラフを描画する分類を選択してください。<br />
<select id="category">
<option value="0">果物の数のグラフ</option>
<option value="1">肉類の数のグラフ</option>
<option value="2">花の数のグラフ</option>
</select>
<input id="draw" class="btnstyle pointer" type="button" value="グラフを描画" />
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div class="left">
<!-- グラフ描画キャンバス -->
<canvas id="DoughnutCanvas"></canvas>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
|