文档章节

利用HTML5实现3D动态图表

lgscofield
 lgscofield
发布于 2015/06/26 13:53
字数 281
阅读 73
收藏 0

精选30+云产品,助力企业轻松上云!>>>

事先引入:
<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实现此特性
lgscofield

lgscofield

粉丝 24
博文 141
码字总数 63275
作品 0
南京
架构师
私信 提问
加载中
请先登录后再评论。
大爱HTML5 9款超炫HTML5最新动画源码

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

ruby_chen
2014/04/02
5.6K
5
15个无比华丽的HTML5/CSS3动画应用

1、HTML5/CSS3图片选择动画 可选择多张图片 今天我们来分享一款既炫酷又实用的HTML5图片选择特效,当图片被选中时,图片上就会覆盖一个半透明的层,上面有一个勾,并且在选中的时候图片出现弹...

jxpxwh
2014/11/06
3
0
炫酷霸气的HTML5/jQuery应用及源码

也许在5年前,HTML5还是一种很前卫的技术,大家还只是将它当做实验来看待,更别说产品应用了。但是现在HTML5已经非常流行,无论从PC端还是移动端,HTML5都扮演着非常重要的角色。今天我们要分...

jxpxwh
2014/08/26
2
0
2019TeeChart图表资源合集(文章教程、示例和视频)

Steema是全球领先的图表类控件公司,而TeeChart是Steema公司研发的TeeChart for .NET、TeeChart Pro ActiveX 等一系列图表控件简称。想要熟练掌握此系列控件,网上的教程是很多的,但是大多很...

yuyuyuyo
2019/10/30
22
0
十款效果惊艳的HTML5应用和源码

1、纯CSS3实现打火机火焰动画 这又是一款很酷的纯CSS3动画特效,它是一个可以点燃的打火机,当你用鼠标滑过这只打火机时,打火机就会打开,然后开始出现火焰燃烧的动画特效。另外要说明的是,...

IT小香猪
2015/03/12
119
0

没有更多内容

加载失败,请刷新页面

加载更多

Java中C ++ Pair 的等价物是什么? - What is the equivalent of the C++ Pair in Java?

问题: Is there a good reason why there is no Pair<L,R> in Java? 有没有一个很好的理由说明Java中没有Pair<L,R> ? What would be the equivalent of this C++ construct? 这个C ++构造的......

富含淀粉
13分钟前
10
0
在Swift中将字符串拆分成数组? - Split a String into an array in Swift?

问题: Say I have a string here: 说我在这里有一个字符串: var fullName: String = "First Last" I want to split the string base on white space and assign the values to their res......

javail
43分钟前
12
0
中国饭店协会数据表明

记者了解到,中国饭店协会数据表明,2018年全国餐饮收入42716亿元,同比增长9.5%.根据国家统计局数据显示,截至2017年底,限额以上餐饮行业的从业人数达到2232万人,巨大的餐饮市场背后,餐饮行业的...

asd369
今天
35
0
OSChina 周六乱弹 —— 日本的丧尸光天化日之下都开始……

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: 《風の手枕》- 増田俊郎 手机党少年们想听歌,请使劲儿戳(这里) @码界农民工 :...

小小编辑
今天
55
0
Hacker News 简讯 2020-07-11

更新时间: 2020-07-11 04:01 Investors say agroforestry is climate friendly and also profitable - (mongabay.com) 投资者表示,农林复合林对气候友好,而且也有利可图 得分:86 | 评论:52...

FalconChen
今天
163
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部