JavaのWebアプリケーション開発フレームワークによる、Webサイト開発の顛末記です。

EclipseのMavenを使った、Spring-MVC、Thymeleaf、MyBatis 等のプログラミングテクニックを、
備忘録的に記録しています。実際に動くソースコードを多用して説明していますので、
これからEclipseや、Spring-MVCを始めたいと思っている人にとって、少しでも参考になれば幸いです。
Spring-MVCの散歩道 > 応用の森(jQuery/JavaScript 編) > Draggable/Resizable な棒グラフサンプル 
<!doctype html>

<html lang="ja">
<head>
<title>棒グラフデコレーションサンプル</title>
<meta charset="UTF-8" />

<!--これが無いとresizeableマークが表示されず -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<script type="text/javascript" src="./js/jquery-2.2.3.js"></script>
<script type="text/javascript" src="./js/Chart.js"></script>
<!--draggable/resizeableにはこのjsが必須 -->
<script type="text/javascript" src="./js/jquery-ui-1.11.4.custom/jquery-ui.js"></script>

<style>
<!--
/* resize Style */
#resize {
    background-color : #ffffff;
    border:solid 1px #000000;
}
#drag {
    border:solid 1px #ffffff;
}
.moveicon {
    cursor:move;
}
//-->
</style>

<script type="text/javascript">
<!--
$(function(){

    //凡例を非表示にする
    Chart.defaults.global.legend.display=false;
    //Chart.defaults.global.legend.position="bottom";
    //resize eventに追随しない
    Chart.defaults.global.responsive=false;

    //グラフ描画キャンバスサイズ初期設定
    $("#GraphCanvas").width(300);
    $("#GraphCanvas").height(300);

    //グラフのインスタンスを作成する
    var ctxChart = $("#GraphCanvas");
    //グラフオブジェクト
    var graphObj = null;

    /**
     * グラフデータリクエストAjaxの実行
     * category : 画面で選択されたセレクトボックスの値
     */
    var postRequest = function (category) {
        //分類パラメータをJSONオブジェクト化する
        var reqparam = {
            "category" : category
        };

        //Ajaxを実行する(Over 1.8系)
        $.ajax({
            url          : "./doughnutchartdraw2.xhtml",
            dataType: "json",
            type       : "post",
            data      : JSON.stringify(reqparam),
        }).done(function(resData) {
            drawChart(resData); //グラフ描画
        }).fail(function(resData) {
            //console.log("faild resData["+JSON.stringify(resData,null,' ')+"]");
        });
    }

    /**
     * "#drag"セレクタ領域をdraggable(移動可)にする
     */
    $("#drag").draggable({
        //ドラッグ終了時
        stop:function(event, ui) {
            //ドラッグ領域のポジションを取得する
            var position = $(this).position();
            //エリア左上隅がマイナスポジション
            //だったら0位置に変更する
            //これやっとかんと、左上に消え去って戻せなくなっちゃうの。
            if(position.left < 0) {
                $("#drag").css("left", 0);
            }
            if(position.top < 0) {
                $("#drag").css("top", 0);
            }
        }
    });

    /**
     * "#resize"セレクタ領域をresizable(リサイズ可)にする
     */
    $("#resize").resizable({
        //resizeが終了した時に呼び出されるイベントハンドラを定義する
        stop:function() {
            if(graphObj != null) {
                graphObj.resize();      //リサイズ
                GhraphRefresh();        //グラフ描画領域リフレッシュ
            }
        }
    });

    /**
     * グラフの描画Ajax Callback
     */
    var drawChart = function(response) {
        //グラフを描画
        graphObj = new Chart(ctxChart,{
            type: 'bar',            //棒グラフ
            data: response,
            options:{
                scales: {
                    yAxes: [{
                        stacked: true       //Y軸Base設定
                    }]
                }
            }
        });
        graphObj.resize();      //リサイズ
        //描画領域のリフレッシュ
        GhraphRefresh();
    }

    /**
     * グラフの描画領域のリフレッシュ
     */
    var GhraphRefresh = function() {
        //リサイズ後の幅、高さを取得
        var rwidth = $("#resize").width();
        var rheight = $("#resize").height();
        //キャンバスサイズ再設定
        $("#GraphCanvas").width(rwidth);
        $("#GraphCanvas").height(rheight);
        //dragging領域再設定
        $("#drag").width(rwidth);
        $("#drag").height(rheight);
    }

    /**
     * グラフ描画ボタンクリック時
     */
    $("#draw").click(function(){
        //セレクトボックス値を取得
        var category = $("#category").val();

        //グラフ描画済みなら一旦破棄
        if(graphObj != null) {
            graphObj.destroy();
        }

        //グラフ描画Ajax実行
        postRequest(category);
    });

});
//-->
</script>

</head>

<body>
<form>
<table>
    <tr>
        <td>
            <table>
                <tr>
                    <td>
                        <span style="font-weight:bold;color:blue;">■Draggable/Resizable な棒グラフサンプル</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        jQuery-UI を使った棒グラフのデコレーション。<br/>
                        「グラフを描画」ボタンでグラフが描画されます。<br/>
                        グラフエリアをつまんで、あちこちに移動できます。<br/>
                        グラフエリア右下の▼アイコンをつまんで引っ張ると、グラフが伸縮します。<br/>
                        <br/>
                        <br/>
                    </td>
                </tr>
                <tr>
                    <td> </td>
                </tr>
                <tr>
                    <td>
                        グラフを描画する分類を選択してください。<br />
                        <br />
                        <select id="category">
                            <option value="0">果物の数のグラフ</option>
                            <option value="1">肉類の数のグラフ</option>
                            <option value="2">花の数のグラフ</option>
                        </select>
                        <input id="draw" type="button" value="グラフを描画" />
                    </td>
                </tr>
                <tr>
                    <td> </td>
                </tr>
                <tr>
                    <td style="text-align:left;">
                        <div id="drag" class="ui-widget-content moveicon">
                            <div id="resize">
                                <!-- グラフ描画キャンバス -->
                                <canvas id="GraphCanvas"></canvas>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</form>
</body>
</html>