---Html5 将进行一次WEB 革命,很显然,你我都在这次革命中,我想你我都不会是旁观者,而是参与者。
前言
在html5 之前,网页上绚丽的动画大多是flash 的杰作,画图也可能是SVG 或者VML 。但是都不能真正的跨平台。html5 横空出世将改变这一现状。本文将介绍一款正在研发中的开源项目 ichartjs 的一个实例。也通过这个实例来展现一下Html5 canvas 的威力。
简介
ichartjs 目前还处于开发阶段,还有很多需要完善的地方。当然现在还有一些没有fixed 的bug 。今天偶然看到iteye 的这个活动,就先把目前的一个小demo 展示给大家看看吧。与大家交流一下。同时接受广大开发者的意见与建议。
ichartjs 是一个利用html5 canvas 的一个图表类组件。书写风格上类似ExtJs 。可以在页面上根据配置的数据动态的生成你想要的图形,并且有着绚丽的效果。其中将会包括但不仅限以下组件:
- 饼图
- 柱状图
- 条状图
- 折线图
- 仪表图
- 散点图
包含但不仅限以 下特性:
- 动态交互
- 动画转换
- 3D 场景
- 声音效果
目前推荐测试浏览器:
- Firefox
- Google Chrome
- Safari
本文中、只介绍目前已经基本开发完毕的饼图组件。下面让我们先一睹为快吧!
构建环境
简直算不上构建,就是Jidea-all.js 引入就好了。
get started with Jidea
公共代码:
data.js: var data = [{ name : '广州', value : 80, color:'#b36e0d' },{ name : '上海', value : 130, color:'#b32c0d' },{ name : '南昌', value : 75, color:'#dad81f' },{ name : '哈尔滨', value : 25, color:'#1f7e92' },{ name : '北京', value : 105, color:'#17a740' } ];
Pie2D示例
我们需要一个数据源、然后定义基本属性( 大小、位置等) 、配置图例与标签。就这么简单。下面来看代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Sample-pie2D</title> <meta name="Description" content="" /> <meta name="Keywords" content="" /> <script type="text/javascript" src="../core/jidea-all.js"></script> <script type="text/javascript" src="data.js"></script> <style type="text/css"> body{ margin-top:10px; text-align: center; } </style> </head> <body> <div>Sample</div> <br> <canvas id='myCanvas' width="800" height="600">您的浏览器不支持Canvas</canvas> <script type="text/javascript"> var pie2d = new Jidea.Pie2D({ j_canvas : 'myCanvas', j_data: data, j_title : '我和HTML 5的那点事儿-Pie2D', j_width : 700, j_height : 500, j_radius:140 }); //开始画图 pie2d.draw(); </script> </body> </html>
用firefox运行效果如下:
用鼠标点击试试:
其他效果:
图例在底端的
没有标签的
Pie3D示例
同样和2D一样,我们需要一个数据源、然后定义基本属性( 大小、位置等) 、配置图例与标签。不同与2D的就是需要配置厚度(高度)。下面来看代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Sample-pie3D</title> <meta name="Description" content="" /> <meta name="Keywords" content="" /> <script type="text/javascript" src="../core/jidea-all.js"></script> <script type="text/javascript" src="data.js"></script> <style type="text/css"> body{ margin-top:10px; text-align: center; } </style> </head> <body> <div>Sample</div> <br> <canvas id='myCanvas' width="800" height="600">您的浏览器不支持Canvas</canvas> <script type="text/javascript"> var pie3d = new Jidea.Pie3D({ j_canvas : 'myCanvas', j_data : data, j_title : '我和HTML 5的那点事儿-Pie3D', j_width : 700, j_height : 400, j_yheight:60,//设置了pie的厚度 j_radius:180 }); pie3d.draw(); </script> </body> </html>
用firefox运行效果如下:
用鼠标点击下试试:
为了广大童鞋测试用,提供可测试的配置项(此配置仅用于本文附件中的代码)
Pie 可用配置
配置项 |
类型 |
说明 |
j_height |
数字 |
画布高度 |
j_width |
数字 |
画布宽度 |
j_zrotate |
数字 |
仅3D 可用,{ 范围:(0~90]} z 轴旋转角度 |
j_yheight |
数字 |
仅3D 可用,Pie 的厚度 |
j_padding |
数字 |
内边距 |
j_offsetx |
数字 |
X 轴偏移量 |
j_offsety |
数字 |
Y 轴偏移量 |
j_radius |
数字 |
圆半径 |
j_background_color |
字符串 |
背景颜色 格式:#ffffff |
j_align |
字符串 |
对齐方式,可选left,center,right |
j_title |
字符串 |
标题 |
j_title_align |
字符串 |
标题对齐方式 |
j_legend |
Object |
图例配置,参见图例配置 |
j_label |
Object |
标签配置,参见标签配置 |
j_border |
Object |
外边框配置,参见外边框配置 |
图例配置
配置项 |
类型 |
说明 |
j_enable |
Boolean |
图例是否可用 |
j_border |
Object |
外边框配置,参见外边框配置 |
j_column |
数字 |
图例分几列显示 |
j_background_color |
字符串 |
背景颜色 格式:#ffffff |
j_sign |
字符串 |
图例小图标样式,可选round, square |
标签可用配置
配置项 |
类型 |
说明 |
j_enable |
Boolean |
图例是否可用 |
j_border |
Object |
外边框配置,参见外边框配置 |
j_column |
数字 |
图例分几列显示 |
j_background_color |
字符串 |
背景颜色 格式:#ffffff |
j_sign |
字符串 |
图例小图标样式,可选round, square |
边框可用配置
配置项 |
类型 |
说明 |
j_width |
数字 |
边框宽度 |
j_round |
数字 |
弧度,即是边框是圆弧状的,若为0 ,则为矩形 |
关于此例子
由于此例子是2011年发布的,现在项目已经经过很多此更新了,所以此例子中的代码仅限与附件中的js库,如果下载了最新的代码,请参照官方的例子与API。
后记:
ichartjs目前还处于开发阶段,还有很多需要完善的地方,不过通过本文的例子、我们基本能了解到html5的威力、但这仅仅是html5其中的一个特性。而且目前有很多html5的JS库可用。3D方面WebGL的发布也给我们带来了很多惊喜。更多的知识需要你去探索。
推荐资源
国内的就不推荐了~推荐一个有意思的 , 很多html5的小东西
http://www.jsdo.it
相关推荐
html5 canvas交互式数据图表插件代码 html5 canvas交互式数据图表插件代码
html5 canvas绘制七巧板图形代码 html5 canvas绘制七巧板图形代码
html5 canvas实现交互式彩色渐变背景动画特效源码.zip
html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效
这是一个带幻灯片组件的html5 canvas交互式粒子效果,文本和形状有粒子组成,鼠标移动到粒子上时,粒子会有交互效果。
HTML5 Canvas核心技术 图形、动画与游戏开发
HTML5 Canvas核心技术 图形、动画与游戏开发 PHP全本正版
一款炫酷的html5 canvas鼠标圆点粒子交互式动画特效,可自定义设置粒子数量和大小颜色等,点击或移动鼠标进行交互。
HTML5 Canvas实现的交互式分形树水墨画动画效果源码
高清版 HTML5 CANVAS核心技术图形动画与游戏开发(爱飞翔).pdf
HTML5 利用canvas构建 Web五子棋游戏程序设计 这只是一个简单的javascript和HTML5小程序,实现人机对战。
《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...
4.8_使用HTML控件和canvas交互|交互绘制的处理和完善|canvas项目综合实战|Canvas图形、动画、游戏开发从入
H5 Canvas鼠标粒子交互式特效是一款自定义设置粒子数量和大小颜色等功能,点击粒子波动画特效。
HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...
HTML5 Canvas实现的交互式奔跑动画特效源码.zip
《HTML5 Canvas核心技术:图形、动画与游戏开发》是HTML5 Canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的经典、五星级畅销书、资深技术专家David Geary新力作。它不仅全面讲解了...
HTML5 Canvas核心技术 图形、动画与游戏开发.pdf 原书电子版
基瑞编著的《HTML5Canvas核心技术:图形动画与游戏开发》是HTML5 Canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典、Amazon五星级超级畅销书、资深技术专家David Geary*...
HTML5 canvas实现鼠标交互式柳絮树枝动画特效源码.zip