donuttyはSVGによるドーナッツ状（円形）のチャートを実装できるJavaScript（またはjQuery）ライブラリです。アニメーション付きで、チャートを読み込んだ時にあらかじめ指定されている数値までメーターが伸びていきます。チャートサイズやメーター幅などいろいろなカスタマイズも可能です。
data要素かJSオプションで数値を指定
donuttyの実際のデモ動作やコードの記述例は以下のページから確認できます。
デモではたくさんのタイプの円形チャートが用意されています。メーターが細いものや太いもの、カラーやサイズが異なるものなど、カスタマイズ次第でさまざまなチャートを作れちゃいます。
ページ読み込み時にメーターが伸びていくアニメーションが付いているので、ユーザーに注目してもらうことも可能です。
デザインもシンプルで、余計な装飾もなくとても見やすいチャートに仕上がっています。デモにあるチャートはどれも落ち着いた色合いになっているので、いろんなサイトに合わせやすそうです。
数値は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”です。
SVGを使ったドーナッツ状のシンプルなチャートを実装したい人は、ぜひ「donutty」を活用してみてください。donuttyの具体的な使い方やダウンロードは、以下のページからどうぞ。
