《HighCharts动态统计分析在成绩管理系统中的应用.doc》由会员分享，可在线阅读，更多相关《HighCharts动态统计分析在成绩管理系统中的应用.doc（7页珍藏版）》请在三一文库上搜索。
1、HighCharts动态统计分析在成绩管理系统中的应用1 引言（Introduction） 在成绩管理系统中，成绩分析是系统中最重要的组部分和最主要的环节。教师和管理人员通过它1，找出教学中存在的问题。 图表是用来呈现某事物或某信息数据的发展趋势的图形2。比如，一些图表可以反映出学生考试成绩在不同分数段的人数情况；一些图表可以反映出会员购物积分的情况；一些图表可以反映出某一地区在不同季节温度的变化情况。总之，在各个领域中，我们总喜欢用图表去说明情况，因为这样更形象、更直观、更容易被理解的承现出当时的状况以及状况之间的差异。在互联网的时代3，图表更是无处不再的出现在我们的屏幕上，量化了我们生活的
2、方方面面。能够很简单便捷的在web网站或是web应用程序中添加有交互性的图表，是程序开发人员必须掌握的一种技能。 2 HighCharts简介（A brief introduction to highcharts） 2.1 什么是HighCharts Highcharts是一个用纯JavaScript编写的一个图表库，可以帮助我们简单便捷的在web网站或是web应用程序实现有交互性的图表4。它采用SVG（Scalable Vector Graphics）可缩放矢量图形技术开发，提高了渲染速度提升了用户体验。并且，HighChart支持的图表类型众多，有曲线图、区域图、柱状图、饼状图、散状点图、
3、3D图、热点图、树状图、动态图表、组合图表、热点图、测量图等图表类型，可以满足你对Web图表的任何需要。 2.2 HighCharts的特点 HighChars依靠界面美观、运行速度快、运行无需插件（HighCharts图表用JavaScript编，所以不用像Flash和Java那样需要插件才可以运行）等特点受到了程序员们的青睐。我们先来简单的了解一下HighChars的特点。 首先，HighCharts有着非常优秀的兼容性支多种设备与不同的浏览器及移动平台，同时，它也不受开发语言的约束，可以支持asp、php、java、.net等语言。其次，HighCharts具有提示和缩放图表的功能，鼠标
4、移动到图表的某一点上有提示信息出现，还可以在显示较大数据量的图表时，指定放大或缩小某一部分的图形，并且支持图表生成后修改，表格可以导出为PDFNPGJPGSVG等格式。最后，HighCharts支持外部数据加载和数据动态性，支持多种数据形式，结合Jquery、Prototype等javascript框架提供的Ajax接口，可以实时地从服务器取得数据并实时刷新图表。 3 HighCharts动态统计分析在成绩管理系统中的应用（Application of HighCharts dynamic statistical analysis in the grade management system）
5、 3.1 任务描述 动态图表就是图表的承现内容随动作、后台数据等外界相关因素的改变或触发而产生变化5。结合成绩管理系统，根据用户输入指定的分数段，实现统计各分数段学生的人数，以及所占的百分比，并且在Web页面上通过HighCharts将结果展示出来，具体流程如图1所示。 3.2 成绩分段统计 实现成绩分段统计，首先到数据库中将学生的成绩查询到内存表中，然后根据用户输入的成绩段，分别进行统计。在统计各分数段人数的同时，将HighCharts需要的JSON数据格式字符串生成出来6-8，并响应到客户端浏览器，具体实现如下程序所示。 string scores=Request.Formscores；/
6、获取成绩段数据 if （scores！=null & scores！=） string str=scores.Split（，）；/劈分成绩数据段到数组 /查询成绩 DataTabledt=new SqlHelper（）.getAllScore（）；/获取所有学生成绩数据 string cates=；/X轴显示内容 string datas=；/Y轴数据 string piedatas=；/饼图显示数据 intallStudents=dt.Rows.Count；/总人数 if （dt！=null &dt.Rows.Count 0） /分段统计，拼接字符串 for （inti=0； i+stri.
7、Split（-）0+and score piedatas+=name：+stri+，y：+（float）（total） / allStudents）.ToString（0.00）+，；/饼图数据，计算百分比 if （cates！=） cates=cates.TrimEnd（，）；/去掉最后一个， if （datas！=） datas=datas.TrimEnd（，）； /去掉最后一个， iedatas=piedatas.TrimEnd（，）； /去掉最后一个， Response.Write（cates+|+datas+|+piedatas+）；/输出需要的Json格式字符串，并用“|”拼接 在
8、输出统计数据格式时，需要严格按照HighCharts数据格式生成，由于HighCharts默认数据为Json格式，所以在生成Json字符串后，到客户端浏览器需要在重新将字符串转换为Json对象。 3.3 使用HighCharts展示统计结果 当浏览器端用户发送成绩段数据请求后，从服务器端响应了三部分数据，包括柱状图的X轴数据和Y轴数据，饼图的相关数据。由于服务器端响应时将三部分数据使用了分隔符号“|”拼接起来的，所以客户端接收后需要劈分字符串，将对应数据分离出来并转换为Json对象，具体实现如下程序所示。 function account（）/统计功能 var scores=$（#score）
9、.val（）；/获取分数段数据 if （scores=） $.messager.alert（提示， 输入需要统计的分数段！， info）； else /异步请求 $.ajax（ type： post， url： account.aspx，/请求服务器端url data： scores： scores ， success： function （data） varcate=data.split（|）0； var students= data.split（|）1； varpiedata=data.split（|）2 var chart=$（#container）.highcharts（）； char
10、t.xAxis0.setCategories（eval（cate）；/给X轴填充数据 chart.series0.setData（eval（students）；/给Y轴填充数据 chart.series1.setData（eval（piedata）；/给饼图填充数据 ）； 当服务器端响应正确的HighCharts图标数据格式后，将在客户端的浏览器中显示定义的图表类型，无论采用哪种图标类型，当鼠标悬浮图表上时，将显示相应的数据。例如在统计各分数段学生人数时，当鼠标悬浮在柱状图上面时，则显示当前分数段学生的人数，当鼠标悬浮在饼图上面时，则显示当前分数段学生人数占总人数的百分比，具体显示如图2所示。 4 结论（Conclusion） 本文利用Highcharts图表库结合成绩管理系统实现了成绩动态统计分析，根据用户输入的分数统计要求，在系统中创建了直观的数据统计图，能够方便教学管理人员和教师浏览查看统计数据，对提高教学效果和完善教学评价有建设指导意义。这里我们只是简单表述并设计了一个Highcharts加载外部json数据生成图表的功能9，功能比较简单，对于某些问题的考虑也不够完善，以后我们可以添加更多的控件，就可以进行多条件复合查询，满足不同用户对成绩查找统计的不同需求。随着Highcharts技术的不断发展，和大家不断深入的研究，一定能创造出更多更加实用和精美的图表。