８個のライブラリ JSでグラフ描画入門

Canvas.js

js3

豊富なグラフパターンが用意されており、細かい部分までカスタマイズ可能な高機能グラフライブラリとなっています。

IE6も含めたほとんどのブラウザで利用でき、レスポンシブ対応のグラフは設定次第で「アニメーション表示」や「ズーム／パン」なども利用できます。

【基本の書き方】

「canvasjs.js」ファイルを公式サイトからダウンロードするか、以下のCDN経由から利用できます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>

そして、「body要素」にグラフを描画する「divタグ」を配置します。

<div id="stage"></div>

一般的な「棒グラフ」を描くサンプルコードは以下のとおり。

var stage = document.getElementById('stage');
var chart = new CanvasJS.Chart(stage, {
  title: {
    text: "サンプルチャート"  //グラフタイトル
  },
  theme: "theme4",  //テーマ設定
  data: [{
    type: 'column',  //グラフの種類
    dataPoints: data  //表示するデータ
  }]
});
chart.render();

簡単な使い方としては、「data項目」内に描きたい「グラフの種類」を指定し、「データ」を配列で渡してあげます。また、必要なオプションはどんどん追記していけばOKです。

また、「テーマ」を設定すると自動的に見た目のレイアウトが変化するので便利ですよ。

サンプルデモはコチラ！（スマホの方はコチラから）

【リソース】

・ライセンス（CC BY-NC 3.0）

Google Charts

js4

Googleが提供するライブラリで、少しコードの書き方にクセがあるものの、マップを使った「Geo Chart」も利用できる豊富なグラフやカスタマイズ性の高さは優秀です。

レスポンシブ対応は自分でコーディングする必要がありますが、モダンブラウザには対応しており、インタラクティブにイベントを検知してグラフを簡単にコントロールできる機能なども備わっています。

【基本の書き方】

「Google Charts」は「loader.js」を使ったライブラリの読み込みが推奨されていますので、まずは以下のスクリプトを読み込みます。

<script src="https://www.gstatic.com/charts/loader.js"></script>

「body要素」にグラフを描画する「divタグ」を配置します。

<div id="stage"></div>

そして、コードを書く前に「Google Charts」を利用するためのパッケージを取得し、コールバック関数を設定します。

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);

上記の例では、コールバックに「drawChart関数」を設定したので、あとはこの関数内にグラフを描画するコードを書いていきます。

一般的な「棒グラフ」を描くサンプルコードは以下のとおり。

function drawChart() {


  var stage = document.getElementById('stage');


  //グラフの種類を設定
  var chart = new google.visualization.ColumnChart(stage);


  //データとオプションを設定
  chart.draw(data, options);


}

書き方としては、グラフの種類に応じたインスタンスを生成し、そこへ「データ」と「オプション」を渡すだけなのですが、「データ」の書き方が少し特殊です。

Excelをイメージすると分かりやすいのですが、縦軸(列)の項目を一番最初の配列に設定し、続けて中身のデータである横軸(行)を記述していきます。

  var data = google.visualization.arrayToDataTable([
    ['月', '数量'],
    ['１月', 65],
    ['２月', 59],
    ['３月', 80],
  ]);

データは、全部まとめて1つの「配列」で渡してあげた方が管理しやすいかもしれません。

サンプルデモはコチラ！（スマホの方はコチラから）

【リソース】

・ライセンス

plotly.js

js5

一般的なグラフはもちろんですが、データ解析などに利用する高度なグラフや3Dを活用したグラフ、マップを使った可視化など、さまざまなジャンルのグラフを驚くほどシンプルな記述で書けるのが特徴的です。

また、表示されたグラフの上をマウスオーバーすると、専用のコントロールパネルが自動で表示されて、インタラクティブに操作できるのも魅力の1つです。(非表示も可)

【基本の書き方】

「plotly.js」は、以下のCDN経由からすぐに利用可能です。

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

あとは、「body要素」にグラフを描画する「divタグ」を設置すればOK。

<div id="stage"></div>

一般的なグラフの描画は、この１行を書くだけです！

Plotly.plot('stage', data, options);

「div要素」のID名をそのまま指定し、配列の「データ」とオブジェクト形式の「オプション」を渡すだけで表示されるのは非常にお手軽です。

サンプルデモはコチラ！（スマホの方はコチラから）

【リソース】

taucharts.js

js6

情報の可視化ライブラリの代名詞とも言える「D3.js」をベースにして開発されているのが、この「taucharts.js」です。

データの要素を指定するだけで、オシャレなカラーリングを自動で行ってくれたり、異なる区分のデータを素早く差し替えて表示するような面白い機能が備わっています。

標準の機能だけだとカスタマイズ性は低いのですが、手軽にプラグインを作って拡張できる設計になっており、今後さまざまなプラグインの提供が予定されています。

【基本の書き方】

最初に読み込まなければいけないファイルがいくつかあります。

