[JS]クルマのメーターのようなアニメーションが気持ちいい、ゲージが変化するスクリプト -Gauge.js

サイト構築 -JavaScript

Post on:2012年8月1日

Gauge.jsの特徴

アニメーションでゲージが変化します。
HTML5 Canvasを使ってJavaScript/CoffeScriptで作成。
画像や外部スタイルシートファイルは無し。
jQueryはサポートしてますが、特に必要ありません。
さまざまな設定が可能。
MITライセンス。

対応ブラウザ

Chrome
Safari 3.2+
Firefox 3.5+
IE 9
Opera 10.6+
Mobile Safari (iOS 3.2+)
Android 2.3+

Gauge.jsのデモ

デモでは右のオプションを変更すると、直ちにデモに反映されます。
アニメーションを堪能する時は、一番上の「Current Val」値を変更してください。

Gauge.jsのデモページ

Gauge.jsの使い方

外部ファイル

当スクリプトを外部ファイルとして記述します。

<script src="dist/gauge.js"></script>

JavaScript

上記デモで変更できる項目は全てオプションで設定できます。

var opts = {
  lines: 12, // ラインの数
  angle: 0.15, // ラインの長さ
  lineWidth: 0.44, // ラインの幅
  pointer: {
    length: 0.9, // 内側の円の半径
    strokeWidth: 0.035 // ストロークの幅
  },
  colorStart: '#6FADCF',   // スタート時のカラー
  colorStop: '#8FC0DA',    // ストップ時のカラー
  strokeColor: '#E0E0E0'   // ストロークのカラー
};
var target = document.getElementById('foo'); // your canvas element
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 3000; // set max gauge value
gauge.animationSpeed = 32; // set animation speed (32 is default value)
gauge.set(1100); // set actual value

jQueryの使用

Gauge.jsはjQueryを特に必要としませんが、もしjQueryを使用する際は下記のようにプラグインとして利用できます。

$.fn.gauge = function(opts) {
  this.each(function() {
    var $this = $(this),
        data = $this.data();

    if (data.gauge) {
      data.gauge.stop();
      delete data.gauge;
    }
    if (opts !== false) {
      data.gauge = new Gauge(this).setOptions(opts);
    }
  });
  return this;
};