文档章节

利用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

粉丝 21
博文 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

没有更多内容

加载失败,请刷新页面

加载更多

Android适配相关

Android 6.0、7.0、8.0、9.0适配 关于android适配的好文章 Android权限申请库 AndPermission 国产,有中文文档,链式调用,用起来简单 easypermissions 谷歌官方出品 PermissionsDispatcher ...

Skqing
14分钟前
1
0
Google推出了以隐私和安全为中心的变更

作为Google Play开发者政策更新的一部分,Google推出了以隐私和安全为中心的变更。 在旨在保护敏感数据的行动中,有针对请求短信和呼叫记录权限的应用程序的新规则。 即日起,只有配置为默认...

问题终结者
17分钟前
0
0
Kotlin个人理解入门篇

了解kotlin并开始使用其做开发,是从最近之前做的项目开始之初,用的是kotlin,发现kotlin是一个特简洁,很多语法糖提供使用,可以提高开发效率的语言。谷歌在2017年谷歌大会正式宣布支持and...

DannyCoder
22分钟前
0
0
springboot+rabbitmq整合

1.安装好rabbitmq 2.新建一个springBoot项目:rabbitmq_demo 3.添加pom依赖: <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifact......

狼王黄师傅
29分钟前
0
0
使用JDK自带的jmap和jhat监控处于运行状态的Java进程

对于处于运行状态中的Java进程,JDK自带了很多工具,允许Java开发人员监控运行进程中的各种状态,比如该进程内部创建了多少个对象实例,消耗了多少内存,等等。 本文基于JDK1.8而写成。 我下...

JerryWang_SAP
39分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部