webサイトも見た目を重視する、弓削田です。
先日、仕事でとあるシミュレーションシステムの構築を依頼されて、
結果表示に、折れ線グラフなどではなく、「スピードメーター」のような見た目で表示してくれと、
オーダーされたので、少し調べてみたら、「JustGate」っていうライブラリが存在しているという事を知り、
非常に手軽に簡単に、扱いやすいライブラリだったので、
もしかしたら、ニーズのある人がいるかもしれないので、情報共有しておきます。
ダウンロードサイト
詳しくは、下記のURLで、ソース事態のダウンロードと、各種使い方なども書かれているので、
見てもらったほうが早いんですが、何分英語なので、苦手という方は、このブログで理解してくだされ。
https://toorshia.github.io/justgage/
用途について
見た目、スピードメーターなんですが、特定の指標の達成度合いなどを数値ではなく、見た目で表すことができます。
グラフ表示だと、毎月とか、毎年の経過トレンドという指標が見られますが、
ピンポイントで、値を見せたい時に、数字だけだと寂しいので、多少のアニメーションもしてくれて、
見た目も鮮やかになるので、
そうした装飾のために使うのもいいかもしれませんね。
今回、僕の方では、シミュレーション結果で、何割ぐらいの達成度なのかを表現する用途に使わせてもらいました。
面白いことに、このツールは、１つのページ内に、複数個表示しても、
快適に動いてくれるので、いい感じになることは、間違いないでしょう。（人それぞれですが・・・）
簡単な使い方
最後に、このツールの簡単な実装方法と、簡単な説明を書き残しておきますね。
WEBサイトにも書かれているんですが、いくつかトラップがあったので、書き直した形にしておきますね。
1, まず、HTML側にライブラリの読み込み
下記のように、HTMLのヘッダ内あたりに書き込んでおきます。
<script src="raphael-2.1.4.min.js"></script>
<script src="justgage.js"></script>
※サイトの説明をコピペすると、ファイル名が確実に違っているので、実際にファイルを確認して（パスもちゃんと合わせてね）書き込んでください。
2, 表示タグを設置
<div id="gauge" class="200x160px"></div>
ポイントは、id属性の記述のようです。
意味ありげなclass名が書かれていますが、この記述は消しても動作するので、書いても書かなくてもどちらでも良さそうです。
3, Javascript記述
ページの読み込み後に、次のコードを実行すると、表示がされます。
var gauge = new JustGage({
id: "gauge",
value: 67,
min: 0,
max: 100,
title: "Fire"
});
パラメータは説明するまでもないと思いますが、
idは、先程記述したタグのID属性の名称です。
minとmaxは、数値の最小値と最大値で、valueが、メーターの表す値のようです。
titleは、上部に名称を表示をしてくれるようです。
さらに、表示されたあとで、値の書き換えもできるようで、次のように記述します。
gauge.refresh(30);
ライブラリのインスタンス起動を、変数に格納しておいて、それをrefreshで値を送ることで、簡単に表示切り替えができるようです。
謎の仕様
表示サイズを切り替えることができません。
サイトの説明を読み込んで、調査を進めてみたいと思います。
でも、この段階でも、ありがたく使えるので、公開者に感謝です。
あっ、ライセンスは、MITなので、ご安心を！
