Spring-MVCの散歩道　JSONぶらり旅　AjaxによるJSON形式のリクエスト

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

EclipseのMavenを使った、Spring-MVC、Thymeleaf、MyBatis 等のプログラミングテクニックを、
備忘録的に記録しています。実際に動くソースコードを多用して説明していますので、
これからEclipseや、Spring-MVCを始めたいと思っている人にとって、少しでも参考になれば幸いです。

Spring-MVCの散歩道 > JSONぶらり旅 > json型DBを使ってDBから検索したデータで棒グラフを表示するサンプル

■JSONぶらり旅　棒グラフサンプル

１）view(Ajaxリクエスト)

前回の chart2htmlと基本的には何も変わっていません。
データも、サーブレットも前回のものをそのまま流用します。
違うのは、ドーナッツグラフではなく、棒グラフを描画する事。
ただ、ドーナッツグラフと違って、ちょっとしたコツが要ります。

ソースのコメントが「ドーナッツ」のままですが、適宜「棒グラフ」と読み替えてください。

具体的には、
１）グラフの凡例がちょっとうざい。
２）デフォルトだとY軸ベースがグラフの最小値となってしまうため、最小グラフが見えなくなる
の２点を調整するのにちょっとしたコツがあります。
ネットを検索すると、グラフオプションの日本語解説のページがわんさがありますが
Chart.js公式サイトから引っ張ってきた最新Chart.jsはかなり進化を遂げているようで
使い方がいろいろ変わっています。
ネットに氾濫している情報は、ちょっと古いChart.jsの使い方の説明で、
最新のChart.jsでは使えなくなってるみたいなので注意が必要です。
最終的には、Chart.js公式サイトの英語版ドキュメントに説明があるので
頑張って自分で翻訳するしかないようです。
今回のコツの部分を赤字で表示してあります。

WebContent/barchart.html

１）グラフの凡例がちょっとうざい。
　　Chart.defaults.global.legend.display=false;
　　を指定することで、凡例が表示されなくなります。
　　これは、棒グラフに限ったことではなく、すべてのグラフに共通です。

２）デフォルトだとY軸ベースがグラフの最小値となってしまうため、最小グラフが見えなくなる
　　optionを何も指定しないと、デフォルトでY軸最小値==グラフの最小値で描画するため
　　最小値のグラフが見えなくなるためあまりカッコよくありません。
　　この場合は、グラフのoptions に scales:{yAxes:[{stacked: true}]}を指定します。

JSON動作サンプル(棒グラフ描画)

JSONサンプル　view(HTML)

■JSONぶらり旅