采用 ajax + vml 制作一个柱状图报表

最新推荐文章于 2025-08-07 15:01:31 发布
最新推荐文章于 2025-08-07 15:01:31 发布 · 85 阅读 · 0
文章标签：

#Ajax #Servlet #IE #Go #Cache

本文介绍了一种使用AJAX和VML技术实现实时更新动态柱状图的方法。通过一个简单的Servlet获取随机数据，并利用HTML页面上的AJAX请求将这些数据显示为动态更新的柱状图。

备份一个有意思的小东西：动态柱状图,采用ajax + vml。
vml是微软在IE5中就支持的矢量图技术。采用xml的格式来生成矢量图，这为我们在页面上生成高质量的图像提供了
很好的支持。另：虽然SVG很好，但IE不支持（不安装插件的话）。
程序很简单：
一个servlet：采集数据（仅仅随机产生一个数组）。
一个html页面：采用ajax从servlet得到数据，然后用vml生成图表。由于采用了ajax，页面是不刷新的实时得到数据。

1: servlet：PingServlet.java

packageco.vml.servlet;
importjava.io.IOException;
importjava.io.PrintWriter;

importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
/***//**
*@version1.0
*@author
*/
publicclassPingServletextendsHttpServlet
...{

/***//**HandlestheHTTP<code>GET</code>method.
*@paramrequestservletrequest
*@paramresponseservletresponse
*/
protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException...{
Stringtask=request.getParameter("task");
StringBufferresBuf=newStringBuffer();

if(task.equals("poll"))...{
for(inti=0;i<6;i++)
...{
longcounter=Math.round(Math.random()*10)+1;
System.out.println(i+"--"+counter);
resBuf.append("<percent>"+counter+"</percent>");
}

}

PrintWriterout=response.getWriter();
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-cache");
out.println("<response>");
out.println(resBuf.toString());
out.println("</response>");
out.close();
}

/***//**HandlestheHTTP<code>POST</code>method.
*@paramrequestservletrequest
*@paramresponseservletresponse
*/
protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException...{
doGet(request,response);
}

/***//**Returnsashortdescriptionoftheservlet.
*/
publicStringgetServletInfo()...{
return"Shortdescription";
}
}

2: html页面(ajax + vml)

<HTMLxmlns:v>
<HEAD>
<METAhttp-equiv="Content-Type"content="text/html;Charset=gb2312">


<STYLE>...
td{...}{
font-size:12px
}

body{...}{
font-size:12px
}

