jQueryでグラフを設定
「jquery」でグラフを作成する方法をのご紹介!!
「jquery.js」をダウンロード致します。
ダウンロード先
cssを記載
下記のソースを追加してください。
※読み込みのcssはサンプルのリンク先を参照してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style type="text/css"> <link href="scripts/roundslider.min.css" rel="stylesheet" /> .container { height: 180px; width: 400px; } .container > div { float: left; } .control { margin-right: 70px; } </style> |
HTMLを記載
下記のソースを追加してください。
|
1 2 3 4 5 6 7 8 9 |
<div class="types"> <div class="container"> <div class="control"> <div id="type"></div> </div> </div> </div> |
Javascriptを記載
下記のソースを追加してください。
※読み込みのcssはサンプルのリンク先を参照してください。
|
1 2 3 4 5 6 7 8 9 10 |
<script src="scripts/jquery-1.11.3.min.js"></script> <script src="scripts/roundslider.min.js"></script> <script> $(document).ready(function () { $("#type").roundSlider({ value: 45, }); }); </script> |
サンプル
下記のソースをお使いください。
表示サンプルを掲載いたします。
詳細内容はこちら(もっと見る)
参考サイト：roundSlider
