円グラフをマウスカーソル又は数値入力で調整表示する方法【jquery.knob.js】｜DAD UNION

jquery.knob.jsを使って円グラフをマウスカーソルクリック又は数値入力で調整表示する方法をご紹介します。

Contents

円グラフをマウスカーソル又は数値入力で調整表示するCSSの記述
skrollr.jsを使ってスクロールすると円が弧を描いて移動するJavaScriptの記述
円グラフをマウスカーソル又は数値入力で調整表示するHTMLの記述
jquery.knob.jsを使って円グラフをマウスカーソルクリック又は数値入力で調整するデモページ
ソース元：jQuery Knob

円グラフをマウスカーソル又は数値入力で調整表示する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>&#215; 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>&#215; '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>&#215; 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>&#215; 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>&#215; 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>&#215; 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>