9款基于HTML5/SVG/Canvas的折线图表应用

标签: 资讯 HTML5应用 | 发表时间:2014-05-13 23:40 | 作者:sxwgf
分享到:
出处:http://www.html5tricks.com

利用 HTML5制作精美而实用的折线图表比较简单,因为我们除了可以利用HTML/CSS/Javascript外,还可以使用功能强大的SVG和Canvas动画特性,今天我们就来分享9款基于HTML5/SVG/Canvas的折线图表应用。

1、HTML5折线图表Aristochart 图表配置简单

之前我已经向大家分享了几款HTML5图表应用, HTML5 Canvas图表应用RGraphHTML5 Canvas饼状图表。利用这些HTML5图表可以很方便的展示各种数据,而且非常直观。今天要向大家分享一款HTML5折线图表插件Aristochart,Aristochart扩展非常灵活,配置也比较简单,是一款很实用的HTML5图表应用。

aristochart-html5-chart

在线演示1   在线演示2   在线演示3   在线演示4   源码下载

2、华丽的HTML5图表 可展示实时数据

HTML5在图表应用中也十分广泛,比起以前的网页图表,HTML5图表制作更便捷,功能更强大。这款HTML5图表插件外观十分华丽和专业,在数据展示方面也很有优势,图表不仅支持多维数据展示,而且支持区域选择数据功能,利用该HTML5图表可以更加方便地管理你的数据。

html5-chart-data

在线演示         源码下载

3、HTML5 D3图表 超酷的图表初始化动画效果

今天已经向大家分享过一款基于HTML5和CSS3的柱状图表应用了,接下来同样是一款HTML5图表应用,图表名称叫HTML5 D3 Chart,作者是一位德国开发者Brian Hanby。这款HTML5图表展现了一款环状图和折线图,图表的特点是在初始化数据的时候会出现很酷的动画效果,环状图和折线图的动画效果是不一样的。

html5-d3-chart

在线演示         源码下载

4、HTML5 SVG多折线图表 图表可缩放显示

今天我们要来介绍一款基于 HTML5 SVG的折线图表,该款图片支持多条折线重叠在一起显示,可以方便地比较不同颜色折线的数据。另外图表还有一个特点,就是可以缩放和移动,这大大方便了用户浏览图表数据,非常人性化。更多图表应用,请移步至 HTML5图表栏目。

html5-svg-multi-line-chart

在线演示         源码下载

5、HTML5 Canvas发光折线图表应用

之前我们分享过很多HTML5折线图表,像 HTML5 SVG多折线图表HTML5/CSS3动态折线图表等。今天我们要分享一款基于HTML5 Canvas的折线图表应用,其实我们仅仅是在canvas上面绘制了一条发光的折线,当然图表的x、y坐标你可以自己绘制上去。

html5-canvas-line-chart

在线演示         源码下载

6、HTML5数学函数图形绘制插件XCalc

XCalc是一款基于HTML5的数学函数图形绘制插件,这款函数图形绘制插件不仅可以绘制简单的加减乘除运算的函数图形,也可以绘制乘方运算和正弦余弦运算的函数图形。XCalc的配置也非常简单,在HTML5图表中应用十分广泛。

html5-xcalc-demo

在线演示         源码下载

7、HTML5/CSS3动态折线图表 图表数据切换动画

前面我们刚刚分享过一款很不错的 HTML5/SVG折线图表,这次我们依然要来分享一款带超酷动画的 HTML5/CSS3动态折线图表,图表数据会定时切换,图表数据在切换的时候有很酷的切换动画,感觉数据模拟非常真实。另外,更多的HTML5图表应用可以到 HTML5图表栏目下查看。

html5-css3-animated-graph

在线演示         源码下载

8、HTML5/SVG线性图表 可绘制图表区域颜色

今天要分享的这款HTML5图表应用是一款线性图表,它主要是有SVG构造出来的,这款SVG线性图表可以用不同的颜色绘制出图表的数据区域。另外,这款图表和之前分享的 HTML5线性图表iGrapher 类似,只是功能没那么强大而已。

html5-svg-line-chart

在线演示         源码下载

9、HTML5线性图表iGrapher 功能非常强大

iGrapher是一款基于HTML5的线性图表应用,和之前分享的 HTML5线性图表 图表数据区域可着色类似,iGrapher也可以按不同的统计范围来绘制曲线,同时我们在iGrapher中可以利用鼠标滚轮来缩放统计区间,同时我们可以在menu栏中选择需要显示的统计数据。

