整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
個企業(yè)在做重要決定時都傾向于做數(shù)據(jù)分析，實(shí)際上他們很多時候都是沉淪在數(shù)據(jù)里頭，不知道如何跳出其中。企業(yè)一直尋求更好的方式來可視化數(shù)據(jù)、進(jìn)行更好的互動、使圖表多角度化。畢竟，只有從數(shù)據(jù)中得出的見解才是有用的。
JavaScript 圖表庫出現(xiàn)了，作為美觀且容易理解的交互式的可視化圖表最有力的工具，它更容易提取和傳達(dá)關(guān)鍵的模式和見解，而這一點(diǎn)在靜態(tài)圖表中往往不明顯。
為了使事情更加簡單，我努力挖掘了很多選項(xiàng)，找到了最好的JavaScript 圖表庫。來，讓我們開始吧。
1、chartist
Chartist的高效和人性化設(shè)計甚至吸引了離開 Excel 就會感覺不舒服的人?？身憫?yīng)（使用媒體查詢）和獨(dú)立 DPI 意味著這些圖表可以為你提供一個良好的解決方案，如果你在考慮將你的圖表應(yīng)用于包括手機(jī)，平板和桌面電腦的多終端設(shè)備，基于SVG的設(shè)計讓它在未來更具兼容性。
Chartist 的與眾不同在于它是社區(qū)的成果，這使得它沒有其他圖表庫的局限性。由于過于關(guān)注瑣碎的變動和功能完整，導(dǎo)致你在使用其他類庫時很焦心。
協(xié)議: 開源，所有用戶皆可免費(fèi)使用。
2、FusionCharts
FusionCharts帶來了最全面的庫，超過90種圖表和900種圖——所有均就緒備用。它們自詡為行業(yè)內(nèi)最好看的圖表，它提供了一個功能強(qiáng)大的體驗(yàn)儀表板，通過它可以鳥瞰其整個業(yè)務(wù)功能。
FusionCharts 兼容從 PC 和 Mac 電腦，iPhone 和 Android 平板電腦等多種設(shè)備；他們做了許多額外的努力來確保跨瀏覽器的兼容性，甚至包括 IE6！
他們還涵蓋了所有基礎(chǔ)格式 —— JSON 和 XML 數(shù)據(jù)格式都能夠接受；繪制可以通過 HTML5、SVG 和 VML，圖表可以導(dǎo)出為 PNG、JPG 或 PDF 格式。FusionCharts 的擴(kuò)展可以很容易地與你所選擇的任何技術(shù)集成，包括 jQuery，AngularJS，PHP 和 Rails。
總的來說，F(xiàn)usionCharts 擁有你創(chuàng)建漂亮圖表和做嚴(yán)格業(yè)務(wù)分析所需的任何特征和格式。而且最好的部分是非商業(yè)用途時你可以免費(fèi)下載并使用，沒有任何限制。
源碼許可證：非商業(yè)免費(fèi)，商業(yè)用途收費(fèi)。
3、DyGraphs
Dygraphs 是一個開源的 JavaScript 圖表庫，最適用于極端大數(shù)據(jù)集。它是開箱式互動，通過縮放甚至可以支持手機(jī)。
它既兼容主流瀏覽器，也向后兼容 IE8。選項(xiàng)和自定義回調(diào)功能使它具有極高的可配置性。
協(xié)議: 開源，面向所有用戶免費(fèi)。
4、Chartjs
Chart.js適用于小項(xiàng)目，扁平化，干凈，優(yōu)雅，快速。它是一個微型的開源庫，最小化壓縮后只有11kb大小。它包括六個核心圖表類型（線圖，柱圖，雷達(dá)圖，極地圖，餅圖和環(huán)形圖），每個都是獨(dú)立的模塊，所以你甚至可以只加載項(xiàng)目需要的模塊以最大化縮小代碼占用空間。
它使用HTML5 canvas元素渲染圖表，并且使用polyfills方式兼容在IE7/8上運(yùn)行。所有圖表都是可響應(yīng)的。
協(xié)議: 開源，面向所有用戶免費(fèi)。
5、GoogleCharts
Google Charts 提供大量不同種類的圖表，它最大程度上滿足了數(shù)據(jù)可視化的需要。圖表基于 HTML5/SVG，為了兼容老版本的 IE 還支持 VML。所有的圖表都是可交互可縮放的。你可以去看看他們的圖表庫。最棒的是他們的圖表絕對免費(fèi)。
協(xié)議：免費(fèi)，但是不開源，在你的服務(wù)器上使用他們的 JS 文件是 Google’s協(xié)議不允許 的。因此如果你是一家企業(yè)并且有很多敏感數(shù)據(jù)，Google Charts 可能不是一個最佳的選項(xiàng)。
6、HighCharts
Highcharts 是又一個流行的交互圖表庫，與其他庫一樣，它是基于 HTML5/SVG/VML，所以不需要擴(kuò)展插件。提供的圖表類型很廣泛，像曲線圖，柱狀圖，條形圖，地圖，儀表盤等。
它還提供個人用戶免費(fèi)可在線生成交互式圖表的接口 Highcharts cloud，商業(yè)使用需要購買授權(quán)。
協(xié)議: 非商業(yè)使用免費(fèi)，商業(yè)使用付費(fèi)。
7、Flot
Flot 是最古老的圖表庫之一，用法簡單并聚焦交互特性。它是特定的 jQuery 庫，這意味著使用它需要熟悉基礎(chǔ)的 jQuery。但是從另一方面來說，這意味著你可以全面控制呈現(xiàn)，動作和用戶交互。
Flot 兼容大多數(shù)瀏覽器，向下兼容到 IE6。Flot 的插件庫提供許多類型的圖，所有貢獻(xiàn)都是社區(qū)提供的。你可以看看這些由 Flot 制作的例子。
協(xié)議: 開源，面向所有用戶免費(fèi)。
8、D3.js
D3通常是提到數(shù)據(jù)可視化時出現(xiàn)的第一個名字。它是一個非常強(qiáng)大的開源項(xiàng)目，可以通過動態(tài)更新DOM創(chuàng)造出驚人的視覺效果和圖形。另外，它使用HTML，CSS和SVG。
它符合W3C標(biāo)準(zhǔn)，并且是跨瀏覽器兼容的。開發(fā)者們往往喜歡它所帶來的許多特征，比如“進(jìn)入和退出”以及強(qiáng)大的過渡。你可以到這里找到一些 D3 的示例。
需要說明的是，它沒有預(yù)建圖表，即時學(xué)習(xí)基本的圖表也有一條非常陡峭的學(xué)習(xí)曲線。但開發(fā)者們極富創(chuàng)新性，開發(fā)出了不少基于D3的包裝庫。后面我們將涉及到其中的一些佼佼者。
源碼許可證: 開源。免費(fèi)使用。
9、n3-charts
如果你正在尋找一種在 AngularJS 應(yīng)用下創(chuàng)建簡單互動線圖的方法，這將是你所需要的。N3 基于D3.js，針對少量受眾–基于 AngularJS 繪制通用線圖。如果你需要更多的圖表類型，它可能不適合你。你可以在這里看到一些N3線圖的實(shí)例。
源碼許可證：開源。對所有人免費(fèi)。
10、NVD3
NVD3是一個旨在建立可復(fù)用的圖表和組件的 d3.js 項(xiàng)目——它提供了同樣強(qiáng)大的功能，但更容易使用。它可以讓你處理復(fù)雜的數(shù)據(jù)集來創(chuàng)建更高級的可視化。
源碼許可證：開源。對所有人免費(fèi)。
11、Ember Charts
Addepar 的開發(fā)者正為提升 Ember 以及其附屬庫 Ember Charts、Ember Tables 和 Ember Widgets 的體驗(yàn)的工作而穩(wěn)步推進(jìn)著。Ember Charts 基于 D3.js 和 Ember.js 框架提供了一個易于使用的，可擴(kuò)展的圖表套件。
其強(qiáng)壯且優(yōu)雅——針對壞數(shù)據(jù)的錯誤處理能確保有壞數(shù)據(jù)時應(yīng)用程序不會崩潰。你甚至可以通過擴(kuò)展它來創(chuàng)建自己的圖表類型。
源碼許可證：開源。對所有人免費(fèi)。
12、jQuery Sparklines
我們一直在談?wù)撃切┠芨愣ㄒ磺械闹亓啃偷膸臁５袝r你需要的是針對簡單的任務(wù)簡單些的東西。jQuery Sparklines 插件提供了一個合適的解決方案。它能夠被用來生成迷你型的小內(nèi)嵌圖表，剛好足夠去表現(xiàn)趨勢——只需要最小量的編碼。適用于大多數(shù)現(xiàn)代瀏覽器包括更老的IE6。
源碼許可證：開源。對所有人免費(fèi)。
13、Sigma.js
當(dāng)我們在特定的使用場景下時，我們必須談?wù)?Sigma。Sigma 是一個強(qiáng)大的 JavaScript 庫，其關(guān)注于呈現(xiàn)交互圖形和 Web 網(wǎng)絡(luò)。
Sigma 的庫和插件包有大量的互動設(shè)置。一旦你使用了 Sigma，你將再也不會覺得線圖無聊?？匆幌逻@個sigma.js側(cè)翻演示你就會明白我的意思。
源碼許可證：開源。對所有人免費(fèi)。
14、Morris.js
是的，正如 Morris 所說，好看的圖不應(yīng)該制作困難。Morris 是一個基于 jQuery 和 Raphael 的輕量級庫，它提供簡單干凈的線條，面積圖，條形及圓環(huán)圖。如果你正在尋找一些快速簡單且優(yōu)雅的庫，它絕對值得一試。
源碼許可證：開源。對所有人免費(fèi)。
15、Cytoscape.js
Cytoscape.js 是一個開源的、功能齊全的圖形庫，它純粹用 JavaScript 編寫，基于 LGPL3+ 并完全免費(fèi)。經(jīng)過高度優(yōu)化之后，它并不依賴外部。Cytoscape.js 可以讓你創(chuàng)建可復(fù)用的圖形工具，并能夠集成到你的 JavaScript 代碼中。
它同樣兼容所有現(xiàn)代瀏覽器，還兼容各種軟件框架，比如CommonJS和Node.js，AMD/Require.js，jQuery 以及 Meteor/Atmosphere 等。注意，雖然它與Cyctoscape 桌面應(yīng)用名字相同，但它們是完全不同的。
源碼許可證：免費(fèi)。對所有人免費(fèi)。
16、C3.js
C3.js 是另一個基于 D3 可重用的圖表庫。大量的基于 D3 的圖表工具表明了太多人喜歡 D3 的功能，但也反映了大家討厭用 D3 直接編碼。
C3.js 提供了一種不同于 D3 學(xué)習(xí)曲線的方法，它將構(gòu)建整個圖表所需要的代碼進(jìn)行了包裝。C3允許你創(chuàng)建自定義的類，這樣就可以生成自己的風(fēng)格。它提供了大量的API和回調(diào)，以便你可以在第一次渲染之后更新圖表。
源碼許可證：開源。對所有人免費(fèi)。
17、Rickshaw
Rickshaw 在 Shutterstock 被開發(fā)為一個建時間序列圖的工具包。像其他一些我們已經(jīng)討論過的工具一樣，Rickshaw 也是基于 D3 庫。它是開放并開源的（遵循 MIT 許可）。
你可以在這里看到一些 Rickshaw 的有趣例子。Rickshaw 的眾多擴(kuò)展和自定義的特性能夠讓你生成漂亮的時序圖。
源碼許可證：開源。對所有人免費(fèi)。
18、Cubism.js
Cubism 也許是顯示時間序列最佳的 D3 插件。是什么使它脫穎而出的呢？你可以引入多個來源的數(shù)據(jù)，比如 Graphite、Cube 和其他來創(chuàng)造令人敬畏的實(shí)時圖表來展現(xiàn)你的數(shù)據(jù)。
它能夠渲染增量，使用 Canvas 來一次一個像素的偏移圖表。Cubism 的水平圖要比標(biāo)準(zhǔn)的平面圖更好地利用垂直空間，能夠讓你一眼下來獲取更多的數(shù)據(jù)并增加一目了然的可能性。
源碼許可證：開源。對所有人免費(fèi)。
19、Plottable.js
Plottable 采取了一些不同于 D3 框架的方法。它已經(jīng)有一套可插拔的模塊化組件，這些組件封裝了渲染邏輯。這形成了一個單獨(dú)的布局引擎用來實(shí)際定位。
這意味著你可以使用任何 Plottable 的組件并將其添加到現(xiàn)有的圖表，或使用 Plottable 創(chuàng)建一個全新的圖表。它基本以一個更模塊化、即插即用的方式賦予了你 D3 的力量?？梢酝ㄟ^這些示例看一下 Plottable 的能力。
源碼許可證：開源。對所有人免費(fèi)。
20、Canvas.js
正如名字所隱含的，Canvas.js 是一個 HTML5 —— JavaScript 的圖表庫，基于 Canvas 元素。Canvas 允許你創(chuàng)建完全響應(yīng)式且跨設(shè)備的豐富圖表。除此之外，它有許多很好看的主題，他們聲稱要比傳統(tǒng)的基于 Flash 和 SVG 圖型快10倍。
源碼許可證：非商業(yè)免費(fèi)，商業(yè)用途收費(fèi)。
總結(jié)
數(shù)據(jù)的可視化和分析是當(dāng)今業(yè)務(wù)流程的的一個重要的組成部分。公司不論大小，都需要簡潔、高效、互動性的方式來詮釋數(shù)據(jù)。所以選擇適合你需求的 JavaScript 圖表庫尤為重要。
像 FusionCharts，GoogleCharts，Dygraphs 或 D3 的衍生庫可能更適合那些處理大量數(shù)據(jù)的企業(yè)，或那些很大程度上依賴于數(shù)據(jù)分析的小公司。如果你只需要一些小而快的庫，Morris.js 或 Chart.js 或許更適合你。對于圖形和和網(wǎng)絡(luò)，Cytoscape 或 Sigma.js 可能是更好的選擇。
我盡量將最好的工具包括在這里，但我相信你也有你的最愛，你最喜歡的 JS 圖表庫是哪個，為什么？
起HTML5，可能讓你印象更深的是其基于Canvas的動畫特效，雖然Canvas在HTML5中的應(yīng)用并不全都是動畫制作，但其動畫效果確實(shí)讓人震驚。本文收集了7個最讓人難忘的HTML5 Canvas動畫，包括畫板、文字、圖表等，希望你會喜歡。
1、HTML5 Canvas畫板畫圖工具 可定義筆刷和畫布
HTML5 Canvas還有一個比較實(shí)用的應(yīng)用，那就是網(wǎng)絡(luò)畫板，這樣我們就可以在網(wǎng)頁上直接進(jìn)行畫圖操作。今天要分享的這款HTML5 Canvas畫圖工具就可以簡單實(shí)現(xiàn)網(wǎng)絡(luò)畫圖的功能，我們可以自定義筆刷的類型、粗細(xì)、顏色，也可以定義畫布的大小和背景顏色等。我們也可以對這款HTML5畫圖工具進(jìn)行擴(kuò)展，讓它的畫圖功能更加完善。
在線演示 源碼下載
2、HTML5 Canvas瀑布動畫 超逼真
這次我們來分享一款很酷的HTML5 Canvas瀑布動畫，瀑布動畫非常逼真。整個瀑布動畫像是從石頭縫里流出來的溪水，然后沿著懸崖飛落下來，效果非常不錯。
在線演示 源碼下載
3、HTML5 Canvas可拖動的彈性大樹搖擺動畫
今天讓我們繼續(xù)來分享一個炫酷的HTML5動畫，它是一款基于HTML5 Canvas的大樹搖擺動畫，這款HTML5動畫的特點(diǎn)是我們可以拖拽樹枝，從而讓整棵樹搖擺起來，這樣就真實(shí)地模擬了大樹從搖擺到靜止的整個過程，相當(dāng)逼真。
在線演示 源碼下載
4、HTML5統(tǒng)計圖表數(shù)據(jù)初始動畫
之前我們已經(jīng)向大家分享很多HTML5圖表了，比如這款HTML5 Canvas折線圖表和柱形圖表就比較經(jīng)典。今天要介紹的也是一款HTML5圖表，該統(tǒng)計圖表的特點(diǎn)是圖表數(shù)據(jù)在初始化的時候會出現(xiàn)很酷的動畫特效，特別是環(huán)形百分比應(yīng)用還會出現(xiàn)百分比數(shù)的動態(tài)更新。
在線演示 源碼下載
5、HTML5 Canvas花朵生成器 可生成多種樣式的花朵
HTML5非常流行，利用HTML5制作動畫也非常方便，今天要分享一款利用HTML5 Canvas制作的花朵生成器，我們只需要在Canvas畫布上點(diǎn)擊鼠標(biāo)，即可動態(tài)生成各種顏色樣式的花朵，并且每一朵花都可以緩慢地旋轉(zhuǎn)，非常炫酷。
在線演示 源碼下載
6、HTML5 Canvas繪制灰太狼 超級可愛
HTML5 Canvas相當(dāng)于一個畫板，你可以在Canvas繪制任意的東西，今天要分享一款利用HTML5 Canvas繪制的灰太狼形象，個人以為，這個灰太狼繪制得十分逼真形象，小伙伴們都要驚呆了。以后我們再來弄一個HTML5 Canvas的喜洋洋如何？
在線演示 源碼下載
7、HTML5動感的火焰燃燒動畫特效
這又是一款基于HTML5的超炫動畫特效，是一款動感的火焰燃燒動畫效果。這款HTML5動畫火焰燃燒非常逼真，之前我們也分享過一些其他的HTML5火焰燃燒動畫，比如：HTML5 Canvas火焰燃燒動畫和純CSS3實(shí)現(xiàn)打火機(jī)火焰動畫。一般像這樣的HTML5動畫都是基于Canvas的，今天的這款也不例外。
在線演示 源碼下載
以上就是7個華麗的基于Canvas的HTML5動畫，希望對你有所幫助。
月中旬淘寶720°全景造物節(jié)H5驚艷登場戲謔了我們朋友圈一番。
如今臨近雙十一，果不其然出了一個橫掃我們眼球的“一鏡到底”H5，然后朋友圈又炸了...
>>查看案例《盡情盡興，盡在雙11》
http://tmall1111.im20.com.cn/index.html
鑒于上次我們用iH5.cn的720°全景功能，不花一分錢重制了造物節(jié)的致敬版H5，果不其然一些“熱心腸”的小伙伴跑到我們后臺留言：
“這次淘寶的雙十一H5你們能做嗎？”
“快出教程啊！急！”
嗯沒錯...我是用iH5的黑科技做出來了：
為了方便大眾，我們快速推出了一個新功能美名為——
滑動焦距控制。
它是iH5在全景容器下新增的功能，
能輕松搭建可滑動控制的長鏡頭虛擬場景。
你也想玩？步驟簡單粗暴只有三步：
1.準(zhǔn)備“一鏡到底”的素材
為了方便作品的演示，這里直接扒了《盡情盡興，盡在雙11》的部分素材，拼合成一個遞進(jìn)場景。
步驟A、先在PS擬出整個場景從內(nèi)至外的層次；
步驟B、把相關(guān)的素材按照層次大概排序位置，層次1為最里層依次排開并標(biāo)記素材位置，方便后序操作。
2.在iH5全景容器上搭建遞進(jìn)場景
步驟A、將保持不動的背景圖片先置于舞臺下，新建一個全景容器；
步驟B、按上述擬好的層次順序?qū)蝹€素材拖動進(jìn)全景容器，并調(diào)整素材的中心距離（前后）、水平角度（環(huán)形左右）、垂直高度（上下）、水平偏移（切面左右）。
層次間的距離是通過中心點(diǎn)距離控制的，可以完成一層素材堆砌后，先調(diào)整觀察點(diǎn)位置讓鏡頭往后走，再堆砌下一層素材并調(diào)整中心距離。 如果想要把控整體層次的布局，也可以在全景容器的屬性欄上調(diào)大觀察點(diǎn)距離到2000+，調(diào)大當(dāng)前垂直仰角，這樣就是一個俯視的垂直視角了：
3.打開全景容器的滑動焦距控制
最后一步，也是最最最簡單的一步，把全景容器屬性欄下的滑動焦距控制選擇為yes，打開重力感應(yīng)，大功告成！ 前方效果圖高能，建議有WIFI先開WIFI，土豪隨意！
最后再循例做一個鏡頭自動拉近聚焦的效果：
把全景容器的初始觀察點(diǎn)設(shè)大點(diǎn)，然后在舞臺下插入一個初始化后自動聚焦的事件好了~
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
