トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

JavaScript/チャート描画 の変更点

Top / JavaScript / チャート描画

*JavaScriptで描画する各種チャート雑感



**[[Chart.js>http://www.chartjs.org/]]
最近知ってあまり試してませんが、一見良さそうです。~
~
良い点
-デフォルトで落ち着いた色のデザイン
-アニメで表示される

リンク
-[[絶対まねしたい!Chart.jsを使ってフラットデザインぽいグラフを作る方法 | startapp>http://startapp.jp/2013/07/21/how-to-create-flat-chart.html?utm_source=twitterfeed&utm_medium=twitter]]
-[[HTML5 × Chart.jsで円グラフを描く | ビジュアルシンキング >http://www.visualthinking.jp/archives/13390?utm_content=bufferd9a05&utm_source=buffer&utm_medium=twitter&utm_campaign=Buffer]]



**[[ccchart>http://jsgt.org/c/]]
JavaScript書籍でも有名な高橋 登史朗氏が作成~
~
良い点
-JavaScriptファイルが1つで導入しやすい
-サンプルが豊富でカスタマイズしやすい
-横軸に基準線を引いたり、複合したチャートを作れる
-タッチするとポップアップで内容を表示可能(残念ながらドラッグしたときに表示されないので、スマホで少し操作しにくい)
-タッチするとグラフがフリップして切り替わる表示も可能

悪い点
-折れ線、棒グラフ以外のグラフ種類が少ない
-デフォルトの影などのコントラストが大きい(黒系の背景だとサンプルも多く良さそう、逆に白系の背景は工夫する必要があるかも)

リンク
-[[ccchart Reference PDF>http://jsgt.org/c/doc/ccchart-0931.pdf]] ... パラメータ一覧
-[[【グラフ描画ライブラリ】ccchartの使い方メモ>http://qiita.com/maruyam-a/items/c5f1750f34dc0e62f6a5]]



**[[jqPlot>http://www.jqplot.com/index.php]]
割りと有名なjQuery上で動くグラフ描画ライブラリ(jQuery Mobileからも使えます)

良い点
-デフォルトの白系統の背景で、抑え目の色使いが自然
-グラフをアニメ描画できる

悪い点
-タッチしてポップアップ表示などは対応してなさそう



**[[Raphael.js>http://raphaeljs.com/]]

良い点
-チャート以外でもiPadでタッチ操作可能な各種描画サンプルが豊富
-カラーピッカーはタッチでとても操作しやすかった
-ドラッグ可能な相関図も描画可能
-イージングサンプルも有る

悪い点
-グラフの機能は他と比べて少ない



**-[[Highcharts JS>http://shop.highsoft.com/highcharts.html]]
とても高機能で使いやすいが有償

良い点
-見た目が自然
-機能が豊富
-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で作成されたインフォグラフィック>http://h4rrydog.github.io/placeMe/]]
-[[D3.js例文辞典>http://www.openspc2.org/reibun/D3.js/]]
-[[D3.jsを学習する際に見ると良いドキュメント>http://qiita.com/awakia/items/8d2192fa842ae3079589]]
-[[D3.jsをつかってData-Drivenにリッチなグラフやチャートを作成しよう | Tech-Sketch>http://tech-sketch.jp/2013/09/d3js.html]]
-[[D3.jsの勉強会を行いました。 | GUNMA GIS GEEK>http://shimz.me/blog/d3-js/3035]]
-[[D3 チュートリアル>http://ja.d3js.info/alignedleft/tutorials/d3/]]
-[[明日から使えるD3.js | スライドショー>http://tech-sketch.github.io/graph-d3js/]]
-[[D3.jsと学ぶVisualization(可視化)の世界 スライドショー>http://www.slideshare.net/AdvancedTechNight/20130830-atn-07d3jsvisualization]]
-[[The Big List of D3.js Examples>http://christopheviau.com/d3list/]]
-[[D3.js勉強会(地図入門)を開催しました。 | GUNMA GIS GEEK>http://shimz.me/blog/d3-js/3113]]
-[[「D3.js」を使ったデータビジュアライゼーション | CodeZine>http://codezine.jp/article/detail/7459?utm_source=twitterfeed&utm_medium=twitter]]
-[[D3.js example | Pinterest>http://bit.ly/I0Tapl]]
-[[可視化ライブラリD3.jsの設計が素晴らしすぎる。 | 三度の飯とエレクトロン>http://blog.katty.in/5493]]
-[[iPhoneやiPadで気軽にD3.jsを試せる開発環境「Procoding」 | GUNMA GIS GEEK>http://shimz.me/blog/paper-js/3485]]
-[[D3.js入門 – 「データ・ドリブン」という特徴について | Developers.IO>http://dev.classmethod.jp/ria/html5/d3-js_data_driven/]]
-[[D3.jsの使い方とグラフを作成するサンプル | Tips Note>http://www.tam-tam.co.jp/tipsnote/javascript/post4913.html]]
-[[D3.jsでバーンダウンチャートを書く | Qiita>http://qiita.com/jca02266/items/3133c008c45dd144cf8f]]
-[[D3.js Step by Step | Zero Viscosity>http://zeroviscosity.com/category/d3-js-step-by-step]]
-[[D3.jsで簡単にベン図がかけるプラグイン「venn.js」 | #GUNMAGISGEEK>http://shimz.me/blog/d3-js/4350]]
-[[【D3.js】チャートをSVGやPNGでダウンロードできるようにするまでの長い道のり>http://shimz.me/blog/d3v4/5126]]



*リンク
-[[jlord/sheetsee.js>https://github.com/jlord/sheetsee.js]] ... Googleスプレッドシートをデータベースとして、テーブルやグラフを表示するJavaScriptライブラリ
-[[Titanium Mobileでグラフを描画 | もふもふ部@CAW>http://j-caw.co.jp/blog/?p=130]]
-[[Mozanit Works Engineering>http://mozanitworks.blogspot.jp/2012/08/web4_20.html]] ... JavaScriptチャート描画ライブラリ比較記事
-[[20 POPULAR JAVASCRIPT CHARTS AND GRAPHICS LIBRARY>http://www.freshdesignweb.com/popular-javascript-charts-graphics-library.html]]
-[[Histogram.js | Eoin Murray>http://eoinmurray.io/blog/2013/09/02/histogram-dot-js/?utm_content=buffer268fd&utm_source=buffer&utm_medium=twitter&utm_campaign=Buffer]]
-[[Interactive Charts in Appcelerator Titanium | Appcelerator Developer Blog->http://developer.appcelerator.com/blog/2013/09/interactive-charts-in-appcelerator-titanium.html]] ... 株価チャートに良さそう。
-[[SVG、PNG書き出しできるフリーのビジュアライゼーション・ツール | VISUAL THINKING>http://www.visualthinking.jp/archives/17010]] ... 分割した長方形の区分大きさで割合を表したりする図などが作れます。
-[[35 JavaScript Chart and Graph Libraries for Developers | Code Geekz>http://codegeekz.com/javascript-chart-and-graph-libraries/]]
-[[ネットワーク図やタイムライン等を描画できるユニークなビジュアライズライブラリ「vis.js」 | phpspot開発日誌>http://phpspot.org/blog/archives/2014/04/visjs.html]]
-[[30 Simple Tools For Data Visualization | Co.Design | business + design>http://www.fastcodesign.com/3029239/infographic-of-the-day/30-simple-tools-for-data-visualization?utm_content=buffer2e0fe&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer]]
-[[Web業務システムの定番。HTML5×Canvasを使ったグラフライブラリ | hifive開発者ブログ>http://blog.htmlhifive.com/2014/08/14/enterprise-system-with-html5-canvas-chart-library/]]
-[[[JS]イベントを時間軸で表すタイムスケジュールシートをシンプルなコードで作成できるスクリプト -Timesheet.js | コリス>http://coliss.com/articles/build-websites/operation/javascript/js-timesheet.html]]
-[[[JS]美しい曲線を使ったチャート・グラフが描けるHTML5 Canvasを使ったスクリプト -Flotr2 | コリス>http://coliss.com/articles/build-websites/operation/javascript/js-flotr2-for-html5-canvas-charts-and-graphs.html]]