美觀又實用,10 款強大的開源 Javascript 圖表庫

2019獨角獸企業重金招聘Python工程師標準>>> hot3.png

隨著發展,現代 Web 設計在改善體驗和功能的同時,對于美觀的追求也越來越高,可視化、交互式、動態等元素和效果似乎已成為標配。

以下是為開發者推薦的 10 款開源 Javascript 圖表庫,可以幫助實現各種漂亮的功能。話不多說,直接開始吧!

1、ECharts

ECharts 由百度前端技術部開發的,是一個純 Javascript 的圖表庫,可以流暢的運行在 PC 和移動設備上,兼容當前絕大部分瀏覽器(IE8/9/10/11、Chrome、Firefox、Safari等),底層依賴輕量級的 Canvas 類庫?ZRender,提供直觀,生動,可交互,可高度個性化定制的數據可視化圖表。

ECharts 有良好的自適應效果,ECharts 3 中更是加入了更多豐富的交互功能以及更多的可視化效果,并且對移動端做了深度的優化。

114727_pR2V_2896879.png

2、Chart.js

Chart.js?是一個簡單、面向對象、為設計者和開發者準備的 Javascript 圖表繪制工具庫,基于 HTML5 canvas 技術,支持所有現代瀏覽器,并且針對 IE7/8 提供了降級替代方案。

Chart.js?不依賴任何外部工具庫,輕量級(壓縮之后僅有4.5k),并且提供了加載外部參數的方法。能用多種不同的方式讓數據變得可視化。

3、jqPlot

jqPlot 是一個非常強大的基于 jquery 類庫的 Javascript 圖表工具,可在網頁中繪制線狀、柱狀、餅狀等多種樣式圖表。

jqPlot 強大之處在于將內容呈現為動態嵌入的靜態圖像,這意味著圖表數據可以通過 Ajax 更新,甚至不需要刷新頁面。 某些圖表類型甚至具有懸停選項,可在懸停時顯示相關數據。

141931_z0gw_2896879.png

142029_fQrq_2896879.png

4、Chartist.js

Chartist.js 是一個使用 SVG 構建的簡單的響應式圖表庫,可以作為前端圖表生成器。同樣兼容當前絕大部分瀏覽器(IE8/9/10/11、Chrome、Firefox、Safari等)。

Chartist.js 每個圖表從大小到配色方案都是完全響應和高度可定制的,依靠 SVG 將圖形作為圖像動態地呈現到頁面上。完全使用 SASS 構建,并且支持自定義。

145626_OTS0_2896879.png

5、xCharts

xCharts 是一個使用?D3.js?來構建漂亮的可定制的數據驅動的 JavaScript 圖表庫,使用 HTML、CSS、SVG 實現圖表,適用于熟悉數據可視化的用戶。

通過 xCharts 渲染的所有內容都有很強的適應性,在與數據交互時添加自己的動畫或緩動函數也較為容易。

6、C3.js

C3.js?也是一個基于?D3.js?的可重用的開源 JavaScript?圖表庫。這意味著將數據圖表繪制到 HTML 頁面上的過程得到簡化,不需要大量的自定義 D3 圖表代碼,也相對容易上手。

C3.js?所有的數據是完全動態的,從工具到圖形顏色。它使用非常舒服,有充分的可定制性和控制性,支持多種圖表類型。

7、Pizza Pie Charts

Pizza Pie Charts 是由 ZURB 開發的一個知名的 JavaScript 庫,用于渲染基于 SVG 的餅圖。

Pizza Pie Charts 所有的顯示設置和選項都可以直接在 CSS 或 JavaScript中 修改。它專注于以最好的方式將數據呈現到餅圖。如果是其他圖表樣式,還是建議使用其它的幾個庫。

153623_H1eb_2896879.png

8、Protovis

Protovis 使用簡單的標記(例如條形和點)組成數據的自定義視圖。 與一些低級圖形庫不同,Protovis 通過對數據進行編碼的動態屬性來定義標記,允許繼承、縮放和布局來簡化構建。

Protovis 有能力渲染非常獨特的圖表樣式,它使用 JavaScript 和 SVG 進行 Web 本地可視化,無需插件(除了需要一個瀏覽器)。

