| 标题 | HighCharts动态统计分析在成绩管理系统中的应用 |
| 范文 | 周岚
摘 要：Highcharts目前在web应用程序开发中被广泛使用，可以为我们实现交互性的图表开发，本文通过分析Highcharts的特点，结合成绩管理系统，首先给出了成绩查询统计流程图，然后有效地实现了成绩动态统计分析功能，文章给出设计思路、流程图、部分关键代码和系统运行效果，并进行了总结，提出了希望。 关键词：Highcharts；图表；动态统计 中图分类号：TP311.11 文献标识码：A 1 引言（Introduction） 在成绩管理系统中，成绩分析是系统中最重要的组部分和最主要的环节。教师和管理人员通过它[1]，找出教学中存在的问题。 图表是用来呈现某事物或某信息数据的发展趋势的图形[2]。比如，一些图表可以反映出学生考试成绩在不同分数段的人数情况；一些图表可以反映出会员购物积分的情况；一些图表可以反映出某一地区在不同季节温度的变化情况。总之，在各个领域中，我们总喜欢用图表去说明情况，因为这样更形象、更直观、更容易被理解的承现出当时的状况以及状况之间的差异。在互联网的时代[3]，图表更是无处不再的出现在我们的屏幕上，量化了我们生活的方方面面。能够很简单便捷的在web网站或是web应用程序中添加有交互性的图表，是程序开发人员必须掌握的一种技能。 2 HighCharts简介（A brief introduction to highcharts） 2.1 什么是HighCharts Highcharts是一个用纯JavaScript编写的一个图表库，可以帮助我们简单便捷的在web网站或是web应用程序实现有交互性的图表[4]。它采用SVG（Scalable Vector Graphics）可缩放矢量图形技术开发，提高了渲染速度提升了用户体验。并且，HighChart支持的图表类型众多，有曲线图、区域图、柱状图、饼状图、散状点图、3D图、热点图、树状图、动态图表、组合图表、热点图、测量图等图表类型，可以满足你对Web图表的任何需要。 2.2 HighCharts的特点 HighChars依靠界面美观、运行速度快、运行无需插件（HighCharts图表用JavaScript编，所以不用像Flash和Java那样需要插件才可以运行）等特点受到了程序员们的青睐。我们先来简单的了解一下HighChars的特点。 首先，HighCharts有着非常优秀的兼容性支多种设备与不同的浏览器及移动平台，同时，它也不受开发语言的约束，可以支持asp、php、java、.net等语言。其次，HighCharts具有提示和缩放图表的功能，鼠标移动到图表的某一点上有提示信息出现，还可以在显示较大数据量的图表时，指定放大或缩小某一部分的图形，并且支持图表生成后修改，表格可以导出为PDF＼NPG＼JPG＼SVG等格式。最后，HighCharts支持外部数据加载和数据动态性，支持多种数据形式，结合Jquery、Prototype等javascript框架提供的Ajax接口，可以实时地从服务器取得数据并实时刷新图表。 3 HighCharts动态统计分析在成绩管理系统中的应用（Application of HighCharts dynamic statistical analysis in the grade management system） 3.1 任务描述 动态图表就是图表的承现内容随动作、后台数据等外界相关因素的改变或触发而产生变化[5]。结合成绩管理系统，根据用户输入指定的分数段，实现统计各分数段学生的人数，以及所占的百分比，并且在Web页面上通过HighCharts将结果展示出来，具体流程如图1所示。 3.2 成绩分段统计 实现成绩分段统计，首先到数据库中将学生的成绩查询到内存表中，然后根据用户输入的成绩段，分别进行统计。在统计各分数段人数的同时，将HighCharts需要的JSON数据格式字符串生成出来[6-8]，并响应到客户端浏览器，具体实现如下程序所示。 string scores=Request.Form["scores"]；////获取成绩段数据 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 { cates+="'" +str[i]+"'，"；////添加X轴数据 int total=int.Parse（dt.Compute（"count（studentid）"， "score>"+str[i].Split（'-'）[0]+"and score<="+str[i].Split（'-'）[1]+""）.ToString（））； datas+=total.ToString（）+"，"；///Y轴数据 piedatas+="{name：'"+str[i]+"'，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格式字符串，并用“|”拼接 } 在输出统计数据格式时，需要严格按照HighCharts数据格式生成，由于HighCharts默认数据为Json格式，所以在生成Json字符串后，到客户端浏览器需要在重新将字符串转换为Json对象。 3.3 使用HighCharts展示统计结果 当浏览器端用户发送成绩段数据请求后，从服务器端响应了三部分数据，包括柱状图的X轴数据和Y轴数据，饼图的相关数据。由于服务器端响应时将三部分数据使用了分隔符号“|”拼接起来的，所以客户端接收后需要劈分字符串，将对应数据分离出来并转换为Json对象，具体实现如下程序所示。 function account（）////统计功能 { var scores=$（"#score"）.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（）； chart.xAxis[0].setCategories（eval（cate））；////给X轴填充数据 chart.series[0].setData（eval（students））；////给Y轴填充数据 chart.series[1].setData（eval（piedata））；////给饼图填充数据 } }）； }} 当服务器端响应正确的HighCharts图标数据格式后，将在客户端的浏览器中显示定义的图表类型，无论采用哪种图标类型，当鼠标悬浮图表上时，将显示相应的数据。例如在统计各分数段学生人数时，当鼠标悬浮在柱状图上面时，则显示当前分数段学生的人数，当鼠标悬浮在饼图上面时，则显示当前分数段学生人数占总人数的百分比，具体显示如图2所示。 4 结论（Conclusion） 本文利用Highcharts图表库结合成绩管理系统实现了成绩动态统计分析，根据用户输入的分数统计要求，在系统中创建了直观的数据统计图，能够方便教学管理人员和教师浏览查看统计数据，对提高教学效果和完善教学评价有建设指导意义。这里我们只是简单表述并设计了一个Highcharts加载外部json数据生成图表的功能[9]，功能比较简单，对于某些问题的考虑也不够完善，以后我们可以添加更多的控件，就可以进行多条件复合查询，满足不同用户对成绩查找统计的不同需求。随着Highcharts技术的不断发展，和大家不断深入的研究，一定能创造出更多更加实用和精美的图表。 参考文献（References） [1] CAI Yunfei，TANGZhenmin，ZHAOChunxia.New Layered SOA-Based Architecture for Multi-Robots Cooperative Online SLAM[J].Chinese Journal of Electronics，2014，01：25-30. [2] Chen.S.M.，J.M.Tan.Handling Multicriteria Fuzzy Decision-Making Problems Based on Vague Set-Theory[J].Fuzzy SetsandSystems，1994，67（2）：163-172. [3] Colvin，J.，Tobler，N.，Anderson，J.A..Productivity and Multiscreen Computer Displays[J].Rocky Mountain Communication Review，2007，2（01）：31-53. [4] 杜海舟，等.教学督导听课信息管理系统的设计与实现[J].上海电力学院学报，2014（04）：346-351. [5] 比伯奥特，卡茨.陈宁，译.jQuery实战[M].北京：人民邮电出版社，2009. [6] 张福转，王伟.Highcharts在实践教学场所预约登记系统中的应用[J].电脑知识与技术，2016（4）：111-112. [7] 张固，汪晓平.ASP网络应用系统典型模块开发实例解析[M].北京：人民邮电出版社，2004. [8] 黄芳，王晓霞.谈高职院校课程考试中的题库建设[J].山东省农业管理干部学院学报，2012，29：3. [9] 蔡晓云.基于知识的在线考试系统题库设计[J].计算机与现代化，2011（8）：193-197. 作者简介： 周 岚（1977），女，硕士，副教授.研究领域：软件开发与数据库. |
| 随便看 |
|
科学优质学术资源、百科知识分享平台，免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。