Railsã§ã‚°ãƒ©ãƒ•è¡¨ç¤º - i2bsã®æ—¥è¨˜
仕事ã§å£²ä¸Šã’データã®é›†è¨ˆçµæžœã‚’グラフ表示ã™ã‚‹æ©Ÿä¼šãŒã‚ã£ãŸã®ã§lazy_high_chartsを使ã£ã¦ã¿ãŸã€‚ インストール Gemfile gem 'lazy_high_charts' app/assets/javascripts/application.js 以下を追記 //= require highcharts app/controllers/sample_controller.rb class SampleController < ApplicationController def show @end_at = Date.today @start_at = @end_at - 6 @categories = @start_at.upto(@end_at).to_a @data1 = Array.new(7){rand(10)} @data2 = Array.new(7){rand(1
データå¯è¦–化ã®ãŸã‚ã®ã‚°ãƒ©ãƒ•æç”»JavaScriptライブラリ20é¸ | ゆã£ãã‚Šã¨â€¦
SixRevisionsã§ã‚ªãƒ³ãƒ©ã‚¤ãƒ³ã§ã‚°ãƒ©ãƒ•ã‚’æç”»ã™ã‚‹å ´åˆã«æ´»èºã—ãã†ãªJavaScriptライブラリã®ç‰¹é›†ãŒã‚ã‚Šã¾ã—ãŸã®ã§ã€ç´¹ä»‹ã—ã¾ã™ã€‚個人サイトã§ã¯ã‚ã¾ã‚Šå½¹ã«ç«‹ãŸãªã„ã‹ã‚‚ã—ã‚Œã¾ã›ã‚“ãŒã€è¦³ã¦ã„ã‚‹ã ã‘ã§æ¥½ã—ããªã‚Šã¾ã™ã€‚元記事ã«æ•¬æ„を表ã—ã€ãªã‚‹ã¹ã趣旨ãŒç•°ãªã‚‰ãšã‹ã¤å¤‰ãªæ—¥æœ¬èªžã«ãªã‚‰ãªã„よã†å¿ƒãŒã‘ãŸã¤ã‚‚ã‚Šã§ã™ãŒã€è¨³ã«é–“é•ãˆãŒã‚ã‚Šã¾ã—ãŸã‚‰å®¹èµ¦é¡˜ã„ã¾ã™ã€‚ 2010å¹´1月17æ—¥ by Jacob Gube 退屈ãªæ•°å€¤ãƒ‡ãƒ¼ã‚¿ã‚’美麗ã‹ã¤ã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ãƒ†ã‚£ãƒ–ã«è§£ã‚Šæ˜“ãå¯è¦–化ã™ã‚‹ãŸã‚ã®JavaScriptライブラリã¯æ•°å¤šãã‚ã‚Šã¾ã™ã€‚通常ã¯HTMLテーブルã§è¡¨ç¾ã™ã‚‹ãƒ‡ãƒ¼ã‚¿ã‚’ã€JavaScriptを使ã£ã¦å¯è¦–化ã—美ã—ã見ã›ã‚‹äº‹ãŒã§ãã‚Œã°ã‚ãªãŸã®ãƒ‡ãƒ¼ã‚¿ã¯ã‚¢ã‚¯ã‚»ã‚·ãƒ“リティーã®å„ªã‚ŒãŸã‚‚ã®ã¨ãªã‚‹ã§ã—ょã†ã€‚ç§ã¯2008å¹´ã«ãƒ‡ãƒ¼ã‚¿ã®ã‚°ãƒ©ãƒ•åŒ–＆ãƒãƒ£ãƒ¼ãƒˆåŒ–ã®ãŸã‚ã®JavaScriptを書ã上ã’ã¾ã—ãŸãŒã€ä»Šå›žå†ã³å˜ãªã‚‹ãƒ‡ãƒ¼ã‚¿ã«ç”Ÿå‘½ã‚’
JavaScriptを使ã£ã¦SVGã§ã‚°ãƒ©ãƒ•ã‚’æã·Morris.js MOONGIFT
Morris.jsã¯jQueryを使ã£ãŸSVGæ画型ã®ã‚°ãƒ©ãƒ•ãƒ©ã‚¤ãƒ–ラリã§ã™ã€‚ Webブラウザ上ã§ã‚°ãƒ©ãƒ•ã‚’æç”»ã—よã†ã¨æ€ã£ãŸã‚‰å¾“æ¥ã¯ã‚µãƒ¼ãƒã‚µã‚¤ãƒ‰ã®ä»•çµ„ã¿ã‹Flashを使ã†ã®ãŒä¸€èˆ¬çš„ã§ã—ãŸã€‚ã—ã‹ã—今後ã¯JavaScriptãŒä¾¿åˆ©ã§ã™ã€‚Morris.jsã¯jQueryを使ã£ãŸã‚°ãƒ©ãƒ•ãƒ©ã‚¤ãƒ–ラリã§ã™ã€‚ 二ã¤ã®ãƒ‡ãƒ¼ã‚¿ãŒã‚る折れ線グラフ。 棒グラフ。 エリアグラフ。 パイãƒãƒ£ãƒ¼ãƒˆã€‚ 今ã®ã¨ã“ã‚対応ã—ã¦ã„ã‚‹ã®ã¯æŠ˜ã‚Œç·šã€æ£’ã€ã‚¨ãƒªã‚¢ã€ãƒ‰ãƒ¼ãƒŠãƒƒãƒ„ãƒãƒ£ãƒ¼ãƒˆã«ãªã£ã¦ã„ã¾ã™ã€‚ãã‚Œãžã‚Œè±Šå¯Œãªã‚ªãƒ—ションãŒç”¨æ„ã•ã‚Œã¦ã„ã¾ã™ã€‚ã¾ãŸã€ãƒžã‚¦ã‚¹ã‚ªãƒ¼ãƒãƒ¼ã§å€¤ã‚’フãƒãƒ¼ãƒ†ã‚£ãƒ³ã‚°è¡¨ç¤ºã—ã¦ãれるã®ã‚‚便利ã§ã™ã€‚データã¯JavaScriptã§ä¸Žãˆã¾ã™ãŒã€ã‚°ãƒ©ãƒ•ã¯SVGã§å‡ºåŠ›ã•ã‚Œã‚‹ä»•çµ„ã¿ã«ãªã£ã¦ã„ã¾ã™ã€‚ Morris.jsã¯jQuery/JavaScript製ã€BSD Licenseã®ã‚ªãƒ¼ãƒ—ンソース・ソフトウェアã§ã™ã€‚ MOONGIFTã¯ã“ã†è¦‹ã‚‹
1972年『æˆé•·ã®é™ç•Œã€ã®äºˆè¨€é€šã‚Šã«äººé¡žã¯2030å¹´ã®è‡¨ç•Œç‚¹ã«å‘ã‹ã£ã¦ã„ã‚‹
1972年『æˆé•·ã®é™ç•Œã€ã®äºˆè¨€é€šã‚Šã«äººé¡žã¯2030å¹´ã®è‡¨ç•Œç‚¹ã«å‘ã‹ã£ã¦ã„ã‚‹2012.04.10 12:0016,630 satomi ãšãƒ¼ã£ã¨æ°—ã«ãªã£ã¦ã¯ã„ãŸã®ã ã‘ã‚Œã©ã€ã‚„ã£ã±ã‚Šãã†ã§ã—ãŸã‹... ｢地çƒã®é™ã‚Šã‚る資æºã§äººé¡žãŒé™ã‚Šãªãæˆé•·ã—ã¦ã„ã£ãŸã‚‰ã€ã©ã†ãªã‚‹ï¼Ÿï½£â€•ãれをコンピュータ・モデルã§ã‚·ãƒŸãƒ¥ãƒ¼ãƒ¬ãƒ¼ãƒˆã—ã€å…¨ä¸–ç•Œã«è¡æ’ƒã‚’与ãˆãŸå•é¡Œã®æ›¸ã€Žæˆé•·ã®é™ç•Œï¼ˆLimits to Growth）ã€ãŒå‡ºãŸã®ã¯1972å¹´ã®ã“ã¨ã§ã™ã€‚ ã‚ã‚Œã‹ã‚‰40年。驚ãã¹ãã“ã¨ã«ã€ã»ã¼ã“ã®äºˆè¨€é€šã‚Šã®ã“ã¨ãŒç¾å®Ÿã«èµ·ã“ã£ã¦ã„ã¾ã™ã€‚ 『æˆé•·ã®é™ç•Œã€ã¯å›½éš›ã‚·ãƒ³ã‚¯ã‚¿ãƒ³ã‚¯ï½¢ãƒãƒ¼ãƒžãƒ»ã‚¯ãƒ©ãƒ–ï½£ã®å§”嘱ã§ã€ãƒžã‚µãƒãƒ¥ãƒ¼ã‚»ãƒƒãƒ„工科大å¦ï¼ˆMIT）ã®ãƒ‰ãƒãƒ©ãƒ»H.・メドウズ（Donella H. Meadows）ã€ãƒ‡ãƒ‹ã‚¹ãƒ»L.・メドウズ（Dennis L. Meadows）ã€ãƒ¨ãƒ«ã‚²ãƒ³ãƒ»ãƒ©ãƒ³ãƒ€ãƒ¼ã‚¹ï¼ˆJørgen Randers）ã€ã‚¦ã‚£ãƒªã‚¢ãƒ ・W.・ベ
tableデータをグラフã«ç½®ãæ›ãˆã¦ãれるjQueryプラグイン「Chartifyã€:phpspot開発日誌
Chartify ? A Visualization Plugin for jQuery tableデータをグラフã«ç½®ãæ›ãˆã¦ãれるjQueryプラグイン「Chartify〠<table>ã®ãƒ‡ãƒ¼ã‚¿ã‚’最å°ï¼‘è¡Œã§Googleã®Chart APIを使ã£ã¦ã‚°ãƒ©ãƒ•ç”»åƒã«å¤‰æ›ã—ã¦ãれるã¿ãŸã„ã§ã™ã€‚ マークアップ上ã§ã¯æ¬¡ã®ã‚ˆã†ãªãƒ†ãƒ¼ãƒ–ルãŒã‚ã£ãŸã¨ã—ã¾ã™ã€‚ プラグインをèªã¿è¾¼ã‚“㧠.chartify ã—ã¾ã™ã€‚色ãªã‚“ã‹ã‚‚指定 ã™ã‚‹ã¨æ¬¡ã®ã‚ˆã†ãªã‚°ãƒ©ãƒ•ã«å¤‰æ›ã•ã‚Œã¦è¡¨ç¤ºã•ã‚Œã¾ã™ã€‚ HTML上ã«ãƒ‡ãƒ¼ã‚¿ãŒã‹ã‘ã¦ãれをグラフã«å¤‰æ›ã—ã¦ãれるã®ã¯ãªã‹ãªã‹ã„ã„ã§ã™ã。 関連エントリ å°ã•ãã§å¯æ„›ã„グラフãŒæã‘ã‚‹jQueryプラグイン「Piety〠ドリルダウンãªã‚°ãƒ©ãƒ•ã‚’作æˆã§ãã‚‹jQueryプラグイン「DDChart〠地下鉄ã®è·¯ç·šå›³ã‚’æã‘ã‚‹jQueryプラグイン「Subway Map Visualizationã€
Highcharts - Interactive Charting Library for Developers
Our core library. Includes all standard chart types and more.
å°ã•ãã§å¯æ„›ã„グラフãŒæã‘ã‚‹jQueryプラグイン「Pietyã€:phpspot開発日誌
Peity ? progressive pie charts å°ã•ãã§å¯æ„›ã„グラフãŒæã‘ã‚‹jQueryプラグイン「Piety〠アイコン感覚ã§æ°—軽ã«è¨ç½®ã§ãã¦ä½¿ã„方次第ã§ã¯æƒ…å ±ã‚’ã‚ã‹ã‚Šæ˜“ã示ã™ã“ã¨ãŒã§ããã†ã§ã™ クライアントサイドã§æç”»ã™ã‚‹ã®ã§ã‚µãƒ¼ãƒã«è² æ‹…ãŒãªã„点もã„ã„ã§ã™ã データã®å®šç¾©ã¯spanã§å®šç¾©ã—ã¦ã€ １行ã§æ画。 出力çµæžœã€‚ ã‚€ã¡ã‚ƒãã¡ã‚ƒä½¿ã„ã‚„ã™ã„ã˜ã‚ƒãªã„ã§ã™ã‹ã€‚ 関連エントリ ミニグラフ作æˆãƒ©ã‚¤ãƒ–ラリSparkline
Web_Tech » Blog Archive » Google Chart API レーダーãƒãƒ£ãƒ¼ãƒˆ
0.AJAX (118) 0.0.Flame Work (72) 0.0.2.Prototype (1) 0.0.3.CodeThat (1) 0.0.4.Spry (1) 0.0.5.Ext (1) 0.0.6.HTF Generator (2) 0.1.menu (6) 0.2.Tabs (7) 0.3.Layout (3) 0.9.Widget (1) 1.jQuery (114) 1.0.FlexiGrid (12) 1.0.1.DOC (1) 1.0.2.Demo (4) 1.0.2.2.JSON (3) 1.0.3.Sample (6) 1.0.9.Memo (1) 1.1.jqgrid (32) 1.1.0.0.V3.8 (2) 1.1.0.V3.6 (4) 1.1.1.V3.5.x (12) 1.1.1.1.DOC (2) 1.1.1.2.Demo (6) 1.1.1.2.
1
ãŠçŸ¥ã‚‰ã›
障害
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
Chart.js
{{#tags}}- {{label}}
{{/tags}}