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. jquery-bubble-text

    JavaScript

    テキストがアニメーションで切り替わっていく「jquery-bubble-text」

    jquery-bubble-textは、テキストが次々に切り替わってい…

  2. JavaScript

    レスポンシブなLightbox風のギャラリーを実装できるjQueryプラグイン「anoFlow」

    anoFlowというjQueryプラグインを使えば、レスポンシブなLi…

  3. Materialize Tags

    JavaScript

    マテリアルデザインのタグ管理を実装できる「Materialize Tags」

    Materialize Tagsは、マテリアルデザインのタグ管理を実装…

  4. Ziehharmonika

    JavaScript

    かっこいいアコーディオンを実装できる軽量のjQueryプラグイン「Ziehharmonika」

    アニメーションがとてもクールでかっこいいアコーディオンを実装することが…

  5. Zoomerang.js
  6. bcralnit.js

最近の記事

  1. Waterlogue
  2. macOS Mojaveのダークモード
  3. Olli
  4. 単語帳メーカー(Flashcard Maker App)

Facebookページ

PAGE TOP