jquery.knob.jsを使って円グラフをマウスカーソルクリック又は数値入力で調整表示する方法をご紹介します。
Contents
ディスプレイ広告
円グラフをマウスカーソル又は数値入力で調整表示するCSSの記述
※円グラフエリア(div.demo)のCSS記述です。必要に応じて変更して下さい。
<style type="text/css"> body{ font-size: 16px; line-height: 1.4em; } h1{ text-align: center; font-size: 20px; padding: 20px 0; line-height: 1.4em; } div.demo{ text-align:center; width: 280px; display: inline-block; } </style>
skrollr.jsを使ってスクロールすると円が弧を描いて移動するJavaScriptの記述
※jquery-1.11.0.min.js、jquery.knob.jsファイルを読み込みます。
$(円グラフ表示エリア).knob({オプション})で円グラフ表示エリア(.knob)に対して、アクション時のオプションを記述します。
<script src="jquery-1.11.0.min.js"></script> <script src="jquery.knob.js"></script> <script> $(function($) { $(".knob").knob({ change : function (value) { //console.log("change : " + value); }, release : function (value) { //console.log(this.$.attr('value')); console.log("release : " + value); }, cancel : function () { console.log("cancel : ", this); }, /*format : function (value) { return value + '%'; },*/ draw : function () { // "tron" case if(this.$.data('skin') == 'tron') { this.cursorExt = 0.3; var a = this.arc(this.cv) // Arc , pa // Previous arc , r = 1; this.g.lineWidth = this.lineWidth; if (this.o.displayPrevious) { pa = this.arc(this.v); this.g.beginPath(); this.g.strokeStyle = this.pColor; this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, pa.s, pa.e, pa.d); this.g.stroke(); } this.g.beginPath(); this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ; this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, a.s, a.e, a.d); this.g.stroke(); this.g.lineWidth = 2; this.g.beginPath(); this.g.strokeStyle = this.o.fgColor; this.g.arc( this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false); this.g.stroke(); return false; } } }); }); </script>
円グラフをマウスカーソル又は数値入力で調整表示するHTMLの記述
※以降に記載「ソース元:jQuery Knob」のdemoを流用し、6パターンの円グラフを表示します。必要に応じて変更して下さい。
<h1>円グラフをマウスカーソルクリック又は数値入力で調整できます。<br>円グラフにマウスカーソルでクリックするか、数値の箇所をクリックして数値を入力変更してみて下さい。</h1> <div align="center"> <div class="demo"> <p>× Disable display input</p> <div> data-width="100" data-displayInput=false </div> <input class="knob" data-width="100" data-displayInput=false value="35"> </div> <div class="demo"> <p>× 'cursor' mode</p> <div> data-width="150" data-cursor=true data-thickness=.3 data-fgColor="#222222" </div> <input class="knob" data-width="150" data-cursor=true data-fgColor="#222222" data-thickness=.3 value="29"> </div> <div class="demo" > <p>× Display previous value</p> <div> data-displayPrevious=true data-min="-100" </div> <input class="knob" data-width="200" data-min="-100" data-displayPrevious=true value="44"> </div> <div style="clear:both"></div> <div class="demo"> <p>× Angle offset</p> <div> data-angleOffset=90 data-linecap=round </div> <input class="knob" data-angleOffset=90 data-linecap=round value="35"> </div> <div class="demo"> <p>× Angle offset and arc</p> <div> data-fgColor="#66CC66" data-angleOffset=-125 data-angleArc=250 data-rotation=anticlockwise </div> <input class="knob" data-angleOffset=-125 data-angleArc=250 data-fgColor="#66EE66" data-rotation="anticlockwise" value="35"> </div> <div class="demo" > <p>× 4-digit, step 0.1</p> <div> data-step=".1" data-min="-10000" data-max="10000" value="0" data-displayPrevious=true </div> <input class="knob" data-min="-10000" data-displayPrevious=true data-max="10000" data-step=".1" value="0"> </div> </div>
jquery.knob.jsを使って円グラフをマウスカーソルクリック又は数値入力で調整するデモページ
jquery.knob.jsを使って円グラフをマウスカーソルクリック又は数値入力で調整するデモページ
ソース元:jQuery Knob
以下がソース元です。
jQuery Knob
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。