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

    JavaScript

    サイズが異なる画像でもキレイに表示できるギャラリー実装「xGallerify」

    xGallerifyはギャラリーを作成するのに最適なjQueryプラグ…

  2. no-image

    JavaScript

    ミニマルなイメージギャラリーを実装できる「Albery」

    Alberyはミニマルなイメージギャラリーを実装できるjQueryプラ…

  3. Bricklayer

    JavaScript

    軽量なグリッドレイアウトを実装できる「Bricklayer」

    Bricklayerは軽量なグリッドレイアウトを実装することができるラ…

  4. Textillate.js

    JavaScript

    テキストに面白いCSS3アニメーションを加えることができるjQueryプラグイン「Textillat…

    指定したテキストに面白いCSS3アニメーションを加えることができるjQ…

  5. jCorner

    JavaScript

    フラットデザインに合う紙をめくったエフェクトを実装できるjQueryプラグイン「jCorner」

    jCornerというjQueryプラグインを使ってみました。フラットデ…

  6. no-image

    JavaScript

    スライドアニメーションによる多階層なハンバーガーメニュー「ggContentMenu」

    ggContentMenuはスライドアニメーションを備えた多階層に最適…

最近の記事

  1. 梅しば
  2. BM-IBCDH13RD
  3. 雪
  4. ホットのドリップ
  5. めんたいこ&チーズ味 海老せんべい

アーカイブ

PAGE TOP