【若要转载 请标明出处 http://raising.iteye.com/blog/2214779】
最近要求做前台的一些东西,用到了Highcharts。。其实在Highcharts中文网上有相应的演示demo,一般你所需要的图的样式都可以找到。难点在于实际开发中,需要的数据往往是要结合后台请求并响应的数据的。
附Highcharts中文网:
http://www.hcharts.cn/demo/index.php
而我这次做的是趋势图,涉及到动态刷新,做的过程还是花了一番功夫的,也补充和巩固了一点js的知识,为了纪念,把过程记录一下:
首先,是引入HIghcharts绘图相关的js文件和jQuery.js。
接下来,把HIghcharts动态刷新的格式拷贝并作修改:
$(function(){ $(document).ready(function() { Highcharts.setOptions({ global: { useUTC: false//是否使用世界标准时间 } }); var chart; chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'spline', marginRight: 10, events: { load: function() { var series = this.series; setInterval(function() { var result = reload(); var x = result.time; for(var i=0; i<series.length; i++) { var y = result.y[i]; series[i].addPoint([x, y], true, true); } }, 1000*5); } } }, title: { text: 'ssssss' }, xAxis: { type: 'datetime', tickPixelInterval: 150, tickInterval: 60 * 1000 }, yAxis: { title: { text: 'Value' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function () { return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2); } }, //图例属性 legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', borderWidth: 0 }, exporting: { enabled: false }, series: create() }); }); });
注意属性:global: { useUTC: false }是很重要的,对于我们在中国地区使用的系统而言,如果你这个设置为true或者不设置的话,会莫名其妙少了8个小时。因为如果你不设置为false,则是以世界标准时区为准,而由于中国所在时区为+8,所以经过 Highcharts 的处理后会减去8个小时。——这也是会偶尔出现的比较难以发现的问题。。(我就遇到了这个问题,一直在highcharts的dateFormat上找问题,搞了好久才发现这个问题~~~~)
重点是chart里面的event属性,series属性。注意,此时:series属性是一个js函数的返回值,需用“js函数名()”来取得。
而demo里面,series是这样的:
series: [{ name: 'Random data', data: (function() { // generate an array of random data var data = [], time = (new Date()).getTime(), i; for (i = -19; i <= 0; i++) { data.push({ x: time + i * 1000, y: Math.random() }); } return data; })() }]
这是死数据,并且只显示一条曲线(或折线)。我们需要得到后台数据,并且x,y的值都需要由后台决定。
create()方法的定义如下:
function create() { var series = new Array(); $.ajax({ type: "POST", url: "xxxx/yyyyy.json", async: false, //表示同步,如果要得到ajax处理完后台数据后的返回值,最好这样设置 success: function(result){ var ccc = result.key; var size = ccc.length; for(var i=0; i<size; i++) { var name = ccc[i].yyyy; var perTotalCnt = ccc[i].xxxx; var data = function() { var data = [], time = result.time, i; for(i=-6; i<=0; i++) { data.push({ x: aaaa, y: zzzz }); } return data; }(); series.push({"name": name, "data": data}); } } }); alert(series); return series; }
1)其中,series.push({"name": name, "data": data});这一行就是在往series数组[]中push数据,从而生成格式中需要的series数组;
注意series是一个json的数组,哪怕你只有一个series,也是一个长度为1的数组。如:
function create() { var series = {}; series.name = '个数'; series.data = [{'x':1448887500000,'y':50},{'x':1448887620000,'y':30},{'x':1448887680000,'y':31},{'x':1448887740000,'y':20},{'x':1448887800000,'y':20},{'x':1448887860000,'y':33},{'x':1448887920000,'y':39}]; var data = []; data[0] = series; return data; }
2)xAxis的tickInterval: 60 * 1000属性,表明x轴的显示间隔为分钟(单位为ms),前提是你指定xAis的type: 'datetime',这个属性决定了x轴显示的数据格式,如你指定为1分钟时,显示的是20:45,20.46,20:47等,同时也决定了显示的个数;
3)当你指定xAis的type为datetime时,point的x值是long值的毫秒数,表示从1970年01月01日00:00:00:000至今为止的毫秒数。
4)当出现Highcharts Errors #19的错误时,请检查加载时x轴的点个数是否超过999个(最高限制);x轴上的两个点的时间间隔是否太大。
而这一部分:
events: { load: function() { var series = this.series; setInterval(function() { var result = reload(); var x = result.time; for(var i=0; i<series.length; i++) { var y = result.y[i]; series[i].addPoint([x, y], true, true); } }, 1000*5); } }
则是每隔一段时间(1000*5=5s)刷新页面数据,并且通过循环生成多条"曲线"。其中reload()也是一个js函数的返回值:注:定义json对象的方法var json = {"key1": value1, "key2":value2} (reload方法就不贴了,也是通过ajax请求后台,得到相应数据并且处理相应数据后,放到一个数据结构或json对象中)。
其实,highcharts绘制chart也是典型的jquery语法·,所以我们取一个已经存在的highcharts对象时,可以直接用$("#divId").highcharts()即可,这符合Highcharts为对象属性赋值和取值的规则~~~~~~~~
效果(某一时刻):
画图完毕。
相关推荐
【JSP源码——动态显示JSP服务器内存的Ajax程序 图像版_systemjc.zip】是一个包含JSP和Ajax技术的示例项目,旨在通过图形化的方式动态展示JSP服务器的内存使用情况。在这个项目中,开发者可以学习到如何利用JSP、...
在金融证券系统中,股票行情接口是连接用户界面和后台服务器的重要桥梁,它负责从行情服务器获取实时或历史的股票数据,如开盘价、收盘价、最高价、最低价、成交量等,并将这些数据提供给前端展示。接口通常使用HTTP...
3. **AJAX**:用于异步数据获取和页面的无刷新更新,使得用户在查看或操作数据时无需等待整个页面重新加载。 4. **API交互**:管理仪表板通常需要与后端服务器进行数据交换,JavaScript通过调用RESTful API来实现这...
JavaScript库如D3.js、Chart.js和Highcharts可以帮助销售平台展示数据图表,如销售趋势、转化率等关键指标。这些可视化工具能够使复杂的销售数据变得直观易懂,辅助决策者进行业务分析。 六、响应式设计 为了适应...
Matlab领域上传的视频是由对应的完整代码运行得来的,完整代码皆可运行,亲测可用,适合小白; 1、从视频里可见完整代码的内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
SAE AS85049F+Connector Accessories, Electrical General Specification for+2021-04(1).pdf
NAVMAT P-9492 .pdf
内容概要:《有货App》产品立项说明书详细阐述了有货App的产品定位、目标用户、主要功能及市场分析。有货App隶属于YOHO!集团,起初为潮流杂志,逐渐转型为集媒体、零售、活动于一体的潮流营销平台。其核心定位为时尚穿搭,面向20~39岁追求潮流的年轻群体,提供正品国际潮牌、明星潮牌的一站式购买服务,并设有时尚潮流穿搭社区、正品鉴定和二手买卖平台。市场分析表明,全球潮牌市场呈两位数增长,尤其是中国市场增速显著,国潮崛起,95后成消费主力,推动潮牌需求上升。有货App的优势在于丰富的潮牌种类和内容基础,但社区互动少、存在假货现象、物流时效差是其劣势。产品规划分为四个版本迭代,逐步完善电商、正品鉴定、社区互动及二手买卖功能。 适合人群:20~39岁追求时尚穿搭、潮流生活的年轻群体,包括上班族、学生及时尚爱好者。 使用场景及目标:①满足用户一站式购买全球潮流品牌的需求;②提供时尚潮流穿搭社区,供用户分享交流穿搭心得;③确保用户购买正品,提供专业的正品鉴定服务;④搭建二手交易平台,方便用户出售或购买二手潮牌服饰。 阅读建议:此文档详细介绍了有货App的市场背景、产品定位及功能规划,适合产品经理、市场分析师及相关从业人员阅读,以了解潮牌电商市场的发展趋势及有货App的竞争策略。
内容概要:本文介绍了一款基于C#编写的485转Web API服务器框架,该框架集成了IoT技术和高性能高并发特性。框架主要特点包括强大的数据库支持(EF6+mssql),独立的WEB API服务,丰富的协议扩展性(支持Modbus、Modbus RTU等),便捷的MVC服务与硬件驱动,创新的设备轮询机制,灵活的API任务管理和便捷的运行与配置。此外,框架提供了完备的文档和技术支持,并进行了多项升级,如自适应服务规则、一键启动与自动配置、修复数据读取问题、设备标识增强和开放数据事件接口等。 适合人群:具备一定编程基础,尤其是熟悉C#和IoT技术的开发人员,适用于工业物联网系统的集成和开发。 使用场景及目标:该框架主要用于工业物联网项目的快速落地,特别是在需要高性能和灵活扩展的应用场景中。它可以用于构建能够处理大量并发连接的物联网后端系统,支持多种数据库和协议,简化设备连接管理和任务调度。 其他说明:框架不仅提供了详细的使用说明和技术支持,还在性能优化和资源管理方面做了很多改进,使得开发者可以更加专注于业务逻辑的实现。
一文了解 MCP、A2A、ANP
内容概要:本文详细介绍了如何使用Comsol多物理场仿真软件构建煤层瓦斯汽固耦合模型。文章首先解释了煤层瓦斯的基本概念及其重要性,随后逐步展示了如何在Comsol中定义几何结构、设置材料属性、添加物理场(如达西流和Langmuir吸附)、进行求解及结果分析。特别强调了渗透率动态变化、吸附解吸机制、耦合求解技巧以及模型验证方法。通过这些步骤,可以精确模拟瓦斯在煤层内的运移规律,为煤矿的安全开采提供科学依据。 适合人群:从事煤矿工程、地质勘探、能源开发等领域研究人员和技术人员,尤其是那些希望深入了解煤层瓦斯行为并对现有开采工艺进行优化的人群。 使用场景及目标:适用于需要评估煤层瓦斯风险、优化瓦斯抽采方案、提高煤炭资源利用率的实际工程项目。通过对煤层瓦斯汽固耦合模型的研究,可以帮助企业更好地规划开采活动,确保生产安全的同时最大化经济效益。 其他说明:文中提供的代码片段和建模思路不仅有助于初学者快速入门Comsol仿真工具,也为有经验的用户提供了一些实用的小贴士,如避免常见错误、提升求解效率等。此外,还提到了一些高级特性,如参数扫描界面开发、集群计算等功能的应用。
系统名称:数据结构课堂考勤管理系统 技术栈:JSP技术、MySQL数据库、SSM框架 系统功能:管理员可以通过系统后台录入学生及教师信息,包括学号、工号以及个人基础资料,同时可以通过课程管理添加课程信息,查看学生请假及签到信息;学生用户可以修改个人资料,结合课程信息实现在线签到提交,提交请假申请;教师用户可以通过管理界面查看学生请假信息并进行在线审批,查看学生签到信息及课程安排。 摘要:高校的不断扩张让在校学生数量不断增加,传统的人工点名签到的考勤管理模式已无法满足需求,同时手动录入的考勤管理模式浪费大量人力物力,也不便于考勤数据信息的管理和查询。考勤管理是高校教务管理工作的重点内容之一,通过考勤管理可以及时了解大学生在校的学习状态,培养学生自律自强的学习品格。结合高校内考勤管理的需求和重要性,利用互联网平台开发设计一款针对校内考勤管理的系统是非常有需求空间的。本文利用JSP技术开发设计了一款在线考勤管理系统,实现了学生与教师之间的信息互通,具备在线签到、在线请假以及课程信息查看等功能。同时结合国内外研究现状以及可行性分析,通过数据库结构的搭建以及系统的测试环节,实现了考勤管理系统的开发设计。
Java在线教育学习平台LW PPT
674222850524759拷貝漫畫-2.2.5(1).apk
内容概要:本文详细介绍了如何使用Simulink封装NXP MPC5634芯片的底层驱动,将复杂的寄存器配置转化为可视化的模块操作。文章通过具体实例展示了GPIO、PWM、ADC、CAN等常见外设的封装方法及其优势,如简化配置流程、提高开发效率、增强代码可读性和维护性。文中还分享了许多实践经验,如寄存器冲突检测、代码优化技巧以及调试工具的选择。 适合人群:从事汽车电子开发的技术人员,尤其是熟悉NXP MPC5634芯片并希望提高开发效率的研发人员。 使用场景及目标:适用于需要快速开发和调试汽车电子控制系统(如ECU)的团队。主要目标是减少底层驱动开发的时间成本,降低复杂度,提高系统的稳定性和可靠性。 其他说明:文章强调了Simulink封装库的实际应用价值,提供了大量代码片段和调试建议,帮助开发者更好地理解和掌握这一技术。此外,作者还提到了一些常见的陷阱和解决办法,有助于新手少走弯路。
内容概要:本文详细介绍了在MATLAB/Simulink环境下,针对微电网储能系统的锂电池SOC均衡问题提出的一种创新性的分段下垂控制策略。传统下垂控制存在收敛速度慢和充放电切换时母线电压波动大的问题。为解决这些问题,作者提出了将下垂曲线分为三个区域的方法:当SOC差超过5%时采用指数型下垂系数,2%-5%间使用二次曲线过渡,小于等于2%则保持线性控制。此外,引入了电压补偿机制以抑制母线电压波动,并通过仿真验证了该方法的有效性。结果显示,新的控制策略显著提高了SOC均衡的速度和平滑度,同时有效减少了母线电压波动。 适用人群:从事电力电子、微电网研究的技术人员以及对储能系统优化感兴趣的科研工作者。 使用场景及目标:适用于需要高效管理锂电池组SOC均衡并确保系统稳定的微电网项目。主要目标是在保证系统稳定性的同时提高SOC均衡效率,减少充放电切换时的电压波动。 其他说明:文中提供了详细的MATLAB/Simulink建模步骤和部分源代码片段,有助于读者理解和复现实验结果。
疫情控制途径.pptx
系统名称:基于SSM健身系统 技术栈:SSM框架、JSP技术、MySQL数据库 系统功能:管理员功能:系统用户信息管理、首页变幻图管理、课程信息管理、健身卡管理、健身器材管理、教练信息管理、购买及报名管理。用户功能:用户注册、健身卡信息查看及在线购买、健身教练信息查看、健身课程信息查看及在线报名、个人后台管理(包括健身卡办理信息管理、健身课程报名信息管理、个人资料维护和管理)。 摘要:随着人们对健康的重视度越来越高,健身经济的不断发展加速推动了健身房的扩张,与此同时多元化和便捷的健身方式也获得越来越多人的青睐,健身房的营销手段也逐渐从现在的宣传彩页推广逐渐转移到了线上平台,人们借助互联网平台实现了健身房健身设施、健身课程、教练信息以及健身卡优惠活动内容的查看和获取,通过线上平台实现了健身卡的办理以及健身课程的预约。相比传统的健身房管理模式,利用系统平台可以为用户提供更加便捷的在线报名及办卡服务,同时也提升健身房办卡及课程预约的管理效率。
内容概要:《10天精通DeepSeek实操手册》旨在帮助零基础用户在10天内掌握DeepSeek的使用方法,通过分阶段的学习目标逐步深入,涵盖AI认知、核心技能应用和实战变现。手册详细介绍了如何利用DeepSeek进行知识检索、内容生成、数据分析、创意设计等任务,并提供了具体的实操任务和案例,如生成论文大纲、优化会议纪要、处理合同审查等。此外,手册还提供了40个优质提示词库,覆盖学习提升、职场效率、生活助手等多个场景,以及学术资源导航和变现路径案例,帮助用户更好地应用DeepSeek解决实际问题。 适合人群:适合希望快速上手DeepSeek的零基础用户,尤其是希望通过AI工具提升工作效率、内容创作能力或寻求创收途径的人士。 使用场景及目标:①帮助用户破除对AI的恐惧,建立科学认知,了解AI的应用边界;②通过具体场景和任务,如论文写作、会议纪要整理、合同审查等,提高用户的实际操作能力;③提供变现指南,帮助用户通过AI工具开辟副业或优化现有业务,如代写商业计划书、制作AI使用指南、优化电商详情页等。 阅读建议:由于手册内容丰富且实用,建议读者结合自身需求,逐步实践每个阶段的任务,并灵活运用提供的提示词库和案例,确保在学习过程中不断积累经验和技能。同时,注意遵守相关法律法规,避免不当使用工具。
Delphi 12.3控件之ZhuTcp6.0.zip