請選擇 進入手機版 | 繼續訪問電腦版

 找回密碼
 立即註冊
搜索
熱搜: 活動 交友 discuz
查看: 643|回復: 0

【分享】10個經典實用的HTML5圖表動畫應用

[複製鏈接]

4

主題

8

帖子

62

積分

註冊會員

Rank: 2

積分
62
發表於 2016-11-24 17:44:28 | 顯示全部樓層 |閱讀模式
本帖最後由 sampson 於 2016-11-24 17:56 編輯

原文轉貼自 清屏網
因字數限制,只轉貼8個

今天我們要來分享另外一種類型的HTML5動畫:HTML5圖表應用。圖表在網頁中應用十分廣泛,尤其是後臺的統計功能,更能體現出圖表的強大之處。本文將介紹一些比較實用的HTML5圖表動畫,有些結合jQuery,有些是直接基於Canvas,一起來看看吧。
1、超酷HTML5 Canvas圖表應用Chart.js之前我們已經為大家分享過很多HTML5圖表應用了,每一個HTML5圖表都非常實用。今天我們要介紹一款基於HTML5 Canvas的圖表應用Chart.js,它的功能非常強大,有很多圖表類型,包括折線圖、柱狀圖、圓形圖、放射圖等,你可以下載並將它們應用到自己的項目中。

2HTML5 3D動畫柱狀圖表
這次我們要分享一款很酷的HTML5 3D圖表應用,它是一款柱狀圖表,呈3D的外觀樣式,並且我們可以改變圖表的顏色主題,讓其更加符合你的需求。這款HTML5圖表可以切換需要查看的圖表資料,在切換的時候有不錯的動畫效果,而且,我們還可以切換圖表的大小,以適應不同大小的流覽視窗。

3HTML5 Canvas發光折線圖表應用
之前我們分享過很多 HTML5 折線圖表,像 HTML5 SVG多折線圖表HTML5/CSS3動態折線圖表 等。今天我們要分享一款基於HTML5 Canvas的折線圖表應用,其實我們僅僅是在canvas上面繪製了一條發光的折線,當然圖表的x、y座標你可以自己繪製上去。
4、即時更新資料的jQuery highcharts圖表外掛程式
今天我們要來分享一款基於jQuery的highcharts即時圖表外掛程式,highcharts圖表外掛程式定義了每隔一秒鐘更新資料,然後根據每個數據點繪製一條折線,隨著資料的更新,折線也就會不停的向前移動,形成一個類似CPU即時監控的曲線圖表。這款jQuery圖表外掛程式應用比較廣泛,相容所有流覽器。
5HTML5數學函數圖形繪製外掛程式XCalc
XCalc是一款基於HTML5的數學函數圖形繪製外掛程式,這款函數圖形繪製外掛程式不僅可以繪製簡單的加減乘除運算的函數圖形,也可以繪製乘方運算和正弦余弦運算的函數圖形。XCalc的配置也非常簡單,在HTML5圖表中應用十分廣泛。
6、基於HTML5SVG動畫折線圖表 線顏色漸變
今天給大家帶來一款HTML5圖表應用,圖表是基於SVG結構的折線圖。遺憾的是這款HTML5圖表不可以自訂資料點,但是有一個特點是折線的顏色是漸變的,並且在圖表資料初始化的時候,折線顯示是帶有動畫特效的。
7、華麗的HTML5圖表 可展示即時資料
HTML5 在圖表應用中也十分廣泛,比起以前的網頁圖表,HTML5圖表製作更便捷,功能更強大。這款HTML5圖表外掛程式外觀十分華麗和專業,在資料展示方面也很有優勢,圖表不僅支援多維資料展示,而且支援區域選擇資料功能,利用該HTML5圖表可以更加方便地管理你的資料。
8jQuery環形百分比圖表外掛程式
這次我們要分享一款非常富有創意的jQuery圖表外掛程式,這款jQuery環形百分比圖表外掛程式有以下特點:1.圖表外觀是環形的,因此也十分特別。2.圖表資料有百分比顯示,你可以直截了當地看到當前資料情況。3.滑鼠滑過環形時,將突出顯示該項資料,並顯示百分比。

本帖子中包含更多資源

您需要 登錄 才可以下載或查看,沒有帳號?立即註冊

x
回復

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即註冊

本版積分規則

Archiver|手機版|小黑屋|H5ADC論壇  

GMT+8, 2019-7-18 08:37 , Processed in 0.094746 second(s), 23 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表