<script src="https://cdn.jsdelivr.net/d3js/latest/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/underscorejs/latest/underscore-min.js"></script>
<script src="https://cdn.jsdelivr.net/taucharts/latest/tauCharts.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/taucharts/latest/tauCharts.min.css">

必要なファイルは「d3.js」「underscore.js」「taucharts.js」「taucharts.css」の4つです。

そして、グラフを描画する「divタグ」を配置します。

<div id="stage"></div>

一般的な「棒グラフ」を描くサンプルコードは以下のとおり。

var data = [
  {"月": "１月", "数量": 65},
  {"月": "２月", "数量": 59}
];


var chart = new tauCharts.Chart({
  
    data: data,  //表示するデータ
    type: 'bar',  //グラフの種類
    x: '月',  //X軸の要素
    y: '数量',  //Y軸の要素
    color: '月'  //カラーの基準要素


});
chart.renderTo('#stage');

データの「要素」と紐付いた項目名を、それぞれ「X軸」「Y軸」「カラー」に指定することで、良い感じのカラーリングでグラフが表示されるようになっています。

そのため、データ内の要素を入れ替えれば、違った区分のグラフを簡単に作れるメリットがあります。

サンプルデモはコチラ！（スマホの方はコチラから）

【リソース】

・ライセンス

chartist.js

js7

グラフ描画用のBootstrapみたいな感じのライブラリで、あらかじめ用意されているCSSやJS関数を利用して、グラフのデザインやアニメーションを設定できるようになっているのが特徴です。

専用のプラグインもいくつか公開されており、これを使うことで非常にお手軽なアニメーションやUIを設計できるのも魅力となっています。(独自プラグインも可)

【基本の書き方】

「chartist.js」を利用するのに必要なのは、専用のCSS／JSファイルの２つです。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" />
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>

あとは、「body要素」にグラフ描画用の「divタグ」を配置します。

<div class="ct-chart ct-perfect-fourth"></div>

いくつかデフォルトで設定されているクラス名があるので、そちらを使うようにしましょう。(上記はアスペクト比3:4の設定例です)

一般的な「棒グラフ」を描くサンプルコードは以下のとおり簡単です。

var chart = new Chartist.Bar('.ct-chart', data, options);

グラフの種類に応じたインスタンスを生成する際に、「divタグ」に設定したクラス名と、オブジェクト形式の「データ」「オプション」を渡すだけでOK。

サンプルデモはコチラ！（スマホの方はコチラから）

【リソース】

c3.js

js8

「D3.js」ベースのライブラリで、さまざまなグラフの状態にアクセスできるAPIが多く提供されているので、柔軟なカスタマイズを自分でコーディングできるのが魅力です。

また、グラフの各要素には自動でクラス名が付与されており、独自にCSSをプログラミングすることでデザインも自由に装飾できます。

また、要素をクリックすると、そこだけを強調して表示させるような機能も、デフォルトで備わっているので便利です。

【基本の書き方】

最初に「d3.js」本体ファイルと、「c3.js」のJS／CSSファイルをそれぞれ読み込みます。

<script src="https://cdn.jsdelivr.net/d3js/latest/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css" />

そして、グラフ描画用の「divタグ」を配置すればOK。

<div id="stage"></div>

一般的な「棒グラフ」を描くサンプルコードは以下のとおり簡単です。

var chart = c3.generate({
  bindto: '#stage',
  data: data
});

「bindto」に描画用の「divタグ」を指定し、オブジェクト形式のデータを渡してあげます。

また、変数「chart」を使って、豊富に用意されたAPIにアクセスし、独自にプログラミングすることでインタラクティブなグラフ生成が作れるようになっています。

サンプルデモはコチラ！（スマホの方はコチラから）

【リソース】

・ライセンス

igma.js

js9

こちらはグラフではなく、複数のノードを使って関係性を可視化することができるライブラリになっています。

「JSON」「GEXF」形式のデータファイルを読み込んで、簡単なコードを記述すればOKというお手軽さが人気となっており、複雑な関連性を秘めたデータなどを誰でも簡単に可視化することが出来るので便利です。

【基本の書き方】

「sigma.js」ファイルは、公式サイトからダウンロードするか、以下のCDN経由から利用できます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.1.0/sigma.min.js"></script>

さらに、読み込むデータのファイル形式に合わせて、別途ライブラリを読み込みます。

//GEXF形式のファイルを読み込む場合
<script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.1.0/plugins/sigma.parsers.gexf.min.js"></script>


//JSON形式のファイルを読み込む場合
<script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.1.0/plugins/sigma.parsers.json.min.js"></script>

そして、描画用の「divタグ」を配置します。

<div id="stage"></div>

一般的なファイル読み込みコードは以下のとおり。

var url = 'ここにファイルのURL(パス)を指定する';


sigma.parsers.gexf(url, {
  container: 'stage'
});

この数行を書くだけで、ファイルを読み込んでインタラクティブに可視化することが可能になります。

サンプルデモはコチラ！（スマホの方はコチラから）

【リソース】