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

EclipseのMavenを使った、Spring-MVC、Thymeleaf、MyBatis 等のプログラミングテクニックを、
備忘録的に記録しています。実際に動くソースコードを多用して説明していますので、
これからEclipseや、Spring-MVCを始めたいと思っている人にとって、少しでも参考になれば幸いです。
■Draggable/Resizable な棒グラフサンプル
jQuery-UI を使って、棒グラフでちょっと遊んでみました。
「■JSONぶらり旅 3)棒グラフ描画」で実装したjQueryに
jQuery-UIのDraggable/Resizableを組み込んで、
グラフのDraggable（移動）/Resizable（サイズ変更）を機能追加してあります。

jQuery-UIの最新プラグインは、ここからダウンロードできます。

「グラフを描画」ボタンでグラフが描画されます。
グラフエリアをつまんで、あちこちに移動できます。
グラフエリア右下の▼アイコンをつまんで引っ張ると、グラフが伸縮します。
 
グラフを描画する分類を選択してください。
 

 

実装内容は、下のソースを読んでもらえればわかると思いますので、
詳しい説明は割愛します。あしからず。
強いて言うと、2016年4月時点で、ちょっと古いChart.jsを使ってる場合は、このコードでは動きません。
（2015年8月ごろダウンロードしてあったChart.jsでは仕様が違ってるので動かなかった）
Chart.js公式サイトから、最新のChart.jsをダウンロードしてください。

基本的には、
「■JSONぶらり旅 3)棒グラフ描画」で使ったものの流用で、
view(HTML)だけ、jQueryを改造しています。

view (WebContent/barchart2.html)
jQueryの小技集  Draggable/Resizable な棒グラフ
HOME