v:*{...}{
behavior:url(#default#VML);
}

</STYLE>

</HEAD>

<script>...
varxmlHttp;
functioncreateXMLHttpRequest()
...{
if(window.ActiveXObject)
...{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}
elseif(window.XMLHttpRequest)
...{
xmlHttp=newXMLHttpRequest();
}
}

functiongo()
...{
setTimeout("pollServer()",2000);
}


functionpollServer()
...{
createXMLHttpRequest();
varurl="../PingServlet?task=poll";
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=pollCallback;
xmlHttp.send(null);
}



functionpollCallback()
...{
if(xmlHttp.readyState==4)
...{
if(xmlHttp.status==200)
...{
vararray1=newArray(6);
for(i=0;i<6;i++)
...{
array1[i]=parseInt(xmlHttp.responseXML.getElementsByTagName("percent")[i].firstChild.data);
}

array2=newArray(16,14,10,16,5,8);
draw(array1);
setTimeout("pollServer()",2000);
}
}
}



functiondraw(array1)
...{
allstr=array1[0]+array1[1]+array1[2]+array1[3]+array1[4]+array1[5];
varstr="";
for(i=0;i<=5;i++)
...{
mathstr=Math.round(100/(allstr/array1[i]))
str=str+"<v:rectfillcolor='lime'style='width:20;color:navy;height:"+
5000/(1000/mathstr)+"'><br>&nbsp;%"+
mathstr+"<br>"+
array1[i]+"<v:Extrusionbackdepth='15pt'on='true'/></v:rect>";

}

varmyDraw=document.getElementById("mydiv");
myDraw.innerHTML=str;
}


</script>

<bodybgcolor=eeeeeestyle='border:0solideeeeee'>
<inputid="go"name="run"type="button"value="run"onClick="go();">
<divwidth="900"id="mydiv">
</div>

</BODY>
</HTML>
iteye_19871
关注
Echarts通过Ajax动态获取后端数据（条形图、饼图）
echo_1510的博客
04-13 6639
1. 后端-Controller层 传的是List型数据 /** * 按客户所在城市统计————饼图 * @param model * @return */ @RequestMapping("/show") @ResponseBody public List<Echarts> show(Model model) ...
Echarts+ajax+java+mysql实现饼图+折线图+柱状图
07-13
Echarts是一个基于SVG/VML/Canvas的高性能、跨浏览器、跨平台的图表库，支持多种图表类型，如折线图、柱状图、饼图、散点图等。它提供了一套完整的API和交互设计，使得开发者能够方便地进行图表配置和定制，实现...
jquery_ajax实现案例（SSM框架）
01-03
jquery ajax实现步骤，word文档记录方式，里面放有步骤代码(可适用于是ssm框架)
SSM+Echarts+Mysql实现的从数据库获取数据展示图表的小demo
03-17
用SSM框架实现的echarts展示图表的小demo，使用的开发工具是eclipse，数据库是mysql。文件中包含项目源码，对应的数据库，以及项目运行后实现的图表截图（含url）。项目本人亲测，可完美展示图表，若有疑问，可Email我，Email：bpcforevery@gmail.com 。（ps:本人在另一个上传的文件中实现了用Servlet框架实现的echarts展示图表的小demo，使用的数据库也是mysql，感兴趣的可以去看看=-=）。
EChats+Ajax之柱状图的数据交互
祈澈菇凉
03-28 2037
原文链接：https://blog.youkuaiyun.com/qq_37936542/article/details/79723710一：下载 echarts.min.js选择完整版进行下载，精简版和常用版限制的某些功能二： echats入门案例1、引入 ECharts 和 JQuery[html] view plain copy &lt;script src="https://code.jquery.c...
Echart实现从数据库获取数据展示图表（结合Servlet和SSM实现的两种实例）
热门推荐
Stay hungry,stay young
03-17 1万+
使用Echarts实现从数据库获取数据进行展示(结合servlet和SSM框架实现的两种实例)。
采用 ajax + vml 生成柱状图报表
李哥在javaeye
05-17 149
备份一个有意思的小东西：动态柱状图,采用ajax + vml。 vml是微软在IE5中就支持的矢量图技术。采用xml的格式来生成矢量图，这为我们在页面上生成高质量的图像提供了 很好的支持。另：虽然SVG很好，但IE不支持（不安装插件的话）。 程序很简单： 一个servlet：采集数据（仅仅随机产生一个数组）。 一个html页面：采用ajax从servlet得到数据，然后用vml生成图表。由于采用了...
Highcharts下载与使用_数据报表图
weixin_34250434的博客
04-22 319
Highcharts简介 Highcharts:功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库 Highcharts是一款纯javascript编写的图表库，能够很简单便捷的在Web网站或Web应用中添加交互性的图表，Highcharts目前支持直线图、曲线图、面积图、柱状图、饼图、散点图等多达18种不同类型的图表，可以满足你对Web图表的任何需求 ！ 由于其功能强大、...
图表插件
zjxbllg2008的专栏
01-31 582
一. Highcharts 支持的图表：曲线图，柱状图，饼状图，区域图，散状点图，综合图表。 浏览器支持：采用纯JavaScript编写，兼容所有的浏览器，Safari、IE6+、火狐和Chrome包括iphone等 功能特性： 1. 包含一些预定义的主题和图表，界面美观，运行速度快，动态交互不错，有很好的兼容性。 2. 不受语言约束：可以在大多数的WEB开发中使用，对个人用户免费，支持...
Highcharts 基于web的纯javascript图表库
Lity丶Le 的专栏
03-03 2307
背景 本文主要是作为Highcharts的入门级介绍。和大家分享这个好用的图标库，详情使用方法请访问http://www.highcharts.me/ Highcharts简介 Highcharts是一款纯Javascript图表库，让开发者很容易在Web网站、Web应用中创建交互性的图表。Highcharts目前支持line , spline, area, areaspline, colu
Highcharts js 图形报表
07-24
- **Highcharts JS**: 是一个基于JavaScript的开源图表库，使用SVG（ Scalable Vector Graphics）技术进行渲染，同时也支持老版本的IE浏览器通过VML进行渲染。 - **图形报表**: 指通过图表形式展示的数据报告，如...
Highcharts&Highstock中文API使用指南
weixin_35756130的博客
08-07 788
Highcharts是一个易于使用、功能强大的JavaScript图表库，适用于Web应用程序，可以轻松地在网页上实现美观的数据可视化图表。Highcharts是基于HTML5的SVG技术构建的，它不需要任何外部插件即可在所有主流浏览器上运行。Highstock则是在Highcharts的基础上进一步开发的，它特别针对时序数据的展示进行了优化。Highstock提供了一整套用于构建股票图和高级时间序列图的工具，是金融、股票市场等需要高精度时间轴的领域不可或缺的工具。
实现IE浏览器兼容的javaScript报表使用VML技术指南
2. **报表图形的绘制**：当需要在报表中展示复杂的图表（如饼图、折线图、柱状图等）时，可以通过JavaScript动态生成，并利用VML来绘制和展示。 3. **兼容性要求的项目**：在一些对兼容性要求极高的项目中，可能...
FusionCharts在Eclipse中的柱状图与饼图实例
本文结合“FusionCharts 例子 在eclipse下制作”这一主题，深入剖析如何在 Eclipse 集成开发环境（IDE）中使用 Java 技术栈构建一个完整的 Web 应用程序，并集成 FusionCharts 实现柱状图与饼图的展示。该案例不仅...
HighCharts.js图表库包：支持折线图、柱状图、饼图等可视化设计
从标题“highChart包（含HighCharts.js,可引用设置折线图、柱状图、柱状图、饼图等）”可以看出，该压缩包提供了一个完整的 HighCharts 使用环境，包含了必要的核心脚本文件 HighCharts.js，使得开发者可以直接引入...
ACM-ICPC/CCPC/XCPC算法竞赛资料kmeans聚类
12-18
ACM-ICPC/CCPC/XCPC算法竞赛资料kmeans聚类
【CAOA三维路径规划】基于matlab鳄鱼伏击算法CAOA多无人机协同集群避障路径规划（目标函数：最低成本：路径、高度、威胁、转角）（Matlab代码实现）
最新发布
12-18
【CAOA三维路径规划】基于matlab鳄鱼伏击算法CAOA多无人机协同集群避障路径规划（目标函数：最低成本：路径、高度、威胁、转角）（Matlab代码实现）内容概要：本文介绍了基于Matlab的鳄鱼伏击算法（CAOA）在多无人机协同集群三维路径规划中的应用，重点解决动态环境下的避障问题。该方法以最低成本为目标函数，综合考虑路径长度、飞行高度、威胁等级和转弯角度等因素，通过优化算法实现无人机集群的安全、高效路径规划。文中提供了完整的Matlab代码实现，便于科研人员复现与改进，适用于复杂环境下的无人机协同任务。; 适合人群：具备一定Matlab编程基础，从事无人机路径规划、智能优化算法或协同控制研究的研究生、科研人员及工程技术人员。; 使用场景及目标：①研究多无人机在复杂三维环境中的协同避障路径规划；②验证和改进鳄鱼伏击算法（CAOA）在实际路径规划中的性能；③实现以最低综合成本为目标的智能路径优化，提升无人机集群的任务执行效率与安全性。; 阅读建议：建议读者结合提供的Matlab代码进行实践操作，深入理解目标函数构建、约束条件处理及算法迭代过程，同时可尝试将算法扩展至更多动态障碍物或更大规模无人机集群场景中进行测试与优化。
基于径向基函数神经网络RBFNN的自适应滑模控制学习（Matlab代码实现）
12-18
基于径向基函数神经网络RBFNN的自适应滑模控制学习（Matlab代码实现）内容概要：本文介绍了基于径向基函数神经网络（RBFNN）的自适应滑模控制方法，并提供了相应的Matlab代码实现。该方法结合了RBF神经网络的非线性逼近能力和滑模控制的强鲁棒性，用于解决复杂系统的控制问题，尤其适用于存在不确定性和外部干扰的动态系统。文中详细阐述了控制算法的设计思路、RBFNN的结构与权重更新机制、滑模面的构建以及自适应律的推导过程，并通过Matlab仿真验证了所提方法的有效性和稳定性。此外，文档还列举了大量相关的科研方向和技术应用，涵盖智能优化算法、机器学习、电力系统、路径规划等多个领域，展示了该技术的广泛应用前景。; 适合人群：具备一定自动控制理论基础和Matlab编程能力的研究生、科研人员及工程技术人员，特别是从事智能控制、非线性系统控制及相关领域的研究人员； 使用场景及目标：①学习和掌握RBF神经网络与滑模控制相结合的自适应控制策略设计方法；②应用于电机控制、机器人轨迹跟踪、电力电子系统等存在模型不确定性或外界扰动的实际控制系统中，提升控制精度与鲁棒性； 阅读建议：建议读者结合提供的Matlab代码进行仿真实践，深入理解算法实现细节，同时可参考文中提及的相关技术方向拓展研究思路，注重理论分析与仿真验证相结合。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值