html5-chart-igrapher

在线演示         源码下载

以上就是9款基于HTML5/SVG/Canvas的折线图表应用,欢迎收藏分享。

相关 [html5 svg canvas] 推荐:

三天学会HTML5——SVG和Canvas的使用

- - ITeye博客
在第一天学习了HTML5的一些非常重要的基本知识,今天将进行更深层学习. 首先来回顾第一天学习的内容,第一天学习了新标签,新控件,验证功能,应用缓存等内容. 第2天将学习如何使用Canvas 和使用SVG 实现功能. Lab1—— 使用Canvas. Canvas 是指定了长度和宽度的矩形画布,我们将使用新的HTML5 JavaScript,可使用HTML5 JS API 来画出各种图形.

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div,不过,它的长和宽不能通过css来定义,要使用标签属性:. 或者javascript对象属性设置:. 使用canvas,只有一种操作方式,使用javascript. 获得canvas对象的上下文对象,该对象是操作canvas的主要对象:. 使用canvas画最简单的线, 点击运行示例,结果看起来是这样:.

备份:html5 canvas cheat sheet

- - 膘叔
纯备份资料,HTML5的canvas资料.

html5 canvas 图像处理

- - HTML5研究小组
前两天无意中看了下《pro html5 programming》,发现html5竟然也能很好的支持图像处理,在此稍稍交代一下. 与matlab处理图像类似的是,这里也是采用图像矩阵的形式. 下面就介绍一个简单的例子:. >canvas图像处理</. >是时候更换浏览器了<. >点击下载firefox</.

HTML5 Canvas双缓存实例

- - Web前端 - ITeye博客
转自:http://www.108js.com/article/article3/30046.html?id=255. 下面是用HTML5的<canvas>标签写的一个视差滚动动画的示例. 采用了制作动画或者游戏编程中常用的双缓冲技术:获取到页面中的Canvas对象之后,创建了一个与页面Canvas同样大小的Canvas对象.

小tip: SVG和Canvas分别实现图片圆角效果

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=4242. 一、图片覆盖和CSS3 border-radius实现圆角. 找个中间镂空的图片覆盖在原始图片上,需要跟网页底色一致. 上面两个方法demo有,截图有~. 可是demo上的图片素材一不小心放了个大,我不想换图片,地址就不放了,大家可以YY下.

【转载】比较html5、GML、SVG、VML

- - HTML5研究小组
web图形方案比较 html5、 GML、 SVG、 VML. GML、SVG和VML都是基于XML的可用来描述矢量图形的标记语言,都是XML词表,它们的语法并不难理解,但它们都有各自不同的用途和特点,下面简单介绍一下. 是基于XML的空间信息编码标准,由OpenGIS Consortium (OGC)提出,得到了许多公司的大力支持,如Oracle、Galdos、MapInfo、CubeWerx等.

HTML5 Canvas: 测试浏览器是否支持Canvas

- - CSDN博客Web前端推荐文章
本文翻译自Steve Fulton & Jeff Fulton. 在获取HTML页面上Canvas元素的引用后,我们需要测试一下该元素是否包含“上下文”(context). Canvas的上下文指的是由浏览器定义的用于绘画的平面. 简单地说,如果上下文不存在的话,Canvas也就名存实亡了.

HTML5 Canvas开发框架:CasualJS Framework

- Jimmy - ITeye论坛最新讨论
CasualJS Framework是根据ActionScript3?.0的架构开发的一套适用于HTML5 Canvas的面向对象的开发框架. 虽然Canvas提供了强大的绘图功能,但满足不了高级开发的需要. 利用CasualJS的显示对象架构及渲染机制,你可以轻松的在Canvas中操控各种位图、图形、影片剪辑等显示对象.

25 超棒的 HTML5 Canvas 游戏

- 迎客松 - LinuxEden开源社区-Linux伊甸园
Canvas 元素作为HTML5标准的一部分,允许你通过脚本动态渲染点阵图像. 这是为了基于浏览器的矢量图形而设计. HTML Canvas 把一个绘图 API 展现给 JS 客户端,使得脚本能够把想绘制的东西都绘制到一块画布上. 阅读全文 | 邮件推荐 | 评论回复.