Our core library. Includes all standard chart types and more.
Highcharts - Interactive Charting Library for Developers
Our core library. Includes all standard chart types and more.
jQueryã§è¦‹æ „ãˆã®ã„ã„グラフãŒæã‘る「jqPlot〠(1/3)
証券会社ã®ã‚µã‚¤ãƒˆã®æ ªå¼ç›¸å ´ã‚°ãƒ©ãƒ•ã€ã‚·ãƒ§ãƒƒãƒ”ングサイトã®ä¾¡æ ¼å¤‰å‹•ã‚°ãƒ©ãƒ•ãªã©ã€Webサイト上ã«å¤‰å‹•ã™ã‚‹ãƒ‡ãƒ¼ã‚¿ã‚’ã‚‚ã¨ã«ã€å‹•çš„ã«ã‚°ãƒ©ãƒ•ã‚’表示ã—ãŸã„ã“ã¨ãŒã‚ã‚Šã¾ã™ã€‚従æ¥ã¯ã€Flashを使ã†ã“ã¨ãŒå¤šã‹ã£ãŸã§ã™ãŒã€æœ€è¿‘ã¯Ajax/JavaScript人気もã‚ã£ã¦ã€ã€ŒJavaScriptã§ã‚°ãƒ©ãƒ•ã‚‚作æˆã—ãŸã„ã€ã¨ã„ã†ãƒ‹ãƒ¼ã‚ºã‚‚å¼·ããªã£ã¦ã„ã¾ã™ã€‚ 以å‰ã€æœ¬èªŒã§ã¯ã€HTML5ã®Canvasを使ã£ãŸå›³å½¢ã®ã‚µãƒ³ãƒ—ルã¨ã—ã¦ã€ã‚°ãƒ©ãƒ•ã®æ画方法を紹介ã—ã¾ã—ãŸãŒï¼ˆé–¢é€£è¨˜äº‹ï¼‰ã€ä»Šå›žã¯ã‚°ãƒ©ãƒ•æç”»ã«ç‰¹åŒ–ã—ãŸå°‚用ライブラリ「jqPlotã€ã‚’使ã£ã¦ã€ã‚‚ã£ã¨ç°¡å˜ã«è¦‹æ „ãˆã®ã„ã„グラフを作æˆã™ã‚‹æ‰‹é †ã‚’紹介ã—ã¾ã™ã€‚ グラフã«ç‰¹åŒ–ã—ãŸjQueryプラグイン「jqPlot〠「jqPlotã€ã¯ã‚¯ãƒªã‚¹ãƒ»ãƒ¬ã‚ªãƒãƒæ°ãŒé–‹ç™ºã—ã¦ã„ã‚‹JavaScriptライブラリã§ã€jQueryã®ãƒ—ラグインã¨ã—ã¦å‹•ä½œã—ã¾ã™ã€‚HTML5ã®Canvasを応用ã—ã¦ã‚°ãƒ©ãƒ•ã‚’æã仕
データを分ã‹ã‚Šã‚„ã™ãスタイリッシュã«å¯è¦–化ã§ãã‚‹Javascriptライブラリ「D3.jsã€
ã©ã‚“ãªã«æƒ…å ±ã‚’ã¾ã¨ã‚ã¦ã‚‚ã€ãれをå¯è¦–化ã—ã¦è¦‹ã¦ã„る人ã«ã†ã¾ãä¼ãˆã‚‹ã®ã¯è‡³é›£ã®æŠ€ã§ã™ã€‚ãã‚“ãªæ™‚ã«ãƒ‡ãƒ¼ã‚¿ã‚’スタイリッシュã‹ã¤è¦‹ã‚„ã™ã„グラフã«ã—ã¦ãれるã®ãŒã€æ§˜ã€…ãªãƒ‡ã‚¶ã‚¤ãƒ³ã®JavascriptãŒãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰å¯èƒ½ãªãƒ©ã‚¤ãƒ–ラリ「D3.jsã€ã§ã™ã€‚ D3.js - Data-Driven Documents http://d3js.org/ D3.jsを使ã£ã¦ä½œã£ãŸã‚°ãƒ©ãƒ•ã®äº‹ä¾‹ã‚’å…¬å¼ã‚®ãƒ£ãƒ©ãƒªãƒ¼ã‹ã‚‰è¦‹ã‚‹ã“ã¨ãŒå¯èƒ½ã§ã€ã“れらã®ã‚°ãƒ©ãƒ•ã«ã‚‚ã¨ã«ãªã‚‹ç´ æ(スクリプトã®ã‚½ãƒ¼ã‚¹)ãŒGitHubã§å…¥æ‰‹å¯èƒ½ã§ã™ã€‚ Gallery · mbostock/d3 Wiki · GitHub デザインã®ä¸€ä¾‹ã¯ä»¥ä¸‹ã‹ã‚‰ã€‚ â—†:Bubble Chart 作æˆä¾‹ã«ã‚ˆã£ã¦ã¯ã€ãƒšãƒ¼ã‚¸ã«ç›´æŽ¥ã‚³ãƒ¼ãƒ‰ãŒè¨˜è¼‰ã•ã‚Œã¦ã„ã‚‹ã‚‚ã®ã‚‚ã‚ã‚Šã¾ã™ã€‚ â—†:Four Ways to Slice Obama’s 2013 Budget Proposal - In
グラフæããªã‚‰Morris.jsãŒãŠæ‰‹è»½ã§è‰¯ã„ã‹ã‚‚ - (ﾟ∀ﾟ)o彡 sasata299's blog
2012å¹´11月16æ—¥13:55 JavaScript Ruby グラフæããªã‚‰Morris.jsãŒãŠæ‰‹è»½ã§è‰¯ã„ã‹ã‚‚ ã“ã‚“ã«ã¡ã‚。寒ããªã£ã¦ãã¾ã—ãŸãŒã¿ãªã•ã¾ãŠå…ƒæ°—ã§ã™ã‹ï¼Ÿ ã•ã¦ã€å…ˆæ—¥ã¡ã‚‡ã£ã¨ã—ãŸã‚°ãƒ©ãƒ•ã‚’æç”»ã—ãŸã‹ã£ãŸã‚“ã§ã™ã‚ˆã€‚ãã‚Œã§ãªã«ã‹ä½¿ã„ã‚„ã™ã„ライブラリ無ã„ã‹ãªãƒ¼ã¨æ€ã£ã¦ã„ãŸã‚‰ railscast (revisedãªã®ã§æœ‰æ–™ã§ã™) 㧠Morris.js ã£ã¦jQueryプラグインãŒç´¹ä»‹ã•ã‚Œã¦ã¦è‰¯ã•ã’ã ã£ãŸã®ã§ä½¿ã£ã¦ã¿ã¾ã—ãŸã€‚google analytics ã¿ãŸã„ãªãƒ„ールãƒãƒƒãƒ—も出ã—ã¦ãã‚Œã¾ã™ã€‚ 使ã„æ–¹ã¯ã¨ã£ã¦ã‚‚ç°¡å˜ã§ã™ã€‚ ã¾ãšã€jQuery (>=1.7) 㨠Raphael (>=2.0) ãŒå¿…è¦ã§ã™ã€‚ã‚ã¨ã¯ Morris.js ãŒã‚ã‚Œã°å‹•ä½œã—ã¾ã™ã€‚ ã“れらを app/assets/javascripts/application.js ã«è¨å®šã—ã¦ãã ã•ã„。ã“ã®è¨˜äº‹åŸ·ç†æ™‚点ã§ã®
色んãªãƒ‡ãƒ¼ã‚¿ã‚’便利ã«è¡¨ç¤ºã§ãる「Recline.jsã€:phpspot開発日誌
Home - Recline Data Explorer and Library 色んãªãƒ‡ãƒ¼ã‚¿ã‚’便利ã«è¡¨ç¤ºã§ãる「Recline.js〠データをExcel表風ã«ã—ãŸã‚Šã€ã‚°ãƒ©ãƒ•ã‚’æç”»ã—ãŸã‚Šã€ã‚¿ã‚¤ãƒ ラインã«ã—ã¦ã¿ãŸã‚Šã€ãƒ‡ãƒ¼ã‚¿ã‚’地図上ã«ãƒ—ãƒãƒƒãƒˆã—ã¦ã¿ãŸã‚Šã¨ã„ã£ãŸã“ã¨ãŒå‡ºæ¥ã‚‹ãƒ©ã‚¤ãƒ–ラリã ãã†ã€‚ テーブルビュー。ソートãªã‚“ã‹ã‚‚ã§ãã¦ã“ã‚Œã ã‘ã§ã‚‚リッãƒã§ã™ ã“ã®ãƒ‡ãƒ¼ã‚¿ã‹ã‚‰ã‚°ãƒ©ãƒ•ã«ã—ãŸã„モノをé¸ã‚“ã§ã‚°ãƒ©ãƒ•åŒ–ã‚‚å¯èƒ½ データを元ã«ã‚¿ã‚¤ãƒ ライン表示もã§ãã‚‹ã¿ãŸã„ データを元ã«ã€åœ°å›³ä¸Šã«ãƒ—ãƒãƒƒãƒˆã™ã‚‹ãªã‚“ã¦ã„ã†ã“ã¨ã‚‚ã§ãã¾ã™ ãªã‹ãªã‹é¢ç™½ã„ã§ã™ã 関連エントリ 様々ãªã‚°ãƒ©ãƒ•ã‚’æç”»ã§ãã‚‹JavaScriptライブラリ「NVD3.js〠HTML5ã§ç¶ºéº—ã§ã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ãƒ†ã‚£ãƒ–ãªã‚°ãƒ©ãƒ•ãŒæã‘るライブラリ「Flotr2〠美麗ãªã‚°ãƒ©ãƒ•ã‚’SVGã§æç”»ã§ãã‚‹JSライブラリ「dc.jsã€
リアルタイムãªãƒ‡ãƒ¼ã‚¿ãƒ“ジュアライズ「grapheneã€:phpspot開発日誌
graphene D3.jsã¨ã„ã†JavaScript製ビジュアライズライブラリã¨ã€JavaScriptã®MVCライブラリã§ã‚ã‚‹Backbone.jsをベースã¨ã—ã¦ä½œã‚‰ã‚Œã¦ã„ã¦githubã§ã‚½ãƒ¼ã‚¹ãŒå…¬é–‹ã•ã‚Œã¦ã„ã¾ã™ã€‚ Chromeãªã©ã®ãƒ–ラウザã§è¦‹ã¦ã¿ã‚‹ã¨ãƒªã‚¢ãƒ«ã‚¿ã‚¤ãƒ ã«ã‚°ãƒ©ãƒ•ãŒæµã‚Œã¦ã„ã‚‹ã®ãŒåˆ†ã‹ã‚Šã¾ã™ã€‚ デモを見るã ã‘ã§ã‚‚楽ã—ã„ã‚“ã§ã™ãŒã€ã‚µã‚¤ãƒˆã®ç®¡ç†ãƒ„ールç‰è‰²ã€…ã¨å¿œç”¨ãŒåŠ¹ããã†ã ãªã¨ã„ã†ã¨ã“ã‚ã§ã™ã 今後もã“ã†ã—ã¦WEBサイトã¯ã©ã‚“ã©ã‚“リアルタイムã«å‹•ã„ã¦ã„ã物ã«ãªã£ã¦ã„ãã‚“ã§ã—ょã†ã 関連エントリ 見ãŸç›®ãŒã‚¯ãƒ¼ãƒ«ãªã‚°ãƒ©ãƒ•æ画用jQueryプラグイン「Morris.js〠å°ã•ãã§å¯æ„›ã„グラフãŒæã‘ã‚‹jQueryプラグイン「Piety〠tableデータをグラフã«ç½®ãæ›ãˆã¦ãれるjQueryプラグイン「Chartifyã€
[JS]ã¡ã‚‡ã£ã¨ã‹ã£ã“ã„ã„円グラフをウェブページã«ç°¡å˜ã«è¨ç½®ã§ãるスクリプト -EASY PIE CHART
シンプルãªHTMLã§ã€ã•ã¾ã–ã¾ãªãƒ‡ã‚¶ã‚¤ãƒ³ã®å††ã‚°ãƒ©ãƒ•ãŒç°¡å˜ã«ä½œæˆã§ãã‚‹jQueryã®ãƒ—ラグインを紹介ã—ã¾ã™ã€‚ EASY PIE CHART [ad#ad-2] EASY PIE CHARTã®ä½¿ã„æ–¹ 実装ã¯ã€3ステップã§ã™ã€‚ Step 1: 外部ファイル 「jquery.jsã€ã¨å½“スクリプト・スタイルシートを外部ファイルã¨ã—ã¦è¨˜è¿°ã—ã¾ã™ã€‚ 外部ファイルã¯head内ã«è¨˜è¿°ã—ã¦ãã ã•ã„。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="/path/to/jquery.easy-pie-chart.js"></script> <link rel="styl
Javascriptã§æ‰±ãˆã‚‹ã‚«ãƒƒã‚³ã‚¤ã‚¤ã‚°ãƒ©ãƒ•ã®ã¾ã¨ã‚ - Qiita
çµè«–:Highchart ccchart(canvasChart)ã¨æ‚©ã¿ã¾ã—ãŸãŒã€Highchartã‚’é¸ã‚“ã ç†ç”±ã¯ã€ä¸‹è¨˜ã®é€šã‚Šã§ã™ã€‚ 1.円グラフや棒グラフを組ã¿åˆã‚ã›ãŸè¤‡åˆçš„ãªã‚°ãƒ©ãƒ•ã®ã‚µãƒ³ãƒ—ルを載ã›ã¦ã„ã‚‹ 2.複åˆã‚°ãƒ©ãƒ•ã®ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ãŒã‹ã£ã“ã„ㄠ商用ライセンスãªã®ã§ã€ç„¡æ–™ã«ã“ã ã‚ã‚‹æ–¹ã¯ã€ccchart(canvasChart)ãŒãŠã™ã™ã‚ã§ã™ã€‚ Highchart 表ç¾åŠ›ã€å®Œæˆåº¦ã®ç‚¹ã§ã„ã¡ã°ã‚“ã ã¨æ€ã„ã¾ã™ã€‚商用ãªã®ã§ãŠé‡‘ã•ãˆã‚ã‚Œã°ã“ã‚ŒãŒã‚¤ãƒã‚ªã‚·ã€‚ ccchart(canvasChart) ç§ã®ã‚¤ãƒã‚ªã‚·ã¯ canvasChart ã§ã™ ライセンス㯠PUBLIC DOMAIN! raphael.js qiitaã®ãƒ—ãƒãƒ•ã‚£ãƒ¼ãƒ«ã®å††ã‚°ãƒ©ãƒ•ã§ä½¿ã‚ã‚Œã¦ã„ã‚‹jQueryプラグイン 美ã—ã‚ãªã‚°ãƒ©ãƒ•ã‚’作æˆã™ã‚‹ã“ã¨ãŒã§ãる。 raphael.jsã®ãƒ—ラグインã®elycharts.js http://el
様々ãªã‚°ãƒ©ãƒ•ã‚’æç”»ã§ãã‚‹JavaScriptライブラリ「NVD3.jsã€:phpspot開発日誌
NVD3.js :: re-usable charts for d3.js 様々ãªã‚°ãƒ©ãƒ•ã‚’æç”»ã§ãã‚‹JavaScriptライブラリ「NVD3.js〠d3.jsã¨ã„ã†ä»¥å‰ç´¹ä»‹ã—ãŸãƒ©ã‚¤ãƒ–ラリをベースã«åˆ©ç”¨ã—ã¦ã„ã‚‹ã¿ãŸã„。 グラフæç”»ã®ãƒ©ã‚¤ãƒ–ラリã¯è‰²ã€…ã‚ã‚Šã¾ã™ãŒã€ã“ã¡ã‚‰ã®ãƒ©ã‚¤ãƒ–ラリã§æç”»ã™ã‚‹ã‚°ãƒ©ãƒ•ã®ãƒ‡ã‚¶ã‚¤ãƒ³ã‚‚ãªã‹ãªã‹ã„ã„æ„Ÿã˜ã§ã™ã マウスã¨ã®ã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ãƒ†ã‚£ãƒ–ãªã‚°ãƒ©ãƒ•å®Ÿè£…ãŒå¯èƒ½ã§æ‹¡å¼µã‚‚容易ã¿ãŸã„ サンプルページã«ã¯ã‚½ãƒ¼ã‚¹ãŒã¤ã„ã¦ã„ã‚‹ã®ã§å‚考ã«çµ„ã‚ã°æŠµæŠ—ãªãグラフãŒæã‘ãã†ã§ã™ 関連エントリ 見ãŸç›®ãŒã‚¯ãƒ¼ãƒ«ãªã‚°ãƒ©ãƒ•æ画用jQueryプラグイン「Morris.js〠HTML5ã§ç¶ºéº—ã§ã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ãƒ†ã‚£ãƒ–ãªã‚°ãƒ©ãƒ•ãŒæã‘るライブラリ「Flotr2〠様々ãªæ™‚系列グラフをæç”»ã§ãã‚‹JavaScriptライブラリ「Rickshaw〠クールãªãƒ‰ã‚¢ãƒŽãƒ–風ã®ï¼…グラフをæç”»ã§ãã‚‹jQuery Knob
グラフをæç”»ã—ã¦ãれるjQueryプラグインã¯ã€å¤šåˆ†â€jQuery Visualizeâ€ãŒãƒ™ã‚¹ãƒˆï¼ - Shinichi Nishikawa's
グラフをæç”»ã—ã¦ãれるjQueryプラグインã¯ã€å¤šåˆ†â€jQuery Visualizeâ€ãŒãƒ™ã‚¹ãƒˆï¼ 2011 10/11 グラフをæç”»ã—ã¦ãれるjQueryプラグインを紹介ã—ã¾ã™ã€‚ グラフを動的ã«ä½œã£ã¦ãれるもã®ã¨ã—ã¦ã¯ã€ä»–ã®jQueryプラグインやGoogle Chartã¨ã„ã†ã‚µãƒ¼ãƒ“スãªã©ãŒã‚ã‚Šã¾ã™ã€‚ ãŒã€ä»Šå›žã®â€jQuery Visualizeâ€ã¯ã€ä¸ã§ã‚‚一番使ã„ã‚„ã™ãã†ã§ã—ãŸã®ã§ã€ã”紹介ã—ã¾ã™ã€‚ ä»–ã®ãƒ—ラグインã«ã¤ã„ã¦ã¯ã€ã€jQuery】IEã§ã‚‚使ãˆã‚‹ã‚°ãƒ©ãƒ•æ画ツール | 岡山ã®Webプãƒã‚°ãƒ©ãƒžãƒ¼ãŒã¤ã¶ã‚„ãブãƒã‚° | 神æŒ.blogã§ã¾ã¨ã‚ã¦ç´¹ä»‹ã•ã‚Œã¦ã„ã¾ã™ã€‚ 作れるグラフã®ç¨®é¡ž グラフã¯ä»¥ä¸‹ã®ã‚‚ã®ã‚’使ã†ã“ã¨ãŒã§ãã¾ã™ã€‚ 棒グラフ 線グラフ 線グラフã§ç·šã®ä¸‹ã‚’è–„ã塗れるや㤠円グラフ デザインã¯äºŒç¨®é¡ž 冒é 写真ã®é»’ã£ã½ã„Coolãªã®ã¨åˆ¥ã«ã€ç™½ã£ã½ã„ã®ã‚‚用æ„ã•ã‚Œã¦ã„ã¾ã™ã€‚ ã¾ãŸã€èƒŒæ™¯ç”»
見ãŸç›®ãŒã‚¯ãƒ¼ãƒ«ãªã‚°ãƒ©ãƒ•æ画用jQueryプラグイン「Morris.jsã€:phpspot開発日誌
Morris.js 見ãŸç›®ãŒã‚¯ãƒ¼ãƒ«ãªã‚°ãƒ©ãƒ•æ画用jQueryプラグイン「Morris.jsã€ã€‚ マウスä½ç½®ã«å¿œã˜ã¦æƒ…å ±ã‚’å¤‰ãˆã‚‹ãªã©ã€GoogleAnalytics風ã®ã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ãƒ†ã‚£ãƒ–ãªã‚°ãƒ©ãƒ•ãŒæç”»ã§ãã¾ã™ã€‚ 実際ã«ã¯æ¬¡ã®ã‚ˆã†ãªã‚°ãƒ©ãƒ•ãŒæç”»ã§ãã¾ã™ã€‚IE6+ã§ã‚‚å‹•ãã¨ã„ã†ã“ã¨ã§ã€ãã“ら辺ã®å¿ƒé…ã‚‚ç„¡ã—ã§ã™ サンプルコードも載ã£ã¦ã„ãŸã‚Šã™ã‚‹ã®ã§ç°¡å˜ã«ä½¿ãˆãã†ã§ã™ グラフã®ç¨®é¡žã¯ç·šã‚°ãƒ©ãƒ•ã®ã¿ã§ã™ãŒã€å¤šæ©Ÿèƒ½ã™ãŽã¦é¦¬é¹¿ã§ã‹ã„よりもシンプルãªã®ãŒé€†ã«ã„ã„ã‹ã‚‚ã—ã‚Œã¾ã›ã‚“ã。 関連エントリ HTML5ã§ç¶ºéº—ã§ã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ãƒ†ã‚£ãƒ–ãªã‚°ãƒ©ãƒ•ãŒæã‘るライブラリ「Flotr2〠様々ãªæ™‚系列グラフをæç”»ã§ãã‚‹JavaScriptライブラリ「Rickshaw〠様々ãªã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ãƒ†ã‚£ãƒ–è¦ç´ ã®ã‚るグラフãŒæç”»ã§ãã‚‹JSライブラリ「Elychartsã€
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
http://www.designwalker.com/2010/07/chart-tool.html
{{#tags}}- {{label}}
{{/tags}}