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

    JavaScript

    コンテンツを押し出してナビゲーションを表示する「Navigation」

    Navigationはコンテンツを押し出すかたちでナビゲーションを表示…

  2. Page Stack Navigation

    JavaScript

    ページをスタッキングできる「Page Stack Navigation」

    Page Stack Navigationはページをスタッキングできる…

  3. Parallaxor

    JavaScript

    美しいパララックス効果を最小限のコードで実装できるjQueryプラグイン「Parallaxor」

    Parallaxorは最小限のミニマルなコードで美しいパララックス効果…

  4. ScrollBooster

    JavaScript

    ドラッグしながらスクロールするライブラリ「ScrollBooster」

    ScrollBoosterはドラッグしながらスクロールする機能を実装で…

  5. TwentyTwenty

    JavaScript

    2枚の画像を見比べれるjQueryプラグイン「TwentyTwenty」

    TwentyTwentyは2枚の画像を見比べれる便利なjQueryプラ…

  6. jQueryTween

    JavaScript

    軽量で軽快なアニメーションをするjQueryプラグイン「jQueryTween」

    jQueryTweenは軽量で軽快なアニメーションを実装することができ…

最近の記事

  1. COMOLIの製品染ナイロン アノラックとトラックパンツ
  2. WH-XB900N
  3. Eufy RoboVac L70 Hybrid
  4. cheero Smart USB Charger 48W CHE-320

アーカイブ

PAGE TOP