東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

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

2017.11.24 Posted by

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

今回は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」に記載されております。

以上、技術メモでした。

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278