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

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

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

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

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

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

frappe-chartsで出来ること

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

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

* frappe-chartsを使って lineチャートを作成したGIF

frappe-charts のインストール

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の使い方

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

Lineチャート

上の画像のチャートを例にすると、' 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
})

用意されているチャートのタイプ