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

    jQueryでCSSを複数の値で設定するやり方やクラスの追加や削減など色々

    jQueryのCSS操作で複数の値を渡したい時はハッシュ形式にすると便…

  2. DD Scroll Boxes
  3. AOS

    JavaScript

    スクロールに合わせていろんなアニメーションで表示できる「AOS」

    AOSはスクロールに合わせてフェードやフリップ、ズームなどのアニメーシ…

  4. JavaScript

    シンプル・軽量・簡単なLightBox系モーダルウィンドウのjQueryプラグイン「portBox」…

    portBoxというjQueryプラグインを使えばシンプルで軽量なLi…

  5. Fixit

    JavaScript

    要素を特定の位置に固定できるjQueryプラグイン「Fixit」

    Fixitは要素を特定の位置に固定することができるjQueryプラグイ…

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

    JavaScript

    jQueryでパターン化されたクラス名をループで1つずつ取り出して処理する

    どうでもいい内容なんですがちょっとやりたかったのでメモです。jQuer…

最近の記事

  1. 長十郎
  2. COMOLI シルクネルシャツ
  3. WiMAX
  4. 甘柿
PAGE TOP