d3.js v5をベースにしたチャートライブラリ・「Britecharts」

Britecharts

Britechartsはd3.jsのv5をベースにしたチャートライブラリです。チャートとコンポーネントを簡単に直感的に組み合わせる事が出来るのだそうです。リユースブルであり、シンプルなAPIを特徴としているのだそう。割と手軽な印象で学習コストは低くなりそうです。

動作サンプルがありましたのでお借りしました。

動作サンプル

マウスホバーするとグラフと下部のデータが連動して動く、みたいなよくあるやつです。

正直、上のような簡単なチャートだけならもっと他にも軽量で簡単に使えるライブラリもありますのでBritechartsを使う必要性はないんですが、それなりのデータ量を扱うコンテンツでしたらあとで困らないように様々なケースに対応できるライブラリを選択しておいた方がよさげですね。

ざっくり手順

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-selection/1.2.0/d3-selection.js"></script>
<script src="https://cdn.jsdelivr.net/npm/britecharts@2.10.0/dist/umd/bar.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/britecharts/dist/css/britecharts.min.css" type="text/css" />

CDNを読み込んで

<div class="foobar"></div>

表示させる場所の用意

const container = d3.select('.foobar');

d3-selectionモジュールを使ってd3.jsコンテナを作成

donutChart = britecharts.donut()

上デモならドーナツ型なのでdonut()関数を呼び出してチャートをインスタンス化

let donutData = {
  data:[
    {name: "hoge", id: 1, quantity: 1},
    {name: "huga", id: 2, quantity: 2},
    {name: "piyo", id: 3, quantity: 35}
  ]
};

あとはデータセットを作成してグラフをどう表現したいか等の設定、レンダリングの流れとなります。

donutChart.
  isAnimated(true).
  highlightSliceById(2).
  width(300).
  height(300);

詳細はチュートリアルをご参照下さい。d3.jsベースのチャートライブラリは数多く存在しますが、個人的にはBritechartsはかなりとっつきやすい印象でした。ライセンスはApache2.0となっています。

Britecharts