カンタンに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で動かしたりしておりましたが、ライブラリーでらくらく数値を変えられてとても便利₍₍ (ง ˘ω˘ )ว ⁾⁾
レスポンシブも対応されててとてもしゅてきですよ(*ˇωˇ*)ッポ

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

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

Webサイト制作の実績・料金を見る

この記事のシェア数

はやち
はやち フロントエンドエンジニア / 林 佳代子

フロントエンドエンジニアのはやちです( ˘ω˘)☝ 以前までは顔隠しておりましたが思い切ることにしました…。 相変わらず顔文字乱舞ですがブログもコーディングも楽しくやっていこうと思います✌(´ʘ‿ʘ`)✌ 今までに作ったDemoたちはGithubにて公開しております!よろしければ是非( ˘ω˘)☞三☞シュッシュッ

このメンバーの記事をもっと読む
それいけ!フロントエンド | 213 articles
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL