JSで簡単なチャートが作成できるライブラリ「frappe-charts」

簡単にチャート( グラフ ) が作成できるjavascript用ライブラリ「frappe charts」の紹介です。

 普段目にするWebサイトで チャートやグラフが使われているものは少ないですが、仕事で使う管理システムなどでは 統計図表を表すものとしてよく使われます。

 javascript用の 有名なチャート作成ライブラリとして ' d3.js '、' Chart.js ' などが挙げられますが、細かいことまで可能な分、オプションなどが細かくなり コードが複雑になることもよくあります。

 「ポートフォリオ用ではないので、最小限のコードでシンプルなチャートを描画したい」

そんな人にオススメのチャート作成ライブラリが「frappe charts」です。

- 下のスニペットのような短いコードで、レスポンシブに対応した動的なSVGチャートが作成できる

const chart = new Chart({
    parent: '#chart', // ターゲットエレメント
    title: "My Awesome Chart", // タイトル
    data: data, // チャートに表示するデータ
    type: 'line',  // チャートのタイプ
    height: 250 // チャートの高さ
})

frappe-chartの インスールは ' npm ' 又は ' yarn ' コマンドを使っておこないます。

# npm
npm i frappe-charts
#yarn
yarn add frappe-charts

# moduleとして読みこむ場合
import Chart from "frappe-charts/dist/frappe-charts.min.cjs";

# commonJS
const Chart = require('frappe-charts/dist/frappe-charts.min.cjs');

 
 また、CDNも用意されています。ライブラリをダウンロードせず ブラウザから直接 frappe-chartsを 読み込むこともできます。

<script src="https://unpkg.com/frappe-charts/dist/frappe-charts.min.iife.js"></script>

 frappe chartsの特徴はコードのシンプルさにあり、グラフにするデータさえ作ってしまえば 簡単に使うことが出来ます。

  上の画像のチャートを例にすると、' 1月 ',  ' 2月 ' が " labels "、グラフに表示させる値が " datasets " 内のオブジェクトに入ります。

var chartData = {
  labels: [
    '1月', '2月', '3月', '4月', '5月', '6月', 
    '7月', '8月', '9月', '10月', '11月', '12月', 
  ], // ラベル
  datasets: [
    {
      title: "Aの成績", // マウスホバーされると表示
      color: "red", // チャートの色
      values: [ 5, 8, 7, 8, 1, 2, 4, 5, 8, 3, 3, 7 ] // チャートのデータ
    },
  ] // ! dataset
};

// チャートを描画
var chart = new Chart({
    parent: "#chart", // id="chart" でチャートを描画
    title: "タイトル", // タイトル
    data: data, // 変数 chartData を割り当て
    type: 'line', // チャートのタイプ
    height: 250
 });

 また、frappe chartsには複数のグラフタイプが用意されており、chartクラスの ' type ' の値を変更するだけで簡単に使えます。

// bar, line, scatter, pie, percentageが用意されています
const chart = new Chart({
    parent: '#chart',
    title: "My Awesome Chart",
    data: data,
    type: 'bar', // 'line', 'scatter', 'pie', 'percentage'
    height: 250
})

* 下のリンクで 実際に frappe chartsを使ったデモページを公開しています

cupOF Demo : Frappe Chartsを使ったデモ

 以上が frappe chartsの紹介でした。チャートライブラリは沢山のオプションを渡す必要があるものが多いですが、 frappe chartsは簡単にチャート(グラフ)を作成することができます。

管理システムを作成している時などで利用すると 活躍する場面が多そうです。

GitHub : frappe/charts