ゲージやタコメーターを実装できる「Gauge.js」

「Gauge.js」は車に搭載されているような各種ゲージを実装できるjQueryプラグインです。

Gauge.js

gauge

これは面白いプラグインですね。値をグラフィック表示させるためのこのようなゲージは、Google Chart Toolでも提供されていたりします。

gauge-demo-1

 

しかしやけにリッチなのが気になるところ。その点「Gauge.js」ではミニマルなデザインであり、その分多くのカスタマイズが可能となっています。

 

このようなゲージが描けます。やじるし箇所のバーを操作してみます。

gauge-demo-2

 

すると値が大きくなり、それに応じてゲージの降り幅も大きくなっているのが分かります。とても滑らかにアニメーションします。

gauge-demo-3

 

さらにタコメーターも描くことが可能です。

gauge-demo-4

 

このデザインとても気に入りました。インフォグラフィックに使えそう。ぜひ参考にどうぞ。

 

Home > JavaScript > ゲージやタコメーターを実装できる「Gauge.js」

Return to page top