jQuery Knobの導入方法と使い方をサンプルコード付き解説！
jQuery Knobの導入方法と使い方をサンプルコード付きで解説します。jQuery Knobを用いることでオシャレな円グラフを作成できます。何かの数値を表したい時にjQuery Knobはとても便利なライブラリです。
jQuery Knobとは？
jQuery Knobを用いることでオシャレな円グラフを作成できます。
何かの数値を表したい時にjQuery Knobはとても便利なライブラリです。
ではjQuery Knobの導入方法と使い方を以下の項目で解説します。
jQuery Knobの導入方法
まず下記サイトよりファイルをダウンロードしてください。
そしてダウンロードしたファイル内にあるjsファイルとjQueryのCDNを読み込みます。
読み込む際のコードは以下のようになります。
jQuery Knobの導入方法
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/jquery.knob.js"></script>これでjQuery Knobを使えるようになります。
jQuery Knobの使い方
ではjQuery Knobの使い方を解説します。
早速ですがサンプルコードを用意したので、挙動を確認してみましょう。
このようにオシャレな円グラフを作成できます。
コードはHTMLでまずinput要素を記述します。class名は何でもいいのですが、今回はdialとしました。
そしてvalueを設定します。このvalueの値が円グラフの値になります。
最後JSに以下を記述すれば円グラフを表示できます。
jQuery KnobのJS
$('.クラス名').knob();jQuery Knobのオプション
jQuery Knobのオプションを紹介します。
jQuery Knobの主なオプションは以下となります。
jQuery Knobの主なオプション
width: "250", //大きさ
readOnly: true,//数字を変更させない
value: "44", //数字
min: "0", //最小値
max: "100", //最大値
displayInput: false, //数字を表示しない
ticks: "8" //線を表示する間隔そしてオプションは以下の場所に記述します。
オプションの記述ヵ所
$(function () {
$('.クラス名').knob({
//オプションの記述ヵ所
});
});では実際におすすめであるオプションのreadOnlyとdisplayInputを用いたサンプルコードを用意したので、見てみましょう
このように1つ目のサンプルコードとは挙動が異なっていることが分かります。
オプションであるreadOnlyはその名の通り、trueとすることで読み込みのみとなり数値を変更することができません。
displayInputをtrueとすることで、数値を表示させなくすることができます。
その他のオプション
この他にもjQuery Knobには多くのオプションが存在します。
詳しくは以下のサイトを参照してください。
まとめ
いかがでしたでしょうか？
ぜひjQuery Knobを用いて、オシャレな円グラフを作成してみてください。
