JavaScript/チャート描画 のバックアップ(No.35)
- バックアップ一覧
- 差分 を表示
- 現在との差分 を表示
- ソース を表示
- JavaScript/チャート描画 へ行く。
- 1 (2012-10-26 (金) 20:11:59)
- 2 (2012-10-26 (金) 20:47:59)
- 3 (2013-03-18 (月) 18:35:16)
- 4 (2013-04-15 (月) 11:24:30)
- 5 (2013-04-18 (木) 14:10:30)
- 6 (2013-06-02 (日) 04:34:43)
- 7 (2013-07-11 (木) 17:11:12)
- 8 (2013-07-12 (金) 03:42:04)
- 9 (2013-07-22 (月) 13:26:13)
- 10 (2013-08-01 (木) 21:41:13)
- 11 (2013-08-19 (月) 17:13:40)
- 12 (2013-09-03 (火) 05:48:14)
- 13 (2013-09-04 (水) 15:33:58)
- 14 (2013-09-05 (木) 22:59:32)
- 15 (2013-09-11 (水) 01:09:08)
- 16 (2013-09-12 (木) 03:29:08)
- 17 (2013-09-19 (木) 17:49:25)
- 18 (2013-09-21 (土) 15:48:26)
- 19 (2013-10-08 (火) 02:02:36)
- 20 (2013-10-08 (火) 15:18:29)
- 21 (2013-10-28 (月) 15:02:46)
- 22 (2013-11-05 (火) 21:12:48)
- 23 (2013-11-15 (金) 10:05:24)
- 24 (2013-11-19 (火) 20:41:35)
- 25 (2014-01-24 (金) 05:52:16)
- 26 (2014-02-22 (土) 11:35:13)
- 27 (2014-04-07 (月) 11:15:24)
- 28 (2014-04-13 (日) 22:06:54)
- 29 (2014-04-17 (木) 12:44:02)
- 30 (2014-04-18 (金) 19:50:21)
- 31 (2014-04-20 (日) 18:12:59)
- 32 (2014-04-21 (月) 22:20:59)
- 33 (2014-04-23 (水) 15:44:48)
- 34 (2014-05-23 (金) 16:58:28)
- 35 (2014-07-29 (火) 19:08:42)
- 36 (2014-08-15 (金) 14:26:20)
- 37 (2014-09-08 (月) 11:19:57)
- 38 (2014-09-16 (火) 11:12:33)
- 39 (2015-05-21 (木) 03:29:46)
- 40 (2015-06-30 (火) 16:19:26)
JavaScriptで描画する各種チャート雑感
Chart.js
最近知ってあまり試してませんが、一見良さそうです。
良い点
- デフォルトで落ち着いた色のデザイン
- アニメで表示される
リンク
ccchart
JavaScript書籍でも有名な高橋 登史朗氏が作成
良い点
- JavaScriptファイルが１つで導入しやすい
- サンプルが豊富でカスタマイズしやすい
- 横軸に基準線を引いたり、複合したチャートを作れる
- タッチするとポップアップで内容を表示可能（残念ながらドラッグしたときに表示されないので、スマホで少し操作しにくい）
- タッチするとグラフがフリップして切り替わる表示も可能
悪い点
- 折れ線、棒グラフ以外のグラフ種類が少ない
- デフォルトの影などのコントラストが大きい（黒系の背景だとサンプルも多く良さそう、逆に白系の背景は工夫する必要があるかも）
リンク
- ccchart Reference PDF ... パラメータ一覧
- 【グラフ描画ライブラリ】ccchartの使い方メモ
jqPlot
割りと有名なjQuery上で動くグラフ描画ライブラリ(jQuery Mobileからも使えます)
良い点
- デフォルトの白系統の背景で、抑え目の色使いが自然
- グラフをアニメ描画できる
悪い点
- タッチしてポップアップ表示などは対応してなさそう
Raphael.js
良い点
- チャート以外でもiPadでタッチ操作可能な各種描画サンプルが豊富
- カラーピッカーはタッチでとても操作しやすかった
- ドラッグ可能な相関図も描画可能
- イージングサンプルも有る
悪い点
- グラフの機能は他と比べて少ない
-Highcharts JS
とても高機能で使いやすいが有償
良い点
- 見た目が自然
- 機能が豊富
- iPadのドラッグに対応してグラフの値をポップアップ表示可能
悪い点
- 有償
elycharts
MIT licenseのJavaScriptチャート描画ライブラリ
良い点
- 描画開始時のアニメ表示可能
- マウスオーバーで頂点などの情報が表示される
- タッチするとポップアップで内容を表示可能（残念ながらドラッグしたときに表示されないので、スマホで少し操作しにくい）
悪い点
- 影などが付いてなく、図がペタっとした印象
JustGauge
半円形のスピードメーターのようなグラフがアニメ付きで描けます。
CanvasJS
polychart.js
D3.js
- Place.Me Infographics: d3 implementation" D3.jsで作成されたインフォグラフィック
- D3.js例文辞典
- D3.jsを学習する際に見ると良いドキュメント
- D3.jsをつかってData-Drivenにリッチなグラフやチャートを作成しよう | Tech-Sketch
- D3.jsの勉強会を行いました。 | GUNMA GIS GEEK
- D3 チュートリアル
- 明日から使えるD3.js | スライドショー
- D3.jsと学ぶVisualization（可視化）の世界 スライドショー
- The Big List of D3.js Examples
- D3.js勉強会（地図入門）を開催しました。 | GUNMA GIS GEEK
- 「D3.js」を使ったデータビジュアライゼーション | CodeZine
- D3.js example | Pinterest
- 可視化ライブラリD3.jsの設計が素晴らしすぎる。 | 三度の飯とエレクトロン
- iPhoneやiPadで気軽にD3.jsを試せる開発環境「Procoding」 | GUNMA GIS GEEK
- D3.js入門 – 「データ・ドリブン」という特徴について | Developers.IO
- D3.jsの使い方とグラフを作成するサンプル | Tips Note
- D3.jsでバーンダウンチャートを書く | Qiita
リンク
- jlord/sheetsee.js ... Googleスプレッドシートをデータベースとして、テーブルやグラフを表示するJavaScriptライブラリ
- Titanium Mobileでグラフを描画 | もふもふ部@CAW
- Mozanit Works Engineering ... JavaScriptチャート描画ライブラリ比較記事
- 20 POPULAR JAVASCRIPT CHARTS AND GRAPHICS LIBRARY
- Histogram.js | Eoin Murray
- Interactive Charts in Appcelerator Titanium | Appcelerator Developer Blog- ... 株価チャートに良さそう。
- SVG、PNG書き出しできるフリーのビジュアライゼーション・ツール | VISUAL THINKING ... 分割した長方形の区分大きさで割合を表したりする図などが作れます。
- 35 JavaScript Chart and Graph Libraries for Developers | Code Geekz
- ネットワーク図やタイムライン等を描画できるユニークなビジュアライズライブラリ「vis.js」 | phpspot開発日誌
- 30 Simple Tools For Data Visualization | Co.Design | business + design