---Html5 将进行一次WEB 革命,很显然,你我都在这次革命中,我想你我都不会是旁观者,而是参与者。
前言
在html5 之前,网页上绚丽的动画大多是flash 的杰作,画图也可能是SVG 或者VML 。但是都不能真正的跨平台。html5 横空出世将改变这一现状。本文将介绍一款正在研发中的开源项目 ichartjs 的一个实例。也通过这个实例来展现一下Html5 canvas 的威力。
简介
ichartjs 目前还处于开发阶段,还有很多需要完善的地方。当然现在还有一些没有fixed 的bug 。今天偶然看到iteye 的这个活动,就先把目前的一个小demo 展示给大家看看吧。与大家交流一下。同时接受广大开发者的意见与建议。
ichartjs 是一个利用html5 canvas 的一个图表类组件。书写风格上类似ExtJs 。可以在页面上根据配置的数据动态的生成你想要的图形,并且有着绚丽的效果。其中将会包括但不仅限以下组件:
- 饼图
- 柱状图
- 条状图
- 折线图
- 仪表图
- 散点图
包含但不仅限以 下特性:
- 动态交互
- 动画转换
- 3D 场景
- 声音效果
目前推荐测试浏览器:
- Firefox
- Google Chrome
- Safari
本文中、只介绍目前已经基本开发完毕的饼图组件。下面让我们先一睹为快吧!
构建环境
简直算不上构建,就是Jidea-all.js 引入就好了。
get started with Jidea
公共代码:
data.js: var data = [{ name : '广州', value : 80, color:'#b36e0d' },{ name : '上海', value : 130, color:'#b32c0d' },{ name : '南昌', value : 75, color:'#dad81f' },{ name : '哈尔滨', value : 25, color:'#1f7e92' },{ name : '北京', value : 105, color:'#17a740' } ];
Pie2D示例
我们需要一个数据源、然后定义基本属性( 大小、位置等) 、配置图例与标签。就这么简单。下面来看代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Sample-pie2D</title> <meta name="Description" content="" /> <meta name="Keywords" content="" /> <script type="text/javascript" src="../core/jidea-all.js"></script> <script type="text/javascript" src="data.js"></script> <style type="text/css"> body{ margin-top:10px; text-align: center; } </style> </head> <body> <div>Sample</div> <br> <canvas id='myCanvas' width="800" height="600">您的浏览器不支持Canvas</canvas> <script type="text/javascript"> var pie2d = new Jidea.Pie2D({ j_canvas : 'myCanvas', j_data: data, j_title : '我和HTML 5的那点事儿-Pie2D', j_width : 700, j_height : 500, j_radius:140 }); //开始画图 pie2d.draw(); </script> </body> </html>
用firefox运行效果如下:
用鼠标点击试试:
其他效果:
图例在底端的
没有标签的
Pie3D示例
同样和2D一样,我们需要一个数据源、然后定义基本属性( 大小、位置等) 、配置图例与标签。不同与2D的就是需要配置厚度(高度)。下面来看代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Sample-pie3D</title> <meta name="Description" content="" /> <meta name="Keywords" content="" /> <script type="text/javascript" src="../core/jidea-all.js"></script> <script type="text/javascript" src="data.js"></script> <style type="text/css"> body{ margin-top:10px; text-align: center; } </style> </head> <body> <div>Sample</div> <br> <canvas id='myCanvas' width="800" height="600">您的浏览器不支持Canvas</canvas> <script type="text/javascript"> var pie3d = new Jidea.Pie3D({ j_canvas : 'myCanvas', j_data : data, j_title : '我和HTML 5的那点事儿-Pie3D', j_width : 700, j_height : 400, j_yheight:60,//设置了pie的厚度 j_radius:180 }); pie3d.draw(); </script> </body> </html>
用firefox运行效果如下:
用鼠标点击下试试:
为了广大童鞋测试用,提供可测试的配置项(此配置仅用于本文附件中的代码)
Pie 可用配置
配置项 |
类型 |
说明 |
j_height |
数字 |
画布高度 |
j_width |
数字 |
画布宽度 |
j_zrotate |
数字 |
仅3D 可用,{ 范围:(0~90]} z 轴旋转角度 |
j_yheight |
数字 |
仅3D 可用,Pie 的厚度 |
j_padding |
数字 |
内边距 |
j_offsetx |
数字 |
X 轴偏移量 |
j_offsety |
数字 |
Y 轴偏移量 |
j_radius |
数字 |
圆半径 |
j_background_color |
字符串 |
背景颜色 格式:#ffffff |
j_align |
字符串 |
对齐方式,可选left,center,right |
j_title |
字符串 |
标题 |
j_title_align |
字符串 |
标题对齐方式 |
j_legend |
Object |
图例配置,参见图例配置 |
j_label |
Object |
标签配置,参见标签配置 |
j_border |
Object |
外边框配置,参见外边框配置 |
图例配置
配置项 |
类型 |
说明 |
j_enable |
Boolean |
图例是否可用 |
j_border |
Object |
外边框配置,参见外边框配置 |
j_column |
数字 |
图例分几列显示 |
j_background_color |
字符串 |
背景颜色 格式:#ffffff |
j_sign |
字符串 |
图例小图标样式,可选round, square |
标签可用配置
配置项 |
类型 |
说明 |
j_enable |
Boolean |
图例是否可用 |
j_border |
Object |
外边框配置,参见外边框配置 |
j_column |
数字 |
图例分几列显示 |
j_background_color |
字符串 |
背景颜色 格式:#ffffff |
j_sign |
字符串 |
图例小图标样式,可选round, square |
边框可用配置
配置项 |
类型 |
说明 |
j_width |
数字 |
边框宽度 |
j_round |
数字 |
弧度,即是边框是圆弧状的,若为0 ,则为矩形 |
关于此例子
由于此例子是2011年发布的,现在项目已经经过很多此更新了,所以此例子中的代码仅限与附件中的js库,如果下载了最新的代码,请参照官方的例子与API。
后记:
ichartjs目前还处于开发阶段,还有很多需要完善的地方,不过通过本文的例子、我们基本能了解到html5的威力、但这仅仅是html5其中的一个特性。而且目前有很多html5的JS库可用。3D方面WebGL的发布也给我们带来了很多惊喜。更多的知识需要你去探索。
推荐资源
国内的就不推荐了~推荐一个有意思的 , 很多html5的小东西
http://www.jsdo.it
相关推荐
综上所述,ASP.NET结合HTML5能构建出强大且富有互动性的图形报表,利用C#进行后端处理,HTML5和JavaScript处理前端展示,为用户提供直观的数据分析工具。无论是企业内部的决策支持,还是对外的数据展示,都是理想的...
HTML5报表不仅提供了一种展示数据的新方式,还允许用户通过交互式元素进行深度探索。这些示例可能是由RGraph库创建的,RGraph是一个用纯JavaScript编写且兼容HTML5的图表库,能够生成各种复杂的图表,如柱状图、饼图...
在“基于HTML5的报表插件”中,我们主要探讨的是如何利用这些技术来创建交互式、响应式的报表,提升用户体验。 iChartjs是这个主题中的核心组件,它是一个专门针对HTML5设计的数据图表库。iChartjs提供了多种图表...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式用户体验。在这个"HTML5 Canvas矩形统计图走势图.zip"中,我们看到的是利用Canvas API创建的一个统计图表,特别...
随着HTML5技术的发展,开发者可以利用这些插件在不需要任何桌面软件或插件的情况下,直接在浏览器中创建交互式、美观的图表。 HTML5的核心优势在于其跨平台兼容性,它支持多种操作系统和浏览器,如Android、iOS、...
总结来说,zrender是一个强大的Canvas绘图工具,它提供了MVC架构、数据驱动机制、类DOM事件模型等特性,使得在Web上构建复杂的图形报表和交互式应用变得更加便捷。通过对"zrender-master"的探索,开发者可以获取更多...
HTML5和SVG(Scalable Vector Graphics)是现代网页开发中的核心技术,它们在创建动态、交互式的图表方面具有显著优势。阶梯图表,也称为条形阶梯图,是一种用于展示连续数据变化的有效方式,尤其适用于显示数据在...
HTML5是现代网页开发的标准,它提供了许多强大的功能,如Canvas元素,用于绘制图形;SVG(可缩放矢量图形)用于创建高质量的矢量图像;以及WebGL,支持在浏览器中进行3D图形渲染。这些特性使得HTML5成为构建数据可视...
在本项目中,“Highcharts实现图形报表”旨在利用Highcharts的功能,构建出各种类型的柱状图表,包括对比图、级别图和单一柱形图,以满足数据分析和展示的需求。 首先,我们要了解Highcharts的基本用法。在HTML页面...
CanvasJS 是一个强大的JavaScript库,专门用于在网页上创建交互式的图表和图形。这个压缩包“canvasjs-2.3.2(1)_canvasjs_”包含的是CanvasJS的2.3.2版本,该版本可能包含了修复的问题、优化的性能以及新增的功能。 ...
4. 表格和图表:用于展示数据,如数据统计、报表分析,可能利用了HTML5的canvas或svg元素。 5. 表单元素:用于数据输入和编辑,如文本框、复选框、下拉列表等,支持验证和提交。 6. 图标库:提供各种图标以增强视觉...
4. 画布:<canvas>元素提供了JavaScript进行动态图形绘制的能力,允许开发者创建交互式图形、游戏和其他复杂的视觉效果,极大地扩展了网页的动态表现力。 5. 可编辑内容、拖放:属性允许用户直接在网页上编辑内容,...
x-spreadsheet-master是一款基于JavaScript的开源在线表格组件,利用HTML5的canvas技术进行绘制,提供了一种轻量级且高效的数据编辑和展示解决方案。Canvas作为HTML5的一个重要元素,允许开发者在网页上动态渲染图形...
通过监听Canvas的Paint事件,开发者可以动态更新图表数据,实现交互式报表。 4. 数据绑定:为了使图表与SWT表格或其他组件的数据同步,开发者需要实现数据绑定机制。这可以通过监听数据源的变化,或者使用第三方库...
总而言之,这个HTML5流量统计后台管理模板为开发高效、直观的统计类后台系统提供了便利,通过利用HTML5的优势,可以快速构建出符合现代需求的管理界面,提升工作效率。无论你是独立开发者还是团队的一员,都可以根据...
在开发过程中,开发者可能会用到像Ajax进行异步数据加载,利用HTML5的Canvas或SVG进行图形绘制,使用Web Storage或IndexedDB实现本地数据存储。此外,考虑到移动设备的性能和网络条件,性能优化也是关键,如减少HTTP...
在这个资源中,提供了75套数据可视化源码,涵盖了多种展示需求,可以帮助开发者快速构建动态、交互式的报表工具。常见的数据可视化应用场景有业务监控,通过实时更新的图表展示关键业务指标;风险预警,通过颜色或...
通过`line.html`加载和配置图表,`swfobject.js`(如果使用旧版本)处理Flash集成,`amline.swf`(同样针对旧版本)呈现图表,以及`line_data.xml`和`line_settings.xml`分别存储数据和配置,我们可以构建出交互式且...
HTML特效是指通过JavaScript、CSS等技术在HTML页面中创建的各种交互式和视觉效果。在这个案例中,EASY饼图可能利用了HTML5的canvas元素或SVG(Scalable Vector Graphics)来绘制饼图,并通过JavaScript进行动态更新...
3. **jQuery Flot**:jQuery Flot是一款基于jQuery的数据绘图插件,它利用HTML5的canvas元素进行绘图。Flot的优点在于其轻量级、兼容性和强大的社区支持,能处理大量数据并提供丰富的图表功能。饼图在Flot中同样可以...