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

    JavaScript

    レスポンシブな3Dカルーセルを実装できる「jR3DCarousel」

    jR3DCarouselはレスポンシブな3Dカルーセルを実装できるjQ…

  2. SweetAlert2

    JavaScript

    カスタマイズ性が高くアクセシビリティ(WAI ARIA)に優れたアラート実装「SweetAlert2…

    SweetAlert2は、レスポンシブ対応でカスタマイズ性が高くアクセ…

  3. JavaScript

    レスポンシブ対応で画像やテキストも自由にスライドできるjQueryスライダー「Responsly.j…

    スマホにも対応したレスポンシブのjQueryスライダー「Respons…

  4. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量ライブラリ「Lazyestload.js」

    Lazyestload.jsは画像の遅延読み込み機能を実装できる軽量の…

  5. NO IMAGE
  6. Emergence.js

    JavaScript

    ブラウザで要素の可視性を検出する「Emergence.js」

    Emergence.jsは、ブラウザで要素の可視性を検出することができ…

最近の記事

  1. プラスシェル シティ04 フォールディングカメラケース
  2. enerpad AC-27KS
  3. KMS-160

アーカイブ

PAGE TOP