【Javascript】グラフ・チャート描画用のjsライブラリまとめ
2016/07/26
ちょっとWEBでグラフを描画しようと思いまして、jsのライブラリを物色。
色々サイトを眺めてみて触ってみた感想。
現在9個ほど。
Contents
①jQuery-Visualize
レスポンシブ | 非対応 |
アニメーション | なし |
外部ライブラリ | jQuery |
ライセンス | 商用利用可 |
こちらのページで詳しく解説してくれている。
jQuery Visualizeで洗練されたデザインのグラフの作成 | monopocket blog
分かりやすい。HTMLでデータのテーブルを作ればそれを描画してくれる。
オプションというか、調整可能な部分が少ないのが難点。
- グラフのサイズ
- テーマ2種類(dark,light)
- 線の色
②raphael
レスポンシブ | 非対応 |
アニメーション | あり |
外部ライブラリ | なし |
ライセンス | MIT(商用利用可) |
http://raphaeljs.com/
すごい、グニャグニャ動く。凄い。デモ凄い。かっこいい。
でも、使いこなせない。英語ドキュメント・リファレンス全部やってみれば理解できるかな。。
使いこなせたら一番格好良いのが作れそう。
③ccchart
レスポンシブ | 非対応 |
アニメーション | ※リアルタイム系は動く |
外部ライブラリ | なし |
ライセンス | 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のプラグインみたい。
【公式サイト】
【解説サイト】
<メモ>
日本語ですごいいっぱいサンプルがあって、非常に助かる。
これ凄いな。
(2014/09/18追記)
⑥HIGHCHARTS
レスポンシブ | 対応 |
アニメーション | あり |
外部ライブラリ | なし |
ライセンス | 商用は有償。 |
Interactive JavaScript charts for your webpage
<メモ>
ptengineというアクセス解析サービスで使っていた。
動きが恰好よい。マップもあるしぱねぇ。
iphone4だとちと重い。
商用利用不可でライセンス購入が必要。結構高い。
補足:jsで実行するときのデータ構造
サンプル見るとこんな感じ。で、どうデータを作って良いのか分からなくなる。。
1 2 3 4 5 6 7 8 9 10 11 12 |
$('#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は数値の配列
うーん。書いててよく分からない。
ソースで一つずつ作っていくと…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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 補足)
折れ線グラフで座標位置に●を付けるようなのは下記のオプションを指定する。
1 2 3 4 5 |
var options = { 'series':{ 0:{'pointSize': 10 } } }; |
seriesが列数値集合だと思ってもらって、描画前にこんな風に定義する。
1 2 3 4 5 6 7 8 9 10 11 |
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> ]); |
0番目のpointSizeを10pxに。という指定。
あんまりすぐ見つからなかったのでメモ
⑩ Epoch
※とりあえずメモだけ。
http://epochjs.github.io/epoch/
リアルタイム系の表示が売りである模様。
格好良いので、これもいじってみたい。
関連記事
-
-
[js] chart.jsのグラフをwkhtmltopdfでpdfに保存する
表題のことをしたいとなった。 結論目的は果たされたのだけどハマリポ …
-
-
サードパーティークッキーとは(定義と使い方)
[参考リンク1]https://webtan.impress.co.jp/e/2 …
-
-
selectedを動的につけているセレクトボックスの選択解除・リセット
ちょっと、セレクトボックスの選択解除・リセットをしたい。 調べると …
-
-
[js]JSONPについて整理
JSONPについて整理。 Contents1 JSONPとは2 な …
-
-
mautic利用時の.htaccess設定(クロスドメインとアクセス制御)
mauticをインストールは下記参照。 http://qiita.com/bez …