`

利用HTML5实现3D动态图表

阅读更多
事先引入:
<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实现此特性
分享到:
评论

相关推荐

    基于WebGL实现的3D曲面图表组件

    【基于WebGL实现的3D曲面图表组件】是一种利用WebGL技术进行数据可视化的JavaScript开发组件,专门用于创建交互式的3D曲面图。WebGL是一种在浏览器中支持硬件加速的3D图形渲染标准,它允许开发者无需安装任何插件...

    html5手机端统计图表插件

    1. **Canvas元素**:HTML5的Canvas是实现动态图表的关键,它允许通过JavaScript绘制图形。开发者可以通过API来绘制线条、形状、文本等,构建各种复杂的图表。例如,`Chart.js`是一个轻量级的库,利用Canvas绘制出高...

    基于HTML5实现的3D立体动画柱形图表特效源码.zip

    本资源"基于HTML5实现的3D立体动画柱形图表特效源码.zip"聚焦于利用HTML5技术来创建引人注目的3D立体柱状图表动画效果,这对于数据可视化和增强用户体验具有重要意义。 首先,HTML5是现代Web开发的标准,它提供了...

    html5统计图表特效

    HTML5统计图表是一种基于Web的可视化工具,它利用HTML5的新特性,如Canvas、SVG(Scalable Vector Graphics)和WebGL等,为开发者提供了一种高效、动态且交互性强的方式来展示数据。这些图表不仅美观,而且能快速...

    android3D柱形图

    描述中提到的“android 和 html5完美结合”,暗示了可能使用混合开发方式,即利用HTML5来处理一部分图形渲染,然后集成到Android应用中。 1. **Android图形库**:在Android上实现3D柱形图,通常会借助一些图形库,...

    echart实现3D柱状图效果

    ECharts.gl 是 ECharts 的一个扩展库,专门用于3D图表的绘制,它基于 WebGL 技术,能提供高效且逼真的3D视觉效果。 2. **3D柱状图的基本概念** 3D柱状图是在2D柱状图的基础上增加了一个Z轴,使得数据在三维空间中...

    HTML中的3D饼状图

    开发者可以根据数据动态计算各个扇区的角度和位置,并利用库提供的方法绘制3D效果。 4. **数据绑定**:将数据与饼状图的各个部分关联起来,通过改变数据,饼状图的形状和大小也会相应变化,这有助于用户理解数据的...

    3D立体柱状动画图表

    在IT行业中,3D立体柱状动画图表是一种高级的数据可视化技术,它利用现代Web技术如HTML5和CSS3来创建动态、引人入目的图表。3D效果为数据展示带来了更丰富的视觉体验,使得复杂的数据集更加易于理解和解读。本文将...

    3D Chart Html5 Canvas demo

    在IT领域,3D图表是一种将复杂数据可视化的重要工具,特别是在网页开发中,利用Html5 Canvas元素可以创建出交互式的3D图表。本文将深入探讨3D图表在Html5 Canvas中的实现及其相关知识点。 首先,Html5是现代网页...

    基于ichartjs在android上使用HTML5实现各种图表的类库

    在这种情况下,利用HTML5和JavaScript的技术来实现图表功能是一种高效且灵活的方式。Ichartjs是一个开源的JavaScript类库,专门用于创建各种动态图表,它可以在Android应用中通过WebView组件与HTML5结合使用,为...

    基于HTML5 Canvas的3D动态Chart图表的示例

    这个示例展示了如何不依赖外部插件,利用HTML5 Canvas和HT for Web创建美观且动态的3D图表,对于需要自定义图表的场景尤其有用。通过理解这些技术,开发者可以构建出适应各种需求的可视化解决方案。

    PB11.5 动态FLASH图表

    FusionCharts是一套基于JavaScript和Flash的图表解决方案,能够帮助开发者创建丰富多样的2D和3D图表,为数据可视化带来生动的体验。 在PowerBuilder 11.5中,你可以通过以下步骤来实现动态FLASH图表: 1. **安装和...

    JS+CSS3 3D立体环形百分比进度条图表动画特效

    在这款名为"JS+CSS3 3D立体环形百分比进度条图表动画特效"的项目中,开发者利用JavaScript和CSS3的强大力量,创建了一个极具视觉吸引力的3D环形进度条。这个特效不仅提供了实时的百分比显示功能,而且通过3D立体效果...

    Silverlight visifire3D图表

    【Silverlight Visifire3D图表】是一种在Silverlight平台上用于创建动态、交互式2D和3D图表的开源控件。Silverlight是微软推出的一种轻量级的插件技术,用于在网页上构建丰富的、具有图形化效果的用户体验。Visifire...

    echarts结合echarts-gl实现3D飞线地球可视化

    ECharts-GL提供了3D地图、粒子系统、3D柱状图等多种3D图表,其中3D飞线图用于展现地理路径,如航线、航班轨迹等。要实现3D飞线地球,你需要创建一个HTML页面,引入ECharts和ECharts-GL的JavaScript库,并设置一个...

    Flex Chart 图表3D展示

    要深入学习这个3D图表的实现,你需要打开`src`目录下的源代码文件,查看如何使用Flex Chart组件和ActionScript来创建3D效果。通过分析和调试这些代码,你可以了解到更多关于3D图表创建的细节和技巧。同时,掌握...

    html,css实现各式各样的炫酷图表,折线图,柱形图(2D、3D)饼图.....

    4. **3D图表**:3D图表为数据可视化带来了更丰富的视觉效果,增加了立体感。尽管可能对数据解读造成一定影响,但在某些场合下,如产品展示或报告中,3D效果能提升图表的吸引力。实现3D效果可能需要用到JavaScript库...

    3D饼状图,3D阶梯图,three.js实现

    在IT领域,可视化技术是数据分析和展示的重要工具,其中3D图表因其立体感和直观性而备受青睐。本文将深入探讨如何使用JavaScript库three.js来实现3D饼状图和3D阶梯图。 首先,我们要了解`three.js`。这是一个强大的...

Global site tag (gtag.js) - Google Analytics