目的
ExcelライクなUIとグラフを表示したいという相談があったのででとりあえず簡単なコンセプトコードをかいたぞ。
Handsontable
HandsontableなるExcelっぽい見た目や操作感を表現できるJavaScriptライブラリ。
Handsontable
非常に細かい操作感がExcelライクに実装されており、なんとなく適当に触っただけで
- シート内でのコピー＆ペースト
- tabやenterによるセル移動
- Excelからのコピー＆ペースト
- F2を押したらセルにフォーカスが移動する
など細かい挙動が実現できる。
それに加えて、OpenSourceエディションであればMITライセンスなので自由に使える。
Chart.js
最近バージョンが2.0にあがっておしゃれになった気がするライブラリ
Chart.js
今回は棒グラフの表示に使う。
こちらもMITライセンスなので安心して利用できる。
実装
ソース内で大事なのは、棒グラフの更新時に適切に更新しないと、棒グラフをマウスオーバーした時に更新前のグラフが見えるなどの挙動をします。
今回は、グラフの更新の際にdestroyとnewをしています。（適切かどうかは判断しかねますが自然に動作はします。）
注意点
- 見た目はもうちょっと検討の余地あり。（グラフの棒全部同じ色だし）
- 大きなデータセットで動くかは未確認。