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

はやち


カンタンに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で非表示にできます₍₍ (ง ˘ω˘ )ว ⁾⁾

series 数値の設定
labels グラフ上で文言を設定
donut trueでドーナツ型に変えることができる
donutWidth ドーナツ型の太さを設定
showLabel falseで数値を非表示

 

↓できたグラフは、こんな感じでできます( ˘ω˘)☞三☞シュッシュッ

まとめ

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

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

はやち
この記事を書いた人
はやち

フロントエンドエンジニア

おすすめ記事

Recommended by