html5动效系列二十六:分享几款HTML5 动画图表

2015-5-29    蓝蓝

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供有效的UI界面设计BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

每一个扁平化界面设计,都是我们的心灵碰撞致力于最棒的 metro ui 设计

来源:www.html5tricks.com

 如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

1.HTML5 Canvas动画折线图 可动态添加节点

一款基于HTML5 Canvas的折线图表,这款HTML5折线图表的特点有两个,一个是图表是有动画效果的,即在图表初始化的时候带有动画;第二个是这个HTML5折线图表可以让你动态添加数据节点,并且用折线平滑地连接,Canvas是这款折线图的一个画板。

html5-canvas-animated-line

在线演示源码下载

2.基于HTML5 Canvas的图表插件Chart.js

 

2 . chart.js是一款基于HTML5 Canvas的图表插件,chart.js的功能非常强大,它不仅提供了常见的柱形图、折线图、饼状图,而且还提供了环形图、雷达图,样式外观多样,图表的色彩搭配也比较清新。chart.js还有一个特点就是图表在初始化的时候有弹性动画,这也是HTML5 Canvas的一大功劳。

chartjs-html5-canvas

柱形图折线图饼状图环形图雷达图极线图源码下载

3. HTML5 3D动画柱状图表

 

3 . 一款很酷的HTML5 3D图表应用,它是一款柱状图表,呈3D的外观样式,并且我们可以改变图表的颜色主题,让其更加符合你的需求。这款HTML5图表可以切换需要查看的图表数据,在切换的时候有不错的动画效果,而且,我们还可以切换图表的大小,以适应不同大小的浏览窗口。

html5-3d-animated-chart

在线演示源码下载

 

 

4.HTML5柱状图表 可合并多张图表的数据

 

像这款HTML5/CSS3水平柱状图表,非常简单实用的图表。今天我们要再来分享一款HTML5柱状图表,这款图表插件可以将多张图表的数据合并成一张图表显示,在图表数据合并过程中产生融入的动画,挺不错的。

html5-bar-chart-d3

在线演示源码下载

5.HTML5线性图表 图表数据区域可着色

 

 

一款实用的HTML5线性图表插件,这款线性图表可以在不同的数据区域内绘制不同的颜色,让每一个数据区域都非常明显可见。

html5-line-chart

在线演示源码下载

 

分享本文至:

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档