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

EclipseのMavenを使った、Spring-MVC、Thymeleaf、MyBatis 等のプログラミングテクニックを、
備忘録的に記録しています。実際に動くソースコードを多用して説明していますので、
これからEclipseや、Spring-MVCを始めたいと思っている人にとって、少しでも参考になれば幸いです。
■JSONぶらり旅　Chart.jsを使ってグラフを表示するサンプル
さて、具体的にJSONを使ってどんなサンプルをご紹介しようかと考えてみましたが
目から鱗が落ちるような、眉目秀麗なサンプルという訳にはいきませんが、
最近流行りのWeb上でグラフを表示するライブラリChart.js というグラフ描画ツールが
まさにJSON形式のデータフォーマットでグラフを描画しているので
今回は、Chart.jsを使ったJSONパラメータの受け渡しサンプルプログラムで説明してみたいと思います。

今回使用する武器は、view(HTML)側で必要になるライブラリで以下の２個
１) jQuery.js (少なくともver1.8以降が望ましい)　　jQuery公式サイト
　　ここでは、2016年4月時点で最新の jquery-2.2.3.js　を使用します。
２) Chart.js　Chart.js公式サイト
の２個です。それぞれの右のリンクからダウンロードできます。
jQueryで画面から選択されたグラフの種類を取得し、
JSON形式のリクエストパラメータに変換後、Ajaxを使ってサーバーにリクエストをPOSTします。

Spring-MVC側では、@RestControllerアノテーションを使って、
JSON形式のパラメータの受け渡しを実装します。
3) Gsonプラグイン　JSONとJavaオブジェクトの相互変換を行うプラグインです。
　　JSONパーサーとしては jacksonが有名ですが、天邪鬼な性格なのであえてGsonを使ってみます。
　　プラグインのダウンロードは、pom.xml で定義します。
　　本編「１－３）pom.xmlの編集」 を見ると既に定義済みなので
　　ここでは特に何もする必要はありません。

JSONぶらり旅に出発する前に、今回の大まかな計画をマップで確認しておきます。
まず、今回のサンプルで描画する、Chart.js ドーナツグラフ方式のJSONサンプルフォーマットです。

　//グラフデータサンプルフォーマット
　var chartData = {
　　//グラフのラベル情報
　　labels: [
　　　"Red",
　　　"Green",
　　　"Yellow"
　　],
　　//グラフのデータセット
　　datasets: [
　　　{
　　　　//グラフのデータ値
　　　　data: [300, 50, 100],
　　　　//グラフの背景色
　　　　backgroundColor: [
　　　　　"#FF6384",
　　　　　"#36A2EB",
　　　　　"#FFCE56"
　　　　],
　　　　//onmouseover時のグラフの背景色
　　　　hoverBackgroundColor: [
　　　　　"#FF6384",
　　　　　"#36A2EB",
　　　　　"#FFCE56"
　　　　]
　　　}]
　};

このJSONフォーマットデータを、Javaコントローラ側で作成しviewに返却して
view側のJavaScriptで、画面にドーナツグラフが描画されます。
プログラム構造をイメージ化するために、計画マップ図を書いてみます（適当な絵で申し訳ない）。
JSONリクエスト・レスポンス概要
１）左　view(HTML)のjQuery Ajaxで、JSON形式のリクエストパラメータをコントローラに送ります。
２）中　@RestControllerでJSON形式のリクエストを受信します。
　　　　受け取ったJSON文字列を一旦GsonでJavaObjectに変換します。
　　　　変換したパラメータObjectをビジネスロジックに引き渡します。
３）右　ビジネスロジックで、グラフデータを生成します。（今回はモック版固定データ）
　　　　生成したグラフデータオブジェクトをコントローラに返します。
４）中　ビジネスロジックから返ってきたグラフデータオブジェクトを
　　　　GsonでJSON形式文字列に変換し、viewに返却します。
５）左　view(HTML)はサーバーから返却されたJSONデータでドーナツグラフを描画します。
上図を元に、大まかなプログラム設計書を起こしてみます。
プログラム設計書
以上が今回の旅の目的です。
それでは、第一回JSONぶらり旅の始まりです。
ぶらり旅立ち  グラフ描画
■JSONぶらり旅
 JSON動作サンプル