JavaScript

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

  /

Webサイトやダッシュボードで、円グラフをインタラクティブに操作できると便利ですよね。特に、数値を手入力するだけでなく、マウスカーソルで直感的に調整できると、ユーザーの操作性が向上します。
本記事では、jQueryのプラグイン 「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>

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

jquery.knob.jsを使って円グラフをマウスカーソルクリック又は数値入力で調整するデモページ

jquery.knob.jsを使って円グラフをマウスカーソルクリック又は数値入力で調整するデモページ

ソース元：jQuery Knob
jQuery Knob

まとめ

今回は、「jquery.knob.js」 を使って、円グラフをマウスカーソルや数値入力で自由に調整する方法を紹介しました。

ポイントの振り返り

  • CSSの設定 を行い、円グラフの表示エリアを整える
  • HTMLの記述 で、操作可能な円グラフを設置
  • JavaScriptの実装 により、マウスや数値入力で値を変更可能にする

このカスタマイズを活用すれば、ダッシュボードやデータ可視化ツールのユーザーエクスペリエンスを向上させることができます。
ぜひ、ご自身のWebプロジェクトに取り入れてみてください！

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

円グラフ jquery.knob.js
関連記事