jQueryでカーソルが動くグラフ

1 jQueryでグラフを設定
2 サンプル
- 2.1 Related Posts
- 2.2 いいね:

jQueryでグラフを設定

「jquery」でグラフを作成する方法をのご紹介!!

「jquery.js」をダウンロード致します。
ダウンロード先

cssを記載

下記のソースを追加してください。
※読み込みのcssはサンプルのリンク先を参照してください。

    <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>

.container {

height: 180px;

width: 400px;

}

.container > div {

float: left;

}

.control {

margin-right: 70px;

}

</style>

HTMLを記載

下記のソースを追加してください。

    <div class="types">

        <div class="container">
            <div class="control">
                <div id="type"></div>
            </div>

        </div>
    </div>

</div>

Javascriptを記載

下記のソースを追加してください。
※読み込みのcssはサンプルのリンク先を参照してください。

    <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>