【HTML5活动】利用Html5 Canvas构建交互式图形报表
---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
- jidea0.9_α_c.rar (38.2 KB)
- 描述: 本文示例代码
- 下载次数: 156
上一篇： Android终于放慢了脚步
下一篇： js实现无缝轮播图特效