For Want Of A Better Word

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

      2016/07/26

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

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

現在9個ほど。

 

①jQuery-Visualize

jQuery_Visualize_サンプル1(棒グラフ)_-_2015-03-04_11.59.46

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

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

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

 

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

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

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

 

②raphael

Raphaël_·_Analytics_-_2015-03-04_12.14.00

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

 

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

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

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

 

③ccchart

ccchart_-_2015-03-04_12.01.40

http://ccchart.com

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

 

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

 

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

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

 

 

④chart.js

Chart.js_Open_source_HTML5_Charts_for_your_website_-_2015-03-04_12.02.52

レスポンシブ 対応
アニメーション あり
外部ライブラリ なし
ライセンス 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

jqPlot_Charts_and_Graphs_for_jQuery_-_2015-03-04_12.06.48

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

 

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

【公式サイト】

【解説サイト】

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

 

 

(2014/09/18追記)

⑥HIGHCHARTS

Interactive_JavaScript_charts_for_your_webpage_-_2015-03-04_12.08.47

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

 

Interactive JavaScript charts for your webpage

<メモ>

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

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

 

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

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

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

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

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

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

・nameはテキスト

・dataは数値の配列

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

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

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

という感じかな!

(2014/10/24追記)

⑦Chartist

Chartist_-_Examples_-_2015-03-04_12.10.04

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

 

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

【サンプル】Chartist – Examples

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

 

⑧d3.js

Fisheye_Distortion_-_2015-03-04_12.11.16

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

 

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

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

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

奥が深いタイプ。

 

⑨Google Chart Tools

Google_Charts_—_Google_Developers_-_2015-03-13_10.20.48

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

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

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

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

 

( Google Chart Tools 補足)

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

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

 

 

0番目のpointSizeを10pxに。という指定。

あんまりすぐ見つからなかったのでメモ

⑩ Epoch

※とりあえずメモだけ。

http://epochjs.github.io/epoch/

 

リアルタイム系の表示が売りである模様。

格好良いので、これもいじってみたい。

 

 

 

 - javascript | js, jquery

  関連記事

js-logo
datepicker(カレンダー機能)

datepickerで選択した日付はtextboxなら自動で入る。 カレンダーの …

js-logo
HTMLのコピー禁止とか、右クリックイベントとか

そういう要望があったので調べた。 ここが分かりやすい。 http://penta …

js-logo
JSONPセキュリティ

http://gihyo.jp/dev/serial/01/web20sec/0 …

js-logo
JSで背景色操作
casperjs
【ギブアップ】CentOS+casper.jsでキャプチャを取ると日本語が化けて「□」になる。

=== 追記 === casperjs、phantomjsじゃないけど、wkht …