SVGでグラフを描写できるChartist.js

こんにちは、ウェブラボ技術メモです。

今回はSVGでグラフを描写できる「Chartist.js」を紹介いたします。

DEMOはこちら

よく見かける円グラフなどが、簡単に設定できてしまいます。
ちょっと数値を変更したいといった修正作業もお手軽なので魅力的ですね。

それでは実際に実装していきましょう。

以下からプラグインをダウンロードしてください。

github

まずはhead内でjquery本体とプラグインを読み込ませます。

■HTMLhead内

次にプラグインのオプション設定を行います。

今回は円グラフの例を紹介いたします。

■HTMLhead内 スクリプト部分

次にスクリプト内で指定した要素とidをHTMLのbody内に記述します。

■HTML body内

このままですと真っ黒な円グラフが表示されてしまいますので、

最後にCSSで装飾を行います。

■HTMLhead内 CSS部分


数値の種類が増えるたびに「.ct-series-X」のX部分が「a」「b」「c」「d」…と続いていきます。
好みにカスタマイズしてみましょう。

ブラウザ互換性については「Chartist.js」に記載されております。

以上、技術メモでした。

  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。