154449_8gvl_2896879.png

9、Flot

Flot 是 jQuery 的純 JavaScript 圖表庫,專注于使用簡單,外觀漂亮和強互動功能。它是特定的 jQuery 庫,這意味著你需要使用它需要熟悉基礎的 jQuery。但是從另一方面來說,這意味著你可以全面控制呈現,動作和用戶交互。

使用 Flot 的主要好處是能夠創建動畫繪制圖,可以以此展現大量的結果數據。它兼容大多數現代瀏覽器,向下兼容到 IE6 和 Firefox2。

160540_FCS6_2896879.png

10、Dygraphs

Dygraphs 也是一個基于 HTML5 canvas 的 JavaScript 圖表庫,可以生成一個可交互式的,可縮放的的曲線表,可以用來顯示大密度的數據集(比如股票、氣溫等等),并且可以讓用戶來瀏覽和解釋這個曲線圖。

Dygraphs 在移動設備上還可以通過縮放顯示效果來支持交互。如果你想用 JavaScript 繪制數據,那么 Dygraphs 是一個不錯的選擇。

161730_wDF8_2896879.png

轉載于:https://my.oschina.net/editorial-story/blog/844876

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/282762.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/282762.shtml
英文地址,請注明出處:http://en.pswp.cn/news/282762.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

EF CORE 7 RC1 發布

原文鏈接:https://devblogs.microsoft.com/dotnet/announcing-ef7-rc1/[1]原文作者:Jeremy Likness翻譯:沙漠盡頭的狼(谷歌翻譯加持)Entity Framework Core 7 (EF7) Release Candidate 1 已發布!該團隊專注于解決缺陷、小幅改進以…

0 重新學習Ubuntu -- 這一段沒怎么學習

在完成了前面的幾個學習后,再沒有進行系統的學習。 雖然在真機上安裝系統,每天都打開,完成以下的工作: 升級軟件用來查看相關的網站在Ubuntu上,現在可以完成辦公、上網、娛樂。 但專業的學習,例如編程方面進…

自定義地圖怎么做成html,自定義html為谷歌地圖制作標記

好吧,似乎Custom Overlays會做我想要的。這是ping層:function PingLayer(bounds, map) {this.bounds bounds;this.setMap(map);}PingLayer.prototype new google.maps.OverlayView();PingLayer.prototype.onAdd function() {var div document.create…

HDU5248:序列變換(二分)

序列變換 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s): 1348 Accepted Submission(s): 593Problem Description給定序列A{A1,A2,...,An}, 要求改變序列A中的某些元素,形成一個嚴格單調的序列B&am…

微服務太分散?使用Fundebug集中式bug監控

摘要: 微服務日志分散,可以使用Fundebug的異常監控將它們集中起來。 當一個項目復雜到一定程度,功能越來越多,隨之對應的模塊也越來越多。 如果都放在一個大的項目下面,共同開發,整合發布,那么會…

html404頁面怎么添加,網站要如何設置自定義404頁面?

之前我們講述過網站設置404頁面對于優化或是用戶體驗的重要意義,大家可移步到《網站為什么要設置404頁面》查看,今天我們講解的是網站要如何設置自己的404頁面。現在大多數空間商都有了404設置的功能,我們可將404頁面上傳至空間里面&#xff…

設計模式之——工廠方法模式

1、工廠方法模式(Factory Method)工廠方法模式分為三種:11、普通工廠模式,就是建立一個工廠類,對實現了同一接口的一些類進行實例的創建。首先看下關系圖:舉例如下:(我們舉一個發送郵…

記一次性能故障排查

最近一次公司服務出了一些性能的問題,主要是內存不釋放。領到任務后就開始展開工作。項目是用.net core 6寫的,在框上應該不會有什么問題,這是大背景。另外服務是部署在k8s上的,于是就和性能測試人員,開發人員搭測試環…

html單選框 點擊取消選中,radio單選框再點擊取消選中

html:html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">單選框選項a選項b選項c選項dcheckradio.js://參數:obj為當前點擊的radio對象function onClickRadioStyle(obj){var…

開啟AngularJS 1.X的學習之路(1)

概念(1) AngularJS 應用 AngularJS 模塊&#xff08;Module&#xff09; 定義了 AngularJS 應用。AngularJS 控制器&#xff08;Controller&#xff09; 用于控制 AngularJS 應用。ng-app指令定義了應用, ng-controller 定義了控制器。eg: <div ng-app"myApp" ng-…

Hello boke!

Hello boke&#xff01;轉載于:https://www.cnblogs.com/yikuan-919/p/9319071.html

ASP.NET Core在.NET 7 RC1中的更新

原文鏈接&#xff1a;https://devblogs.microsoft.com/dotnet/asp-net-core-updates-in-dotnet-7-rc-1/[1]原文作者&#xff1a;Daniel Roth翻譯&#xff1a;沙漠盡頭的狼(谷歌翻譯加持).NET 7 Release Candidate 1 (RC1) 現已推出[2]&#xff0c;其中包括對 ASP.NET Core 的許…

html5 tab菜單切換頁面,11個常用的jQuery TAB切換菜單源碼及制作教程

11個常用的jQuery TAB切換菜單源碼及制作教程SponsorTAB切換式菜單可以方便為我們減少很多網頁布局空間&#xff0c;而且用jQuery的話可以加入一些動畫效果&#xff0c;比如漸變&#xff0c;向左右滑動等&#xff0c;提升一定的用戶體驗&#xff0c;所以TAB菜單目前來說是很流行…

7.16 10.19-10.22

10.19 iptables規則備份和恢復[roothyc-01-01 ~]# service iptables save 保存iptables規則該命令會將規則保存在/etc/sysconfig/iptables將iptables規則備份到一個文件中[roothyc-01-01 ~]# iptables-save>/tmp/ipt.txt將iptables規則備份到ipt.txt文件中從備份規則的文件恢…

走進javascript——不起眼的基礎,值和分號

值 有時我很想知道javascript解析引擎是如何區分一個變量的值&#xff0c;比如下面這段代碼。 var x javascript; //javascript x "hello"; // hello x 555; //555 x null; //null x a; //a is not defined x true; //true 對于數字是直接賦值的&#xff0c;因…

ConcurrentDictionary字典操作竟然不全是線程安全的?

好久不見&#xff0c;馬甲哥封閉居家半個月&#xff0c;記錄之前遇到的一件小事。ConcurrentDictionary<TKey,TValue>絕大部分api都是線程安全的[1]&#xff0c;唯二的例外是接收工廠函數的api&#xff1a;AddOrUpdate、GetOrAdd&#xff0c;這兩個api不是線程安全的&…

碼農小汪-Hibernate學習8-hibernate關聯關系注解表示@OneToMany mappedBy @ManyToMany @JoinTable...

近期我也是有點郁悶&#xff0c;究竟是程序中處理關聯關系。還是直接使用外鍵處理關聯關系呢&#xff1f;這個的說法不一致&#xff01;程序中處理這樣的關聯關系的話。自己去維護這樣的約束。這樣的非常樂觀的一種做法&#xff01;或者是直接在數據庫中處理這樣的直接的外鍵關…

HTML中彈窗中加入圖片,javascript里怎么實現點擊圖片彈出對話框?

JavaScript中可以使用document.getElementsByTagName方法后去img標簽&#xff0c;然后遍歷所有img標簽并為其添加點擊事件實現點擊彈出對話框。JavaScript實現點擊圖片彈出對話框&#xff1a;img {width: 500px;height: 300px;}//獲取所有的img標簽var imgObjs document.getEl…

Java學習優秀網站

各類程序員學習路線圖&#xff1a; http://www.runoob.com/coder-learn-path 博學谷&#xff1a; http://v.itcast.cn/map/22.html 慕課網&#xff1a; http://www.imooc.com/course/programdetail/pid/31 轉載于:https://www.cnblogs.com/Arsene/p/6441831.html

Dcloud課程2 什么是Dcloud

Dcloud課程2 什么是Dcloud 一、總結 一句話總結&#xff1a;DCloud提供了一套快速開發應用的跨平臺技術方案。 1、DCloud的產品架構&#xff1f; MUI(H5)HBuilder 2、什么是MUI&#xff1f; 最接近原生體驗的移動App的UI框架。 3、什么是H5&#xff1f; html5功能增強標準 二、…