【Javascript】グラフ・チャート描画用のjsライブラリまとめ

2013/09/24 2016/07/26

ちょっとWEBでグラフを描画しようと思いまして、jsのライブラリを物色。

色々サイトを眺めてみて触ってみた感想。

現在9個ほど。

Contents

1 ①jQuery-Visualize
2 ②raphael
3 ③ccchart
4 ④chart.js
5 ⑤jqPlot
6 ⑥HIGHCHARTS
7 ⑦Chartist
8 ⑧d3.js
9 ⑨Google Chart Tools
10 ⑩ Epoch

①jQuery-Visualize

レスポンシブ	非対応
アニメーション	なし
外部ライブラリ	jQuery
ライセンス	商用利用可

こちらのページで詳しく解説してくれている。

jQuery Visualizeで洗練されたデザインのグラフの作成 | monopocket blog

分かりやすい。HTMLでデータのテーブルを作ればそれを描画してくれる。

オプションというか、調整可能な部分が少ないのが難点。

グラフのサイズ
テーマ2種類(dark,light)
線の色

②raphael

レスポンシブ	非対応
アニメーション	あり
外部ライブラリ	なし
ライセンス	MIT(商用利用可)

http://raphaeljs.com/
すごい、グニャグニャ動く。凄い。デモ凄い。かっこいい。

でも、使いこなせない。英語ドキュメント・リファレンス全部やってみれば理解できるかな。。

使いこなせたら一番格好良いのが作れそう。

③ccchart

http://ccchart.com

レスポンシブ	非対応
アニメーション	※リアルタイム系は動く
外部ライブラリ	なし
ライセンス	MIT(商用利用可)

デモ・日本語ドキュメントがそろっている。特にデモの数が、非常に細かいレベルで揃っていてありがたい。
まだ実装はしてないけど、オプションも多いし、サンプルも多いし一番とっつきやすく、かつ色々なことが出来そう。

ということで、当面は「ccchart」で遊ぶ。

【参考にしたサイト】
HTML5 – グラフ描画に良さげなJavaScriptライブラリ – Qiita

④chart.js

レスポンシブ	対応
アニメーション	あり
外部ライブラリ	なし
ライセンス	MIT(商用利用可)

Chart.js | Open source HTML5 Charts for your website

レスポンシブ対応。

シンプルで、動きがあって、見ためはcchart.jsより好み。

ccchartは自分のやりたいことがほぼできたので、機能的に不満はないけど、

こっちがどれだけのことが出来るかチェックしてみよう。

【参考サイト】
Chart.jsで動くグラフの描写をしてみる – pixyzehn blog

Canvasで超可愛いグラフが作れる!「Chart.js」の紹介 | 株式会社LIG

<メモ>
chart.jsのLineチャートだけ触ったけど、ccchartに比べると、かゆい所に手が届かない感じがする。

x軸、y軸の表示個数だったり、各データセットのラベルだったりが出せない。

アニメーションもモバイルだと、ちょっとモッサリしてしまうので、使いどころに悩む。

⑤jqPlot

レスポンシブ	非対応
アニメーション	ちょっとあり
外部ライブラリ	jQuery
ライセンス	GPL&MIT(商用利用可)

なんかすごい汎用的そうなものを見つけた。
jqueryのプラグインみたい。

【公式サイト】

http://www.jqplot.com/

【解説サイト】

http://alphasis.info/jquery-plugins/jqplot/

<メモ>
日本語ですごいいっぱいサンプルがあって、非常に助かる。
これ凄いな。

(2014/09/18追記)

⑥HIGHCHARTS

レスポンシブ	対応
アニメーション	あり
外部ライブラリ	なし
ライセンス	商用は有償。

Interactive JavaScript charts for your webpage

<メモ>

ptengineというアクセス解析サービスで使っていた。
動きが恰好よい。マップもあるしぱねぇ。
iphone4だとちと重い。

商用利用不可でライセンス購入が必要。結構高い。

補足：jsで実行するときのデータ構造

サンプル見るとこんな感じ。で、どうデータを作って良いのか分からなくなる。。

