SVGでグラフを描写できるChartist.js
2017.11.24 Posted by Coding_team
こんにちは、ウェブラボ技術メモです。
今回はSVGでグラフを描写できる「Chartist.js」を紹介いたします。
DEMOはこちら
よく見かける円グラフなどが、簡単に設定できてしまいます。
ちょっと数値を変更したいといった修正作業もお手軽なので魅力的ですね。
それでは実際に実装していきましょう。
以下からプラグインをダウンロードしてください。
github
まずはhead内でjquery本体とプラグインを読み込ませます。
■HTMLhead内
1 2 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="js/chartist.js"></script> |
次にプラグインのオプション設定を行います。
今回は円グラフの例を紹介いたします。
■HTMLhead内 スクリプト部分
1 2 3 4 5 6 |
<script> let chart = new Chartist.Pie('.circle_chart', { series: [50, 30, 20], //円グラフの数値を入力します。数を増やすときは「,」を追加します。 labels: ['赤 50%','青 30%','緑 20%'] //円グラフのラベルを入力します。 }); </script> |
次にスクリプト内で指定した要素とidをHTMLのbody内に記述します。
■HTML body内
1 |
<div class="circle_chart"></div> |
このままですと真っ黒な円グラフが表示されてしまいますので、
最後にCSSで装飾を行います。
■HTMLhead内 CSS部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.circle_chart{ //グラフのサイズと表示位置を決めます width: 300px; height: 300px; margin: 0 auto; } .circle_chart .ct-series-a .ct-slice-pie{ //1つ目の数値の背景色を決めます。カラーコード使用可。 stroke: red; fill: red; } .circle_chart .ct-series-b .ct-slice-pie{ //2つ目の数値の背景色を決めます。 stroke: blue; fill: blue; } .circle_chart .ct-series-c .ct-slice-pie{ //3つ目の数値の背景色を決めます。 stroke: green; fill: green; } .circle_chart .ct-label{ //ラベルの文字色を変更します。 fill: #fff; } |
数値の種類が増えるたびに「.ct-series-X」のX部分が「a」「b」「c」「d」…と続いていきます。
好みにカスタマイズしてみましょう。
ブラウザ互換性については「Chartist.js」に記載されております。
以上、技術メモでした。
関連記事こちらの記事も合わせてどうぞ。
ノーコードツールとは?Web制作の新常識と活用事例について徹底解説!
2024.08.23
2022.07.28
Webサイト更新時に修正が反映されない時は?キャッシュ削除での解決方法
2022.05.19