circleChart

JavaScript

多彩なカスタマイズができる円形チャート「circleChart」

circleChartは多彩なカスタマイズを実現した円形チャートを実装することができるjQueryプラグインです。使い方が簡単ながら、オプションが豊富に用意されているので自分好みにカスタマイズして使用できます。

circleChart

デモ

デモページには、color、backgroundColor、background、speed、widthRatio、value、size、startAngle、animateなど、たくさんのサンプルが用意されています。

各サンプルにある「Neu darstellen」というボタンをクリックすると、チャートのメーターが動き出します。比率や数値など、視覚的にどのくらい多いのか少ないのかが瞬時にわかるので、ユーザーにとっては便利ですね。

円形チャートのカラーや背景カラー、スピード、幅、サイズなど、細かいところまでしっかりカスタマイズできます。さらに、メーターが動きだすスタート地点(角度)やアニメーションのセッティングも可能です。

アニメーションの種類はかなり豊富で、linearTween、easeInQuad、easeOutQuad、easeInOutQuad、easeInCubic、easeOutCubic、easeInOutCubicなど、他にもいろんな種類が用意されています。

ちなみに、デモページでは、linearTween、easeInOutQuart、easeInOutSineの3つのアニメーションを確認できますよ。

これらの他にも、まだまだ多彩なオプションが用意されているので、気になる人はぜひチェックしてみてください。

というわけで、豊富なオプションによるカスタマイズ性に優れた円形チャートを実装できるjQueryプラグイン「circleChart」のご紹介でした。

circleChart

関連記事

  1. Uglipop.js

    JavaScript

    軽量でミニマルなモーダルボックスを実装できる「Uglipop.js」

    Uglipop.jsは軽量でミニマル、カスタマイズ性にも優れたモーダル…

  2. no-image

    JavaScript

    ダイナミックに回転してコンテンツが切り替わる「Page Scroll 3D」

    Page Scroll 3Dは、クルッとダイナミックに回転してコンテン…

  3. Swipeshow

    JavaScript

    スワイプにも対応したシンプルなスライドショーを実装できるjQueryプラグイン「Swipeshow」…

    タッチデバイスのスワイプにも対応したシンプルなスライドショーを実装する…

  4. 4PXMMenu

    JavaScript

    滑らかなアニメーションでモバイルサイトに最適なメニュー実装「4PXMMenu」

    4PXMMenuはモバイルサイトに最適なメニューを実装することができる…

  5. jQuery Page

    JavaScript

    モバイルに最適なスライドやフリップを実装できる「jQuery Page」

    jQuery Pageは、スマホなどモバイルに最適なスライドやフリップ…

  6. fineScroll bar

    JavaScript

    簡単に使えるスクロールバー実装「fineScroll bar」

    fineScroll barは簡単に使えるスクロールバーを実装できるj…

最近の記事

  1. 三菱ブレッドオーブン
  2. 浜離宮恩賜庭園

アーカイブ

PAGE TOP