【HTML5活动】利用Html5 Canvas构建交互式图形报表

---Html5将进行一次WEB革命，很显然，你我都在这次革命中，我想你我都不会是旁观者，而是参与者。

在html5之前，网页上绚丽的动画大多是flash的杰作，画图也可能是SVG或者VML。但是都不能真正的跨平台。html5横空出世将改变这一现状。本文将介绍一款正在研发中的开源项目ichartjs的一个实例。也通过这个实例来展现一下Html5 canvas的威力。

简介

ichartjs目前还处于开发阶段，还有很多需要完善的地方。当然现在还有一些没有fixed的bug。今天偶然看到iteye的这个活动，就先把目前的一个小demo展示给大家看看吧。与大家交流一下。同时接受广大开发者的意见与建议。

ichartjs是一个利用html5canvas的一个图表类组件。书写风格上类似ExtJs。可以在页面上根据配置的数据动态的生成你想要的图形，并且有着绚丽的效果。其中将会包括但不仅限以下组件:

饼图柱状图条状图
折线图仪表图散点图

包含但不仅限以下特性：动态交互动画转换3D场景 声音效果

目前推荐测试浏览器:FirefoxGoogle ChromeSafari

本文中、只介绍目前已经基本开发完毕的饼图组件。下面让我们先一睹为快吧！

?

?

构建环境

简直算不上构建，就是Jidea-all.js引入就好了。

?

get started with Jidea

公共代码：?

?
用firefox运行效果如下：

?
用鼠标点击试试：
?
?
?
其他效果：
图例在底端的
没有标签的
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?

Pie3D示例
同样和2D一样，我们需要一个数据源、然后定义基本属性(大小、位置等)、配置图例与标签。不同与2D的就是需要配置厚度(高度)。下面来看代码：
?

用firefox运行效果如下：
?

?
?

用鼠标点击下试试：
?

?
?
?
配置项
类型
说明
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的发布也给我们带来了很多惊喜。更多的知识需要你去探索。有关此文章任何意见与建议请email:taylor@ichartjs.com
?
?
?
项目主页：
http://www.ichartjs.cn/
?

推荐资源
?
国内的就不推荐了～推荐一个有意思的，很多html5的小东西
http://www.jsdo.it 
?
?
?