Skip to main content

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

js1

今回は、JavaScriptを使って「グラフやチャートを描きたい!」とか、「さまざまなデータを可視化させたい!」という人にオススメのJSライブラリをご紹介しようと思います。

また、すぐに使い始められるように、ミニマムな構成の「サンプルコード」も合わせて掲載しているので、自分に合ったライブラリを使う取っ掛かりになれば幸いです。

Chart.js

js2

最近、活発にバージョンアップをしている「Chart.js」は、すべてのグラフが自動的にアニメーション表示されるユニークな仕掛けを持っており、シンプルで理解しやすい記述が出来る点も魅力です。

グラフの種類は少ないものの、モダンブラウザ&レスポンシブ対応で、あまりカスタマイズせずに「デフォルト」のままでも手軽に使えるでしょう。

【 基本の書き方 】

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

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

あとは、「body要素」に「canvasタグ」を配置すれば準備OK!

<canvas id="stage"></canvas>

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

var canvas = document.getElementById('stage');
var chart = new Chart(canvas, {


  type: 'bar',  //グラフの種類
  data: mydata,  //表示するデータ
  options: options  //オプション設定


});

記述はシンプルで、グラフの種類(「bar」「line」「pie」など)を指定したら、「データ」と「オプション」をオブジェクト形式で渡してあげるだけです。

サンプルデモはコチラ!(スマホの方はコチラから)

【リソース】

公式ドキュメント

ライセンス(MIT)

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([
    ['月', '数量'],
    ['1月', 65],
    ['2月', 59],
    ['3月', 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>

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

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

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

サンプルデモはコチラ!(スマホの方はコチラから)

【 リソース 】

公式ドキュメント

ギャラリー

ライセンス(MIT)

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 = [
  {"月": "1月", "数量": 65},
  {"月": "2月", "数量": 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ファイルの2つです。

<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。

サンプルデモはコチラ!(スマホの方はコチラから)

【 リソース 】

公式ドキュメント

ギャラリー

ライセンス(MIT)

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'
});

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

サンプルデモはコチラ!(スマホの方はコチラから)

【 リソース 】

公式ドキュメント

ライセンス(MIT)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.