カンタンにSVGでグラフを実装出来るプラグイン「CHARTIST.JS」

どうもですよ、はやちですよ₍₍ (ง ˘ω˘ )ว ⁾⁾

今回もSVGネタなのですが、グラフをカンタンに描画できるライブラリをご紹介いたします( ˘ω˘)☞三☞ｼｭｯｼｭｯ

導入方法

タスクランナーでのインストールはこちら。

npm install chartist –save

実装方法

実装方法ご紹介します٩( ᐛ )و

↓表示する場所は、ささっとdivで用意します( ˇωˇ)☝

<div class="wrapper">
  <div class="chart"></div>
  <div class="chart2"></div>
</div>

↓基本的な実装はこんな感じ。

//ドーナツ型のグラフ
  let chartBig = new Chartist.Pie('.chart', {
    series: [91, 3, 6],　//数値の設定
    labels: ['BigChart',' ',' '] //グラフ上で文言を設定
  }, {
    donut: true, //trueでドーナツ型になる
    donutWidth: 52 //ドーナツの太さを設定
  });

//円形型のグラフ
  let chartSmall = new Chartist.Pie('.chart2', {
    series: [80, 11],  //数値の設定
    labels: ['SmallChart',' ',' '] //グラフ上で文言を設定
  });

設定されたオプション

数値はseriesで設定します。ドーナツ型にしたい場合はdonut:trueで簡単に切り替えできます( ˇωˇ)☝

labelsで設定しなければ、自動的に数値が表示されます。数値を表示したくない場合は、showLabel:falseで非表示にできます₍₍ (ง ˘ω˘ )ว ⁾⁾

↓できたグラフは、こんな感じでできます( ˘ω˘)☞三☞ｼｭｯｼｭｯ

まとめ

これまでは、イラレで書き起こしてもらったものを頑張ってJSで動かしたりしておりましたが、ライブラリーでらくらく数値を変えられてとても便利₍₍ (ง ˘ω˘ )ว ⁾⁾
レスポンシブも対応されててとてもしゅてきですよ(*ˇωˇ*)ッポ

円グラフを紹介しましたが、ほかにも折れ線や棒グラフでの実装できてアニメーションもつけられるので、ご興味ありましたらぜひ( ˘ω˘)☞三☞ｼｭｯｼｭｯ

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。