paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

JavaScriptでグラフ描画入門!全8個のライブラリをコード付きで一挙に解説!

f:id:paiza:20160606173050j:plain
どうも、まさとらん(@0310lan)です。

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

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

Chart.js

Chart.js
f:id:paiza:20160606173327j:plain
最近、活発にバージョンアップをしている「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」など)を指定したら、「データ」と「オプション」をオブジェクト形式で渡してあげるだけです。

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

See the Pen Chart.jsサンプル by webhacck (@webhacck) on CodePen.

Canvas.js

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

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

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

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

See the Pen CanvasJSサンプル by webhacck (@webhacck) on CodePen.

Google Charts

Google Charts
f:id:paiza:20160606174530j:plain
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つの「配列」で渡してあげた方が管理しやすいかもしれません。

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

See the Pen GoogleChartsサンプル by webhacck (@webhacck) on CodePen.

plotly.js

plotly.js
f:id:paiza:20160606175015j:plain
一般的なグラフはもちろんですが、データ解析などに利用する高度なグラフや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名をそのまま指定し、配列の「データ」とオブジェクト形式の「オプション」を渡すだけで表示されるのは非常にお手軽です。

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

See the Pen plotly.jsサンプル by webhacck (@webhacck) on CodePen.

taucharts.js

Taucharts
f:id:paiza:20160606175249j:plain
情報の可視化ライブラリの代名詞とも言える「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軸」「カラー」に指定することで、良い感じのカラーリングでグラフが表示されるようになっています。

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

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

See the Pen taucharts.jsサンプル by webhacck (@webhacck) on CodePen.

【 リソース 】

公式ドキュメント

ライセンス

chartist.js

Chartist.js
f:id:paiza:20160606180237j:plain
グラフ描画用の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。

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

See the Pen chartist.jsサンプル by webhacck (@webhacck) on CodePen.

c3.js

C3.js
f:id:paiza:20160606180511j:plain
「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にアクセスし、独自にプログラミングすることでインタラクティブなグラフ生成が作れるようになっています。

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

See the Pen c3.jsサンプル by webhacck (@webhacck) on CodePen.

sigma.js

Sigma.js
f:id:paiza:20160606181330j:plain
こちらはグラフではなく、複数のノードを使って関係性を可視化することができるライブラリになっています。

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

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

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

See the Pen sigma.jsサンプル by webhacck (@webhacck) on CodePen.

paizaについて

f:id:paiza:20150730172136p:plain
paizaでは、プログラミングスキルチェック問題(9言語に対応)を多数ご用意いたしております。もちろん今回使用しているJavaScriptにも対応しておりますので、「JavaScriptでプログラミング問題を解いてみたい」「自分のスキルを試してみたい」という方にもピッタリです!

paizaでプログラミング問題を解くと、結果によりS・A・B・C・D・Eの6段階で自分のスキルのランクが分かります。問題はレベルごとに分かれており、初心者から上級者の方まで挑戦していただけますので、自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください!!

プログラミング問題による学習コンテンツ(paiza Learning)もございますので、「まったくのプログラミング未経験者です」「初心者なのでプログラミング学習から始めたいな」という方もぜひご利用ください。

さらに、paizaが運営する無料オンラインプログラミング実行環境サービス「paiza.IO (パイザ・アイオー)では、JavaScriptはもちろん、多数プログラミング言語のプログラミングが面倒な環境構築なしに無料でできますのでぜひご利用ください!

■まとめ

今回ご紹介したライブラリは、基本的に無料で利用可能ですが、一部「非商用に限り無料」のモノもあるので、一緒に掲載しているライセンスを確認するのを忘れないようにしましょう。

また、ドキュメントがすべて英語なので、苦手な方は今回紹介しているサンプルコードを使って自分でもグラフが表示できるかを確認し、次にオプションを使ってみたり他のサンプルを試していくとスムーズに扱えるようになると思います。

これらのライブラリを活用して、ぜひ自分のサイトやブログにオリジナルのグラフコンテンツを掲載してみてはいかがでしょうか?




paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。

自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。
paiza.jp
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza


プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編