$('#container').highcharts({

    series: [{
                name: '東京',
                data: [7.0, 6.9, 9.5, 13.9, 9.6] //data
            },
            {
                name:'名古屋',
                data:[-0.2, 0.8, 5.7, 11.3, 17.0 2.5]
    }] // series

});

$('#container').highcharts({

series: [{

name: '東京',

data: [7.0, 6.9, 9.5, 13.9, 9.6] //data

{

name:'名古屋',

data:[-0.2, 0.8, 5.7, 11.3, 17.0 2.5]

}] // series

});

要は最終的に渡すのは Objectで、

そのオブジェクトは「series」という要素を持ち、

その値(中身)は「オブジェクトの配列」。

そのオブジェクト(seriesの配列内)は「nameとdata」という要素をもち、

・nameはテキスト

・dataは数値の配列

うーん。書いててよく分からない。

ソースで一つずつ作っていくと…

var argObj = new Objec();　//最終的にhighchartに渡す引数オブジェクト

argObj ['series']= new Array(); //seriesプロパティを作成。空配列。
/* 以下 object作成とセットを必要な分繰り返す */
　
/* seriesに格納用のオブジェクト*/
var obj =new Object(); //seriesに格納するオブジェクト一つ

// nameの設定
obj[ 'name']='東京';

//データ配列を作成
obj[ 'data' ] = [1,2,3,4,5,6];

//作ったオブジェクトをseriesにセット
argObj[ 'series' ].push(obj);

/* 繰り返し終了*/

//描画実行
$('#container').highcharts(argObj);

var argObj = new Objec();　//最終的にhighchartに渡す引数オブジェクト

argObj ['series']= new Array(); //seriesプロパティを作成。空配列。

/* 以下 object作成とセットを必要な分繰り返す */

/* seriesに格納用のオブジェクト*/

var obj =new Object(); //seriesに格納するオブジェクト一つ

// nameの設定

obj[ 'name']='東京';

//データ配列を作成

obj[ 'data' ] = [1,2,3,4,5,6];

//作ったオブジェクトをseriesにセット

argObj[ 'series' ].push(obj);

/* 繰り返し終了*/

//描画実行

$('#container').highcharts(argObj);

※「new Object()」と「new Array()」は「{}」「[]」で代替可

という感じかな！

(2014/10/24追記)

⑦Chartist

レスポンシブ	対応
アニメーション	なし
外部ライブラリ	なし
商用	WTFPL(商用利用可)

【ダウンロード】Chartist – Simple responsive charts

【サンプル】Chartist – Examples

レスポンシブル対応で商用利用可。アニメーションが無いのがちょっとさみしいぐらい。

⑧d3.js

レスポンシブ	非対応
アニメーション	あり
外部ライブラリ	なし
商用	BSD(商用利用可)

【日本語マニュアル】D3.js – 日本語ドキュメント

商用利用可。メリット要確認。シンプルなチャートを描画するだけなら、あまりメリット感じないかも。

しかし、出来ることが上記みたいに3D表示とか、いろんなことが出来て凄い。。

奥が深いタイプ。

⑨Google Chart Tools

レスポンシブ	非対応
アニメーション	あり
外部ライブラリ	なし
商用	商用利用可

urlにパラメータを渡して画像を取得する方式の「Google Chart API」とは別の、JSライブラリを使ったAPI。

SVGを使用するようになり、よりリッチなグラフ描画が可能に。

ここが凄い詳しい。
Google Chart Tools の使い方 | プログラマーズ雑記帳

( Google Chart Tools 補足)

折れ線グラフで座標位置に●を付けるようなのは下記のオプションを指定する。

var options = {
    'series':{
       0:{'pointSize': 10 }
    }
};

var options = {

'series':{

0:{'pointSize': 10 }

}

};

seriesが列数値集合だと思ってもらって、描画前にこんな風に定義する。

var data = google.visualization.arrayToDataTable([
['yラベル', 'Xラベル1', 'Xラベル2' ]　
['2004',   1000,       400], 
['2005',   1170,       460], 
['2006',   660,       1120],
['2007',   1030,       540], 
['2008',   1350,       750]

   y軸      x軸<0>      x軸<1>

]);