文档章节

利用HTML5实现3D动态图表

lgscofield
 lgscofield
发布于 2015/06/26 13:53
字数 281
阅读 39
收藏 0
事先引入:
<script type="text/javascript" src="ichart-1.0.js"></script>

//定义数据
	var data = [
		{name : 'H',value : 7,color:'#a5c2d5'},
	   	{name : 'E',value : 5,color:'#cbab4f'},
	   	{name : 'L',value : 12,color:'#76a871'},
	   	{name : 'L',value : 12,color:'#76a871'},
	   	{name : 'O',value : 15,color:'#a56f8f'},
	   	{name : 'W',value : 13,color:'#c12c44'},
	   	{name : 'O',value : 15,color:'#a56f8f'},
	   	{name : 'R',value : 18,color:'#9f7961'},
	   	{name : 'L',value : 12,color:'#76a871'},
	   	{name : 'D',value : 4,color:'#6f83a5'}
	 ];
	 $(function(){	
		var chart = new iChart.Column2D({
			render : 'canvasDiv',//渲染的Dom目标,canvasDiv为Dom的ID
			data: data,//绑定数据
			title : {text: 'Hello World\'s Height In Alphabet'},//设置标题
			width : 800,//设置宽度,默认单位为px
			height : 400,//设置高度,默认单位为px
			coordinate:{//配置自定义坐标轴
				scale:[{//配置自定义值轴
					 position:'left',//配置左值轴	
					 start_scale:0,//设置开始刻度为0
					 end_scale:26,//设置结束刻度为26
					 scale_space:2,//设置刻度间距
					 listeners:{//配置事件
						parseText:function(t,x,y){//设置解析值轴文本
							return {text:t+" CM"}
						}
					}
				}]
			}
		});
		//调用绘图方法开始绘图
		chart.draw();
	});
	
	//Html代码
	<div id='canvasDiv'></div
>

以上仅仅是一个3D饼图,需要HTML5 的cavas支持,不过对于IE9之前的浏览器,可以引入一个extcanvas.js实现此特性

本文转载自:http://lgscofield.iteye.com/blog/1617434

共有 人打赏支持
lgscofield

lgscofield

粉丝 23
博文 140
码字总数 63036
作品 0
南京
架构师
私信 提问
大爱HTML5 9款超炫HTML5最新动画源码

我们分享过很多漂亮的HTML5动画,包括CSS3菜单、HTML5 Canvas动画等。今天我们精选了9款非常不错的超炫HTML5最新动画及其源码,一起来看看。 1、HTML5可爱的404页面动画 很逗的机器人 很久以...

ruby_chen
2014/04/02
5.4K
5
Flash图表FusionCharts & Open Flash Chart选型分析

对企业而言,选择一款合适的图表控件是一项非常复杂的任务,因为所选择的图表控件不仅要符合目前的需求还需要考虑未来的需求变化因素。所以,在选择Flash图表的时候,你常常需要评估以下几点...

Leamontea
2012/11/30
0
0
8 款别具一格的 jQuery/HTML5 插件

这两年HTML5发展得越来越成熟,许多基于HTML5的应用也日益增多,jQuery又是前段开发利器,jQuery结合HTML5自然能够设计出非常棒的产品,本文介绍8款别具一格的jQuery/HTML5应用插件。 1、HTM...

yykj
2013/11/01
1K
0
分享 7 款超炫的 HTML5 Canvas 3D 动画效果

在以前,想要在浏览器中实现3D动画效果是非常困难的,但是自从HTML5诞生之后,这就变得十分简单了。遗憾的是,目前的浏览器对3D渲染效果还不是非常理想,尤其是渲染速度,可能用chrome和saf...

yykj
2012/11/19
9.3K
0
推荐六款炫酷的HTML5效果插件

1. HTML5 3D图片阴影翻转动画 效果很酷 分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果。这和HTML5 3D动画...

tower1229
06/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

快速开发android,离不开这10个优秀的开源项目

作为一名菜鸡Android,时常瞻仰大佬们的开源项目是非常必要的。这里我为大家收集整理了10个优秀的开源项目,方便我们日常开发中学习! 作者:ListenToCode 博客:https://www.jianshu.com/p...

终端研发部
9分钟前
0
0
MiniUi tab页

architect刘源源
10分钟前
0
0
uitextview中'\n'不能换行的问题

后端返回的类似于这样的东西:'1、Fix bug;\n2、体验优化' 在textview里边是无法换行的,打断点发现 是因为 '\n'被转义成了'\\n'了 思路是replace。。。 _infoTextView.text = [self.info st...

RainOrz
15分钟前
0
0
年底了,该给自己写个总结了,一个六年女Java程序员的心声

简单的先说一下,坐标杭州,12届本科毕业,算上年前在阿里巴巴B2B事业部的面试,一共有面试了有6家公司(因为不想请假,因此只是每个晚上去其他公司面试,所以面试的公司比较少) 其中成功的...

Java架构资源分享
19分钟前
2
0
Shell脚本——cat/EOF输出多行

在某些场合,可能我们需要在脚本中生成一个临时文件,然后把该文件作为最终文件放入目录中。(可参考ntop.spec文件)这样有几个好处,其中之一就是临时文件不是唯一的,可以通过变量赋值,也...

吴伟祥
20分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部