JavaScript制作网页数据图表/曲线图
2008-11-04 00:52
686 查看
这是几个JS做的,界面一般吧,不过普通的够用,我下篇介绍几个FLASH的,功能好些的
这里面有用JQuery的,wz_jsgraphics,等,看爱好了
高效的数据展示效果,能够让用户很快理解和领悟那些既复杂又索然无味的统计信息。例如,将大数据量的信息点阵化和图表化,或许能够替换掉在网页(或Web应用程序)上以表格形式来表现数据这种古老的方式。目前,已经存在相当多的方案来将统计数据图表化,例如《使用8个CSS技巧来美化统计数据图表》。
但本篇文章将围绕,如何利用JavaScript来制作数据图表,包括曲线图,点阵图,饼图和柱状图等。
Flot ,是IOLA团队在JQuery基础上开发的数据图表JavaScript函数库。Flot不仅使用起来非常简单,而且包含大量的特色功能。例如,它包含一个鼠标控制缩放的特性(可点击并拖拽目标区域)和一些简单的用户交互特性(例如,通过鼠标点击可获取所在目标位置x和y坐标的信息)。
在线演示:不同的图表类型展示
Flotr,是由Solutoire.com的Bas Wenneker 所编写的一套JavaScirpt函数库。Flotr是受Flot的启发,在ProtoType和excanvas.js基础上开发的一套统计数据图表化的解决方案。它支持包括IE 6在内的多种主流浏览器,提供包括数据点信息捕捉,选择和鼠标位置捕捉等多项特色功能。
在线演示:基本功能演示
fgCharting jQuery 插件,是一款表现图表数据非常可行的解决方案。它首先将图表所需信息读取到一个表格结构之中,然后将此表格动态的显示在图表框架中呈现出来。fgCharting支持非传统浏览器浏览数据图表,比如使用screen readers。它最基础的应用只需要短短一行行代码(初始化jQuery插件)即可实现。
在线演示:图表类型页面
PlotKit ,是在Mochikit.基础上开发的图表显示JavaScript函数库,它是在一个名为CanvasGraph.js函数库基础上进行代码重写和结构优化而产生的。我们可以在短时间内迅速上手PlotKit,因为开发者们给我们提供了一个PlotKit快速入门教材。值得注意的是,PlotKit 支持SVG格式。
在线演示:SVG Renderer Tests
JavaScript Diagram Builder,支持各种类型的图表类型数据,包括柱状图,点阵图,曲线图和饼图。开发者提供了一个浏览器测试工具来协助我们检测不同类型的浏览器是否支持某些特定的对象或方法。
在线演示:柱状图对象
Emprise JavaScript Charts,授权给个人用户使用它的所有图表显示功能性代码。
在线演示:区域性图表实例
9817
DynamicDrive,提供了一个基于DHTML/CSS的饼图绘制方案。它的功能非常明确,仅提供了我们两个JS文件:wz_jsgraphics.js和pie.js,用以绘制漂亮的饼图。你所需要做的就是,在文档中直接设置JS或者外部引入JS来定义饼图各部分的值。
DynamicDrive所提供的曲线图代码,是另一个基于DHTML/CSS的线形图绘制方案。它的原理和使用方法与上面我们提到的饼图代码类似。
如果你需要一个三维数据图表,那么Canvas 3D图表肯定是一个不错的选择。请注意,Canvas需要引入excanvas.js来支持IE浏览器的正常显示。
Dojo图表绘制引擎,是在 Dojo Toolkit Javascript函数库基础上开发而来。它支持丰富的图表显示特性,包括数据分析结果的动态显示,3D柱状图和悬停动画触发效果。
在线演示:3D 饼图效果
你在项目中的网页图表显示解决方案是否包含在介绍的例子中呢?如果没有,请留言和大家分享你的方案吧!
这里面有用JQuery的,wz_jsgraphics,等,看爱好了
高效的数据展示效果,能够让用户很快理解和领悟那些既复杂又索然无味的统计信息。例如,将大数据量的信息点阵化和图表化,或许能够替换掉在网页(或Web应用程序)上以表格形式来表现数据这种古老的方式。目前,已经存在相当多的方案来将统计数据图表化,例如《使用8个CSS技巧来美化统计数据图表》。
但本篇文章将围绕,如何利用JavaScript来制作数据图表,包括曲线图,点阵图,饼图和柱状图等。
Flot
Flot ,是IOLA团队在JQuery基础上开发的数据图表JavaScript函数库。Flot不仅使用起来非常简单,而且包含大量的特色功能。例如,它包含一个鼠标控制缩放的特性(可点击并拖拽目标区域)和一些简单的用户交互特性(例如,通过鼠标点击可获取所在目标位置x和y坐标的信息)。
在线演示:不同的图表类型展示
Flotrt图表JavaScript函数库
在线演示:基本功能演示
jQuery的fgCharting插件
fgCharting jQuery 插件,是一款表现图表数据非常可行的解决方案。它首先将图表所需信息读取到一个表格结构之中,然后将此表格动态的显示在图表框架中呈现出来。fgCharting支持非传统浏览器浏览数据图表,比如使用screen readers。它最基础的应用只需要短短一行行代码(初始化jQuery插件)即可实现。
在线演示:图表类型页面
PlotKit
在线演示:SVG Renderer Tests
JavaScript Diagram Builder
JavaScript Diagram Builder,支持各种类型的图表类型数据,包括柱状图,点阵图,曲线图和饼图。开发者提供了一个浏览器测试工具来协助我们检测不同类型的浏览器是否支持某些特定的对象或方法。
在线演示:柱状图对象
Emprise JavaScript Charts
在线演示:区域性图表实例
9817
Dynamic Drive饼图代码
DynamicDrive,提供了一个基于DHTML/CSS的饼图绘制方案。它的功能非常明确,仅提供了我们两个JS文件:wz_jsgraphics.js和pie.js,用以绘制漂亮的饼图。你所需要做的就是,在文档中直接设置JS或者外部引入JS来定义饼图各部分的值。
Dynamic Drive曲线图代码
DynamicDrive所提供的曲线图代码,是另一个基于DHTML/CSS的线形图绘制方案。它的原理和使用方法与上面我们提到的饼图代码类似。
Canvas 3D图表
如果你需要一个三维数据图表,那么Canvas 3D图表肯定是一个不错的选择。请注意,Canvas需要引入excanvas.js来支持IE浏览器的正常显示。
Dojo图表绘制引擎
Dojo图表绘制引擎,是在 Dojo Toolkit Javascript函数库基础上开发而来。它支持丰富的图表显示特性,包括数据分析结果的动态显示,3D柱状图和悬停动画触发效果。
在线演示:3D 饼图效果
你在项目中的网页图表显示解决方案是否包含在介绍的例子中呢?如果没有,请留言和大家分享你的方案吧!
相关文章推荐
- 制作网页数据图表/曲线图【flash版本】
- 2个好用的网页图表制作插件echarts和hightcharts
- javascript制作的网页侧边弹出框思路及实现代码
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第20讲_js基本数据类型_js运算符1_学习笔记_源代码图解_PPT文档整理
- javascript制作网页图片上实现下雨效果
- Java报表软件--如何在报表系统Style Report中制作ABC分析数据图表
- 小猪的Python学习之旅 —— 5.使用Selenium抓取JavaScript动态生成数据的网页
- Android图表控件MPAndroidChart——曲线图LineChart(多条曲线)动态添加数据^a!HsMa0cWDc
- 网页制作之JavaScript部分3--事件及事件传输方式(函数调用 练习题 )重要---持续更新中
- 推荐9款很棒的网页绘制图表JavaScript框架脚本
- Django前端与后台数据交互:用json传输数据到javascript来画hichart图表
- Java抓取网页数据(原网页+Javascript返回数据)
- JavaScript运动框架大集结---拥有JavaScript完美运动框架你将制作任意基于web2.0网页动画
- [转]数据图表制作
- php原生态与百度echarts联合制作数据图表
- 21个实用的Javascript数据图表插件
- JavaScript结合PHP实现网页制作中双下拉菜单的动态实现
- Java抓取网页数据(原网页+Javascript返回数据)
- HTML+CSS+JavaScript网页制作案例教程 PDF
- 无javascript,纯CSS制作的网页下拉菜单