マウスでメータを動かせるよ

背景色、メーター色も変更可

コールバックも!

グラフの長さも!

太さも!読み込み専用も!

メータの先端を丸く

数値の間隔も!

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.knob.js"></script>
<script>
	$(window).load(function(){
		$('.Knob-demo').knob();
		$('.Knob-demo2').knob({
			release: function() { alert('離したね?'); }
		});
	});
</script>
<p class="main-title">マウスでメータを動かせるよ</p>
<div class="Knob-demo-box">
	<p class="title">背景色、メーター色も変更可</p>
	<input class="Knob-demo" data-width="200" data-min="-100" data-displayPrevious=true value="44" data-fgColor="#658193" data-bgColor="#CCCCCC">
</div>
<div class="Knob-demo-box">
	<p class="title">コールバックも!</p>
	<input class="Knob-demo2" data-width="100" data-displayInput=false value="35" data-fgColor="#222222" data-bgColor="#CCCCCC">
</div>

<div class="Knob-demo-box">
	<p class="title">グラフの長さも!</p>
	<input class="Knob-demo" data-angleOffset=0 data-angleArc=180 data-fgColor="#222222" value="35" data-fgColor="#658193" data-bgColor="#CCCCCC">
</div>

<div class="Knob-demo-box">
	<p class="title">太さも!読み込み専用も!</p>
	<input class="Knob-demo" data-thickness=".1" value="87" data-fgColor="#658193" data-bgColor="#CCCCCC" readonly>
</div>

<div class="Knob-demo-box">
	<p class="title">メータの先端を丸く</p>
	<input class="Knob-demo" data-angleOffset=90 data-linecap=round value="35" data-fgColor="#222222" data-bgColor="#CCCCCC">
</div>

<div class="Knob-demo-box">
	<p class="title">数値の間隔も!</p>
	<input class="Knob-demo" data-min="-15000" data-displayPrevious=true data-max="15000" data-step="1000" value="-11000" data-fgColor="#658193" data-bgColor="#CCCCCC">
</div>

Knobについて

Knobはついつい回したくなる円グラフを設置できるプラグインです。
イベントも取得できるので、色々と面白いこともできそうじゃありませんか?
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • Peity

    Peity

    SVGを利用して色々なグラフをブラウザ上に描画できる

  • Flot

    Flot

    とても豊富な機能を備えたグラフ描画プラグイン

  • Chart

    Chart

    バラエティー豊富でインタラクティブなグラフを設置できる