“JQuery+CSS3”技术在网页交互式图表中的运用与实现

开篇：润墨网以专业的文秘视角，为您筛选了一篇“JQuery+CSS3”技术在网页交互式图表中的运用与实现范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！

摘要：随着网络技术的迅猛发展，网页交互式图表以其直观性、精准性、交互性和实时性，已成为许多企事业单位统计数据的首要选择。当前，JQuery和CSS3是网页制作的两个主流技术，二者的融合正引领着网页前端开发的革命。本文运用了JQuery的“Flot”绘图插件实现了一个网页交互式图表的构建，再运用CSS3对图表的样式进行美化，充分展现了“jquery+css3”强大的特效。

关键词：JQuery CSS3 网页交互式图表

中图分类号：TP311.52 文献标识码：A 文章编号：1007-9416（2016）11-0253-02

网页交互式图表是一种为实现智能化的、直观展示统计信息属性的、对知识挖掘和信息直观生动起关键作用的、会根据统计信息的变化在浏览器中动态显示的图形结构，即图表数据动态化和图表形式动态化，从而提升图表的实际使用价值。本文将运用jQuery和CSS3两种技术，实现网页交互式图表的创建。

1 jQuery和CSS3技术的简单介绍

JQuery，顾名思义，即是JavaScript和查询（Query），是辅助JavaScript开发的库。它是目前使用最广泛的JavaScript的函数库，它兼容各种浏览器，能够快速简单地编写可扩展和兼容性强的JavaScript代码，而且能很好的控制CSS3样式。JQuery有着许多成熟的插件可供用户选择，让用户能更方便地处理HTML，用户不需要在HTML里插入很多JS来调用命令了，只需要定义id即可，即用少量的代码来实现丰富的功能。

CSS即层叠样式表，它用于控制网页页面的布局和字体、颜色、背景等网页的样式，以打造完美的网页外观和格式。CSS3是CSS技术的升级版本，具有向下兼容性，它将以前的旧规范进一步模块化，拆分成一些小的模块，同时，还加入了选择器、盒模型、背景和边框、文字特效、2D/3D转换、多列布局等新模块。

2 使用jQuery和CSS3创建一个网页交互式图表

本文使用jQuery的Flot图表插件来创建网页交互式图表。Flot是一个基于JavaScript和jQuery纯客户端的脚本库，主要支持线状图和柱状图的绘制，具有使用简单、图形美观特点，支持鼠标跟踪及缩放功能。

下面，我们将分步骤介绍如何使用jQuery和CSS3创建一个网页交互式图表。

第一步：从jQuery官网下载jQuery库文件和Flot文件至本地计算机，并在页面头部引用以下脚本。

第二步：在页面中创建html标记。

//底层图表容器

//图表信息类

//线状图按钮

Rbuttons //线状图按钮

第四步：设置图表的CSS3样式，这里列举了部分样式。

//清除浏览器的默认设置

.gcontainer，

.gcontainer div，

.gcontainer a， {margin： 0； padding： 0；}

//设置gcontainer CSS3样式

.gcontainer {

position： relative； width： 550px； height： 300px； padding： 20px；

box-shadow： 0px 1px 2px rgba（0，0，0，.1）； //阴影 }

.gcontainer > div {

position： absolute； width： inherit； height： inherit； top： 10px； left： 25px；}

.ginfo {

width： 590px； margin-bottom： 10px；}

第五步：添加鼠标移动至图表区域，自动显示数据的效果。

function showTooltip（x， y， contents） {

$（'' + contents + '