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

Menu Droplet Animationドロップアニメーションがお洒落なナビゲーションメニュー「Menu Droplet Animation」前のページ

リストをiOSのようにアニメーションできるjQueryプラグイン「Listt」次のページListt

関連記事

  1. SimpleCalculadora

    JavaScript

    シンプルでカスタマイズもできる電卓「SimpleCalculadora」

    SimpleCalculadoraはシンプルでCSS、オプションなどで…

  2. scroll-scope.js

    JavaScript

    親要素の影響を受けずに子要素だけを固定してスクロールさせる「scroll-scope.js」

    scroll-scope.jsは親要素の影響を受けずに子要素だけを固定…

  3. FakeLoader.js

    JavaScript

    フルスクリーンでカッコいいローディングアニメーション・FakeLoader.js

    FakeLoader.jsはフルスクリーンでカッコいいローディングアニ…

  4. JavaScript

    立体的なナビゲーション表示を実装することができるjQueryプラグイン「Box Lid」

    立体的なナビゲーション表示を実装できるjQueryプラグイン「Box …

  5. PWS Tabs jQuery Plugin
  6. jQuery googleslides

最近の記事

  1. Apple WatchでのMacロック解除を無効
  2. オータムスイートポテトフラペチーノ
  3. 紅葉
  4. ナノケア EH-NA0E
  5. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP