文档章节

利用HTML5实现3D动态图表

lgscofield
 lgscofield
发布于 2015/06/26 13:53
字数 281
阅读 38
收藏 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

粉丝 20
博文 140
码字总数 63036
作品 0
南京
架构师
Flash图表FusionCharts & Open Flash Chart选型分析

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

Leamontea
2012/11/30
0
0
推荐六款炫酷的HTML5效果插件

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

tower1229
06/26
0
0
炫酷实用 7款jQuery/HTML5图片应用

jQuery非常强大,我们这里有很多关于jQuery焦点图的插件,今天我们精选了7款利用jQuery和HTML5实现的超炫酷图片特效应用,有些也是焦点图插件,一起来看看吧。 1、HTML5 3D衣服摆动特效 超酷...

老鸟的空间
2014/07/05
0
0
超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员
04/25
0
0
使用JavaScript/HTML5 Charts创建3D柱状图

JavaScript/HTML5 Charts是amCharts下的一款JS图表控件,它支持多种图表类型和浏览器,是移动图表开发利器。今天为大家介绍一下如何用JavaScript/HTML5 Charts创建简单的3D柱状图,以下是详细...

牛奶哎营养
2013/12/17
0
3

没有更多内容

加载失败,请刷新页面

加载更多

下一页

vue+element-ui操作删除(单行和批量删除)

页面展示: <template><!-- 表格内容 --><el-table :data="packData" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange"><el-tab......

琴妹
8分钟前
0
0
基于vue(element ui) + ssm + shiro 的权限框架

zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目,网上有句话说,语言框架...

DarrenHu_吴邪
15分钟前
0
1
数据库水平切分(MyCat分片)

范围分片 io.mycat.route.function.AutoPartitionByLong 自动范围分片 Function名称:rang-long(配置文件默认) 枚举分片 io.mycat.route.function.PartitionByFileMap 枚举分片 Funtion名称...

这很耳东先生
16分钟前
0
0
读《HeadFirst设计模式》笔记之外观模式

外观模式:提供了一个统一的接口,用来访问子系统中的一群接口。外观定义了一个高层接口,让子系统更容易使用。 举个栗子: 建了一个家庭影院,但是每次享受家庭影院时,你发现需要执行 将灯...

suyain
18分钟前
0
0
MongoDB分片配置

简单注解: mongos 路由进程, 应用程序接入mongos再查询到具体分片,监听端口默认27017 config server 路由表服务, 每一台都具有全部chunk的路由信息 shard为数据存储分片, 每一片都可以是...

LUIS1983
25分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部