PapuuWiki
JavaScript/チャート描画
をテンプレートにして作成
開始行:
*JavaScriptで描画する各種チャート雑感
**[[Chart.js>http://www.chartjs.org/]]
最近知ってあまり試してませんが、一見良さそうです。~
~
良い点
-デフォルトで落ち着いた色のデザイン
-アニメで表示される
リンク
-[[絶対まねしたい！Chart.jsを使ってフラットデザインぽいグ...
-[[HTML5 × Chart.jsで円グラフを描く | ビジュアルシンキン...
**[[ccchart>http://jsgt.org/c/]]
JavaScript書籍でも有名な高橋 登史朗氏が作成~
~
良い点
-JavaScriptファイルが１つで導入しやすい
-サンプルが豊富でカスタマイズしやすい
-横軸に基準線を引いたり、複合したチャートを作れる
-タッチするとポップアップで内容を表示可能（残念ながらドラ...
-タッチするとグラフがフリップして切り替わる表示も可能
悪い点
-折れ線、棒グラフ以外のグラフ種類が少ない
-デフォルトの影などのコントラストが大きい（黒系の背景だと...
リンク
-[[ccchart Reference PDF>http://jsgt.org/c/doc/ccchart-09...
-[[【グラフ描画ライブラリ】ccchartの使い方メモ>http://qii...
**[[jqPlot>http://www.jqplot.com/index.php]]
割りと有名なjQuery上で動くグラフ描画ライブラリ(jQuery Mob...
良い点
-デフォルトの白系統の背景で、抑え目の色使いが自然
-グラフをアニメ描画できる
悪い点
-タッチしてポップアップ表示などは対応してなさそう
**[[Raphael.js>http://raphaeljs.com/]]
良い点
-チャート以外でもiPadでタッチ操作可能な各種描画サンプルが...
-カラーピッカーはタッチでとても操作しやすかった
-ドラッグ可能な相関図も描画可能
-イージングサンプルも有る
悪い点
-グラフの機能は他と比べて少ない
**-[[Highcharts JS>http://shop.highsoft.com/highcharts.ht...
とても高機能で使いやすいが有償
良い点
-見た目が自然
-機能が豊富
-iPadのドラッグに対応してグラフの値をポップアップ表示可能
悪い点
-有償
**[[elycharts>http://elycharts.com/]]
MIT licenseのJavaScriptチャート描画ライブラリ
良い点
-描画開始時のアニメ表示可能
-マウスオーバーで頂点などの情報が表示される
-タッチするとポップアップで内容を表示可能（残念ながらドラ...
悪い点
-影などが付いてなく、図がペタっとした印象
**[[JustGauge>http://www.justgage.com/]]
半円形のスピードメーターのようなグラフがアニメ付きで描け...
**[[CanvasJS>http://canvasjs.com/]]
**[[polychart.js>http://polychartjs.com/]]
**D3.js
-[[Place.Me Infographics: d3 implementation" D3.jsで作成...
-[[D3.js例文辞典>http://www.openspc2.org/reibun/D3.js/]]
-[[D3.jsを学習する際に見ると良いドキュメント>http://qiita...
-[[D3.jsをつかってData-Drivenにリッチなグラフやチャートを...
-[[D3.jsの勉強会を行いました。 | GUNMA GIS GEEK>http://sh...
-[[D3 チュートリアル>http://ja.d3js.info/alignedleft/tuto...
-[[明日から使えるD3.js | スライドショー>http://tech-sketc...
-[[D3.jsと学ぶVisualization（可視化）の世界 スライドショ...
-[[The Big List of D3.js Examples>http://christopheviau.c...
-[[D3.js勉強会（地図入門）を開催しました。 | GUNMA GIS GE...
-[[「D3.js」を使ったデータビジュアライゼーション | CodeZi...
-[[D3.js example | Pinterest>http://bit.ly/I0Tapl]]
-[[可視化ライブラリD3.jsの設計が素晴らしすぎる。 | 三度の...
-[[iPhoneやiPadで気軽にD3.jsを試せる開発環境「Procoding」...
-[[D3.js入門 – 「データ・ドリブン」という特徴につい...
-[[D3.jsの使い方とグラフを作成するサンプル | Tips Note>ht...
-[[D3.jsでバーンダウンチャートを書く | Qiita>http://qiita...
-[[D3.js Step by Step | Zero Viscosity>http://zeroviscosi...
-[[D3.jsで簡単にベン図がかけるプラグイン「venn.js」 | #GU...
-[[【D3.js】チャートをSVGやPNGでダウンロードできるように...
*リンク
-[[jlord/sheetsee.js>https://github.com/jlord/sheetsee.js...
-[[Titanium Mobileでグラフを描画 | もふもふ部@CAW>http://...
-[[Mozanit Works Engineering>http://mozanitworks.blogspot...
-[[20 POPULAR JAVASCRIPT CHARTS AND GRAPHICS LIBRARY>http...
-[[Histogram.js | Eoin Murray>http://eoinmurray.io/blog/2...
-[[Interactive Charts in Appcelerator Titanium | Appceler...
-[[SVG、PNG書き出しできるフリーのビジュアライゼーション・...
-[[35 JavaScript Chart and Graph Libraries for Developers...
-[[ネットワーク図やタイムライン等を描画できるユニークなビ...
-[[30 Simple Tools For Data Visualization | Co.Design | b...
-[[Web業務システムの定番。HTML5×Canvasを使ったグラフライ...
-[[[JS]イベントを時間軸で表すタイムスケジュールシートをシ...
-[[[JS]美しい曲線を使ったチャート・グラフが描けるHTML5 Ca...
終了行:
*JavaScriptで描画する各種チャート雑感
**[[Chart.js>http://www.chartjs.org/]]
最近知ってあまり試してませんが、一見良さそうです。~
~
良い点
-デフォルトで落ち着いた色のデザイン
-アニメで表示される
リンク
-[[絶対まねしたい！Chart.jsを使ってフラットデザインぽいグ...
-[[HTML5 × Chart.jsで円グラフを描く | ビジュアルシンキン...
**[[ccchart>http://jsgt.org/c/]]
JavaScript書籍でも有名な高橋 登史朗氏が作成~
~
良い点
-JavaScriptファイルが１つで導入しやすい
-サンプルが豊富でカスタマイズしやすい
-横軸に基準線を引いたり、複合したチャートを作れる
-タッチするとポップアップで内容を表示可能（残念ながらドラ...
-タッチするとグラフがフリップして切り替わる表示も可能
悪い点
-折れ線、棒グラフ以外のグラフ種類が少ない
-デフォルトの影などのコントラストが大きい（黒系の背景だと...
リンク
-[[ccchart Reference PDF>http://jsgt.org/c/doc/ccchart-09...
-[[【グラフ描画ライブラリ】ccchartの使い方メモ>http://qii...
**[[jqPlot>http://www.jqplot.com/index.php]]
割りと有名なjQuery上で動くグラフ描画ライブラリ(jQuery Mob...
良い点
-デフォルトの白系統の背景で、抑え目の色使いが自然
-グラフをアニメ描画できる
悪い点
-タッチしてポップアップ表示などは対応してなさそう
**[[Raphael.js>http://raphaeljs.com/]]
良い点
-チャート以外でもiPadでタッチ操作可能な各種描画サンプルが...
-カラーピッカーはタッチでとても操作しやすかった
-ドラッグ可能な相関図も描画可能
-イージングサンプルも有る
悪い点
-グラフの機能は他と比べて少ない
**-[[Highcharts JS>http://shop.highsoft.com/highcharts.ht...
とても高機能で使いやすいが有償
良い点
-見た目が自然
-機能が豊富
-iPadのドラッグに対応してグラフの値をポップアップ表示可能
悪い点
-有償
**[[elycharts>http://elycharts.com/]]
MIT licenseのJavaScriptチャート描画ライブラリ
良い点
-描画開始時のアニメ表示可能
-マウスオーバーで頂点などの情報が表示される
-タッチするとポップアップで内容を表示可能（残念ながらドラ...
悪い点
-影などが付いてなく、図がペタっとした印象
**[[JustGauge>http://www.justgage.com/]]
半円形のスピードメーターのようなグラフがアニメ付きで描け...
**[[CanvasJS>http://canvasjs.com/]]
**[[polychart.js>http://polychartjs.com/]]
**D3.js
-[[Place.Me Infographics: d3 implementation" D3.jsで作成...
-[[D3.js例文辞典>http://www.openspc2.org/reibun/D3.js/]]
-[[D3.jsを学習する際に見ると良いドキュメント>http://qiita...
-[[D3.jsをつかってData-Drivenにリッチなグラフやチャートを...
-[[D3.jsの勉強会を行いました。 | GUNMA GIS GEEK>http://sh...
-[[D3 チュートリアル>http://ja.d3js.info/alignedleft/tuto...
-[[明日から使えるD3.js | スライドショー>http://tech-sketc...
-[[D3.jsと学ぶVisualization（可視化）の世界 スライドショ...
-[[The Big List of D3.js Examples>http://christopheviau.c...
-[[D3.js勉強会（地図入門）を開催しました。 | GUNMA GIS GE...
-[[「D3.js」を使ったデータビジュアライゼーション | CodeZi...
-[[D3.js example | Pinterest>http://bit.ly/I0Tapl]]
-[[可視化ライブラリD3.jsの設計が素晴らしすぎる。 | 三度の...
-[[iPhoneやiPadで気軽にD3.jsを試せる開発環境「Procoding」...
-[[D3.js入門 – 「データ・ドリブン」という特徴につい...
-[[D3.jsの使い方とグラフを作成するサンプル | Tips Note>ht...
-[[D3.jsでバーンダウンチャートを書く | Qiita>http://qiita...
-[[D3.js Step by Step | Zero Viscosity>http://zeroviscosi...
-[[D3.jsで簡単にベン図がかけるプラグイン「venn.js」 | #GU...
-[[【D3.js】チャートをSVGやPNGでダウンロードできるように...
*リンク
-[[jlord/sheetsee.js>https://github.com/jlord/sheetsee.js...
-[[Titanium Mobileでグラフを描画 | もふもふ部@CAW>http://...
-[[Mozanit Works Engineering>http://mozanitworks.blogspot...
-[[20 POPULAR JAVASCRIPT CHARTS AND GRAPHICS LIBRARY>http...
-[[Histogram.js | Eoin Murray>http://eoinmurray.io/blog/2...
-[[Interactive Charts in Appcelerator Titanium | Appceler...
-[[SVG、PNG書き出しできるフリーのビジュアライゼーション・...
-[[35 JavaScript Chart and Graph Libraries for Developers...
-[[ネットワーク図やタイムライン等を描画できるユニークなビ...
-[[30 Simple Tools For Data Visualization | Co.Design | b...
-[[Web業務システムの定番。HTML5×Canvasを使ったグラフライ...
-[[[JS]イベントを時間軸で表すタイムスケジュールシートをシ...
-[[[JS]美しい曲線を使ったチャート・グラフが描けるHTML5 Ca...
ページ名:
