14個華麗的javascript圖表資源和插件

建立一張圖表有很多不同的方法,比如falsh、javascript、css,或者一些服務(wù)端語言php、asp等,下面介紹圖表都是通過javascript實現(xiàn)。
1. Creating accessible charts using canvas and jQuery
這篇文章教你怎么利用 fgCharting(一個jQuery插件)把html的表格轉(zhuǎn)換成一個流行風(fēng)格的圖標、曲線圖,這個插件支持很多類型的圖標,比如線形、線形填充、線形疊加、疊加的填充線條、餅狀圖、條狀圖、疊加的餅狀圖等。
2. Emprise JavaScript Charts
JavaScript Charts支持很多特性而且有非常完善的開發(fā)文檔,當時僅僅個人用戶才能免費使用。
3. Flot
Flot是一款純基于jQuery的純Javascript 庫. 它關(guān)注的是提供一些簡單的應(yīng)用(所有選項都是可選的)), 引人矚目的效果和一些比如縮放圖片、鼠標跟蹤的特性。
4. Canvas Pie Chart with Tooltips
This Mootools pie chart class is based on Stoyan Stefanov’s Canvas Pie.The code now requires less html markup than the original.
5. jQuery Google Charts
6. jQuery Sparklines
jQuery插件,直接通過HTML或者 javascript提供數(shù)據(jù)來構(gòu)建一些小型圖表 .
7. moochart
moochart基于 MooTools 1.2, 在 canvas標簽上繪制圓形圖表,未來的版本將引進餅狀圖,條狀圖和曲線圖。
8. JS Charts
JS Charts 是一款免費的基于javascript的輕量級插件,用JS Charts 繪制圖表是很輕松地事,因為你只需要關(guān)心客戶端的腳本。
9. ProtoChart
ProtoChart是基于 Prototype 和Canvas 的一款開源插件。
10. Raphaël—JavaScript Library
Raphaël 是一款輕量的javascript庫,它通過二維圖形簡化你的web作業(yè),你可以用這個腳本庫輕松建立自己的獨特的圖表或者圖表效果。
11. PlotKit
PlotKit 是一款圖表和曲線圖繪制javascript庫 ,它通過Adobe SVG Viewer 和瀏覽器來支持 HTML Canvas 和SVG 。
12. Flotr Javascript Plotting Library
Flotr是基于 Prototype 的Javascript繪圖框架 .Flotr讓你通過一些很簡單的語法就可以繪制引人注目的圖表。
13. Yahoo! UI Library: Charts
The YUI Charts 可通過很多格式來控制形象化的表列數(shù)據(jù),包括了垂直列表,雙杠圖,線形,餅狀圖。
14. TufteGraph
TufteGraph 是一款漂亮的l jquery圖表插件。
相關(guān)文章
- CSS Grid 是一種二維布局系統(tǒng),可以同時控制行和列,相比 Flex(一維布局),更適合用在整體頁面布局或復(fù)雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋2025-04-16
CSS Padding 和 Margin 區(qū)別全解析
CSS 中的 padding 和 margin 是兩個非?;A(chǔ)且重要的屬性,它們用于控制元素周圍的空白區(qū)域,本文將詳細介紹 padding 和 margin 的概念、區(qū)別以及如何在實際項目中使用它們2025-04-07- will-change 是一個 CSS 屬性,用于告訴瀏覽器某個元素在未來可能會發(fā)生哪些變化,本文給大家介紹CSS will-change 屬性詳解,感興趣的朋友一起看看吧2025-04-07
- 本文給大家分享在 CSS 中,去除a標簽(超鏈接)的下劃線的幾種方法,本文給大家介紹的非常詳細,感興趣的朋友一起看看吧2025-04-07
- 在前端開發(fā)中,CSS(層疊樣式表)不僅是用來控制網(wǎng)頁的外觀和布局,更是實現(xiàn)復(fù)雜交互和動態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展,CSS的用法也日益豐富和高級,本文將2025-04-07
css中的 vertical-align與line-height作用詳解
文章詳細介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見使用場景、常見問題及解決方案,感興趣的朋友跟隨小編一起看看吧2025-03-26淺析CSS 中z - index屬性的作用及在什么情況下會失效
z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性(如relative、absolute、fixed或sticky),本文給大家介紹CSS 中z - index屬性的作用2025-03-21- 文章詳細介紹了CSS中的打印媒體查詢@mediaprint包括基本語法、常見使用場景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁控制、調(diào)整邊距和背景等2025-03-18
CSS模擬 html 的 title 屬性(鼠標懸浮顯示提示文字效果)
本文介紹了如何使用CSS模擬HTML的title屬性,通過鼠標懸浮顯示提示文字效果,通過設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實現(xiàn)了提示內(nèi)容的隱藏和顯示,感興趣的朋友一起2025-03-10前端 CSS 動態(tài)設(shè)置樣式::class、:style 等技巧(推薦)
本文介紹了Vue.js中動態(tài)綁定類名和內(nèi)聯(lián)樣式的兩種方法:對象語法和數(shù)組語法,通過對象語法,可以根據(jù)條件動態(tài)切換類名或樣式;通過數(shù)組語法,可以同時綁定多個類名或樣式,此外2025-02-26