no-image

JavaScript

SVGによるドーナッツ状(円形)のチャートを実装できる「donutty」

donuttyはSVGによるドーナッツ状(円形)のチャートを実装できるJavaScript(またはjQuery)ライブラリです。アニメーション付きで、チャートを読み込んだ時にあらかじめ指定されている数値までメーターが伸びていきます。チャートサイズやメーター幅などいろいろなカスタマイズも可能です。

data要素かJSオプションで数値を指定

デモ

デモではたくさんのタイプの円形チャートが用意されています。メーターが細いものや太いもの、カラーやサイズが異なるものなど、カスタマイズ次第でさまざまなチャートを作れちゃいます。

ページ読み込み時にメーターが伸びていくアニメーションが付いているので、ユーザーに注目してもらうことも可能です。

デザインもシンプルで、余計な装飾もなくとても見やすいチャートに仕上がっています。デモにあるチャートはどれも落ち着いた色合いになっているので、いろんなサイトに合わせやすそうです。

数値はHTMLタグ内にdata要素を使用して指定できます。例えば、data-minには最小値、data-maxには最大値、data-valueにはそのチャートが示す数値を設定する感じです。

ほかにもJS側(オプション)で上記の数値を指定することもできます。この場合はdata要素ではなくなるので、min、max、valueという項目を使用します。

また、donuttyにはオプションもいくつか用意されています。先ほどのmin、max、valueのほかにも、round、circle、radius、thickness、padding、bg、color、transition、textという項目があります。デフォルト値は、minが0、maxが100、valueが50、roundがtrue、circleがtrue、radiusが50、thicknessが10、paddingが4、bgが”rgba(70, 130, 180, 0.15)”、colorが”mediumslateblue”です。

donutty

関連記事

  1. jQuery Inline Footnotes

    JavaScript

    ホバーで脚注を表示できる「jQuery Inline Footnotes」

    jQuery Inline Footnotesはホバーすることで脚注の…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで要素を挿入できるメソッドがたくさんあるので整理してみた

    jQueryでHTML要素を追加するメソッドが色々あるので整理するため…

  3. Justified Gallery
  4. no-image

    JavaScript

    固定されたフローティングメニューを実装できる「jquery-dice-menu」

    jquery-dice-menuは、固定されたシンプルなフローティング…

  5. VintageTxt

    JavaScript

    タイピングしているような効果を実装できるjQueryプラグイン「VintageTxt」

    VintageTxtというjQueryプラグインを使えば、文字をタイピ…

  6. JavaScript

    ニュースやお知らせなどに使えるティッカー「jQuery WebTicker」

    ニュースやお知らせなんかに使えるティッカー「jQuery WebTic…

最近の記事

  1. スタンスミス(EDIFICE/IENA別注)
  2. WI-1000XM2
  3. mill オイルヒーター
  4. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP