wanghetommy

浏览: 30631 次
性别:
来自: 北京

最近访客更多访客>>

rouxiaoxiao

哎斯哆

woniuwow

wweiwei1212

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

HTML5

---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活动】利用Html5 Canvas构建交互式图形报表

前言

简介

包含但不仅限以下特性：

目前推荐测试浏览器:

构建环境

get started with Jidea

公共代码：

Pie2D示例

Pie3D示例

为了广大童鞋测试用，提供可测试的配置项(此配置仅用于本文附件中的代码)

Pie 可用配置

图例配置

标签可用配置

边框可用配置

关于此例子

后记：

推荐资源

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

前言

简介

包含但不仅限以 下特性：

目前推荐测试浏览器:

构建环境

get started with Jidea

公共代码：

Pie2D示例

Pie3D示例

为了广大童鞋测试用，提供可测试的配置项(此配置仅用于本文附件中的代码)

Pie 可用配置

图例配置

标签可用配置

边框可用配置

关于此例子

后记：

推荐资源

评论

发表评论

相关推荐

ichartjs导出图片

Android某些机型WebView中Canvas的destination-over兼容问题

利用ichartjs绘制风向风力图

利用iChart.create方法创建ichartjs图表

ichartjs图表设置自定义字体单位

ichartjs开源技术小组正式发布1.2版本

ichartjs开源技术小组正式发布1.1版本

ichartjs开源技术小组正式发布1.1版本

HTML5之在线图表设计器

Pie可用配置

最近访客更多访客>>

包含但不仅限以下特性：