CN109783097A - 绘制web频率图插件的实现方法 - Google Patents
绘制web频率图插件的实现方法 Download PDFInfo
- Publication number
- CN109783097A CN109783097A CN201811637015.3A CN201811637015A CN109783097A CN 109783097 A CN109783097 A CN 109783097A CN 201811637015 A CN201811637015 A CN 201811637015A CN 109783097 A CN109783097 A CN 109783097A
- Authority
- CN
- China
- Prior art keywords
- frequency
- plug
- unit
- canvas
- web
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种绘制web频率图插件的实现方法。web程序启动后,在进入H5页面时,对插件进行初始化处理;调用插件的方法在相应的H5标签中绘制出canvas绘图模块;利用插件中包装好的方法,输入相关的参数对频率图的参数进行配置,在canvas画布上绘制出要显示的频率段范围的坐标轴;X轴为数值,表示频率的大小;Y轴为贝塞尔曲线制高点的值;利用频率段数据中的起始频点、终止频点以及自定义的制高点数据,调用canvas中的方法将频率图绘制为相应的二次贝塞尔曲线。本发明适用于所有web中频率图的展示,能够灵活地改变控制点的位置来改变曲线的形状,提高了展示的效果。
Description
技术领域
本发明属于web前端技术领域,特别是一种绘制web频率图插件的实现方法。
背景技术
Web是当今社会一种重要的应用平台,它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务,为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面,其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
在一般的web应用中,应用了大量的图表。但是因为频率段数据是一维的特点,导致其在二维的图标中不能很好地展现,在一般的报表中不够直观。
在普通的线图中,二维线图绘制必须要有所有点的横坐标和纵坐标两个值,所以频率段没有办法直接很好地展现出来。
而如果直接在一维图中显示,则会造成重叠的频率段无法区分,展现效果更差。
现有的方法中,一般会取频率段中间的一个点,赋予它一个纵坐标的值,这样就得到了一个频率段的二维展示。但是这种方法使频率段变成了两条直线连接,不同的频率段特点也不能很好地展示出来。
发明内容
本发明的目的在于提供一种web前端频率图相关的图表的绘制方法。
实现本发明目的的技术解决方案为:一种绘制web频率图插件的实现方法,步骤如下:
web程序启动后,在进入H5页面时,对插件进行初始化处理;
调用插件的init方法(初始化方法)在相应的H5标签中绘制出canvas绘图模块;
利用插件中的setOption方法,输入相关的参数对频率图的参数进行配置,在canvas画布上绘制出要显示的频率段范围的坐标轴;X轴为数值,表示频率的大小;Y轴为贝塞尔曲线制高点的值;
利用频率段数据中的起始频点、终止频点以及自定义的制高点数据,调用canvas中的bezierCurveTo方法将频率图绘制为相应的二次贝塞尔曲线。
本发明与现有技术相比,其显著优点:(1)本发明将实现功能的步骤插件化,使得绘制更加简单,提高了开发效率。(2)提供了频率段图形的绘制方式,使得频率段的展现更加直观。(3)提供了动态的接口,开发者能够很方便地对插件参数进行设置,从而使频率图能够实时更新。
附图说明
图1是本发明绘制web频率图插件的实现方法的插件结构图。
具体实施方式
贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。本发明的设计原理是:将一维的频率段中加上一个自定义的第三个点,再用二维的二次贝塞尔曲线绘制出来,使频率图能够能清楚、美观地展示出来。
本发明是是一种基于二次贝塞尔曲线和canvas标签的频率图绘制方法,包括以下步骤:
web程序启动后,在进入H5页面时,对插件进行初始化处理。
调用插件的init方法在相应的H5标签中绘制出canvas绘图模块。
利用插件中的setOption方法,输入相关的参数对频率图的参数(显示的频率范围和显示的频率段数组)进行配置,首先在canvas画布上绘制出要显示的频率段范围的坐标轴。X轴为数值,表示频率的大小;Y轴为贝塞尔曲线制高点的值,可以任意取值,也可以将其特化为某具体属性,如发射该频率段设备的功率等。
利用频率段数据中的起始频点、终止频点以及自定义的制高点数据,调用canvas中的bezierCurveTo方法将频率图绘制为相应的二次贝塞尔曲线。
在上述技术方案的基础上,可以选择利用频率图插件中的setOption方法对频率图插件的数据进行实时更新,达到动态显示的效果。
本发明所述的插件化频率图绘制方法,提供了简单易用的接口,用户只需要初始化和参数配置就可以将频率图绘制为二次贝塞尔曲线,提高了前端开发的效率,方便了频率图的展示,拥有统一的接口便于调试和维护。
下面结合附图对本发明作进一步描述。
应用为浏览器web引用,使用的语言为HTML、CSS和JAVASCRIPT,HTML用来绘制CANVAS标签,CSS实现样式布局,JAVASCRIPT语言和JQUERY插件来实现绘制的逻辑,其中JAVASCRIPT使用了ES6规范的语法。
绘图插件的ES6代码实现步骤如下:
(1)新建CONST变量iCanvas。
(2)定义iCanvas的子属性freqconfig,用来存储绘制的基本配置。
(3)定义iCanvas的子属性iFreq,用来返回实例
(4)定义iCanvas的子属性container,用来存放要绘制频率图的HTML标签。
(5)定义实例iFreq的方法init,该方法会通过读取高度和宽度初始化canvas标签,并将实例返回给container。同时在container容器中监听“mousemove”事件,用来绘制tooltip提示框。
(6)定义实例iFreq的方法setOption,该方法接受三个参数,beginFreq,endFreq和freqs,分别作为显示频率坐标轴的起始频点,终止频点,以及各个要显示的频率段。
(7)定义实例iFreq的方法drawCanvas,该方法用来绘制具体的CANVAS图形。drawCanvas方法中调用canvas标签的quadraticCurveTo方法来绘制频率段的二次贝塞尔曲线。
(8)定义ES6中的模块导出EXPORT DEFAULT,将插件作为一个模块导出,使得插件可以导入使用。
Web功能代码实现的步骤如下:
(1)编写HTML文件,构造相应的DIV块以及指定块标签的ID,使得JQUERY插件能够通过ID来查找和获取相应的块标签。
(2)在HTML中引入CSS文件来定义样式,引入JQUERY插件来实现业务逻辑(获取DOM元素,AJAX接口获取数据)。
(3)创建自己的JS文件,调用JQUERY插件来获取DOM元素,初始化CANVAS。
(4)调用JQUERY的AJAX功能向服务器发送请求,得到要显示的频率段的数据,然后调用iCanvas的setOption方法将数据feed进canvas控件,canvas初始化绘图完成。
(5)利用websocket与服务器建立连接,实时获取服务器的推送事件,根据事件内容实时更新要展示的频率段信息。
Web引用为BS架构,后台为前台提供HTTP接口获取数据,并提供websocket接口来实时更新数据,结构图如图1所示。
基于二次贝塞尔曲线和canvas的频率绘制插件需要在web应用中使用和实现。
下面描述实现频率图功能的具体实施步骤:
(1)编写HTML文件,构造相应的DIV块以及指定块标签的ID,使得JQUERY插件能够通过ID来查找和获取相应的块标签。
(2)创建自己的JS文件,调用JQUERY插件来获取DOM元素,初始化CANVAS。
(3)调用JQUERY的AJAX功能向服务器发送请求,得到要显示的频率段的数据,然后调用iCanvas的setOption方法将数据feed进canvas控件,canvas初始化绘图完成。
AJAX请求的参数如下:
请求地址url |
频率段的ID |
SERVER返回的RESPONSE为JSON类型数据,格式如下:
请求结果状态state |
频率段数组freqArr |
(4)编写websocket模块与服务器建立连接,实时获取服务器的推送事件,根据事件内容实时更新要展示的频率段信息,达到动态图表的效果。WEBSOCKET推送的MESSAGE数据格式内容如下:
事件代码eventCode |
时间eventTime |
消息描述eventDesc |
频率列表freqList |
(5)运行web寄托的服务器app,访问相应的地址,浏览器读取HTML文件,初始化DOM信息。
(6)DOM初始化完成后,可以看到相应位置已经绘制完成的频率图表。
综上所述,本发明适用于所有web中频率图的展示,通过二次贝塞尔曲线将频率段一维信息转化为了一个二维的频率段,并且能够灵活地改变控制点的位置来改变曲线的形状等,提高了展示的效果。同时,本发明的插件是轻量级插件,占有的体积小,使开发工作更加简单,拥有统一的接口,方便调试和维护。
Claims (7)
1.一种绘制web频率图插件的实现方法,其特征在于,步骤如下:
web程序启动后,在进入H5页面时,对插件进行初始化处理;
调用插件的init方法在相应的H5标签中绘制出canvas绘图模块;
利用插件中的setOption方法,输入相关的参数对频率图的参数进行配置,在canvas画布上绘制出要显示的频率段范围的坐标轴;X轴为数值,表示频率的大小;Y轴为贝塞尔曲线制高点的值;
利用频率段数据中的起始频点、终止频点以及自定义的制高点数据,调用canvas中的bezierCurveTo方法将频率图绘制为相应的二次贝塞尔曲线。
2.根据权利要求1所述的方法,其特征在于:所述相关的参数为显示的频率范围和显示的频率段数组。
3.根据权利要求1所述的方法,其特征在于:所述Y轴为贝塞尔曲线制高点的值,可任意取值,也可将其特化为某具体属性。
4.根据权利要求1所述的方法,其特征在于:利用频率图插件中的setOption方法对频率图插件的数据进行实时更新,达到动态显示的效果。
5.根据权利要求1所述的方法,其特征在于:所述绘制web频率图插件,封装有与用户操作相关的插件初始化接口init和插件实时数据更新接口setOption。
6.根据权利要求1所述的方法,其特征在于:应用为浏览器web引用,使用的语言为HTML、CSS和JAVASCRIPT,HTML用来绘制CANVAS标签,CSS实现样式布局,JAVASCRIPT语言和JQUERY插件来实现绘制的逻辑,其中JAVASCRIPT使用了ES6规范的语法;
绘制web频率图插件的ES6代码实现步骤如下:
(1)新建CONST变量iCanvas;
(2)定义iCanvas的子属性freqconfig,用来存储绘制的基本配置;
(3)定义iCanvas的子属性iFreq,用来返回实例;
(4)定义iCanvas的子属性container,用来存放要绘制频率图的HTML标签;
(5)定义实例iFreq的方法init,该方法会通过读取高度和宽度初始化canvas标签,并将实例返回给container;同时在container容器中监听“mousemove”事件,用来绘制tooltip提示框;
(6)定义实例iFreq的方法setOption,该方法接受三个参数,beginFreq,endFreq和freqs,分别作为显示频率坐标轴的起始频点、终止频点以及各个要显示的频率段;
(7)定义实例iFreq的方法drawCanvas,该方法用来绘制具体的CANVAS图形;drawCanvas方法中调用canvas标签的quadraticCurveTo方法来绘制频率段的二次贝塞尔曲线;
(8)定义ES6中的模块导出EXPORT DEFAULT,将插件作为一个模块导出,使得插件可以导入使用。
7.根据权利要求1或6所述的方法,其特征在于,Web功能代码实现的步骤如下:
(1)编写HTML文件,构造相应的DIV块以及指定块标签的ID,使得JQUERY插件能够通过ID来查找和获取相应的块标签;
(2)在HTML中引入CSS文件来定义样式,引入JQUERY插件来实现业务逻辑,获取DOM元素,AJAX接口获取数据;
(3)创建自己的JS文件,调用JQUERY插件来获取DOM元素,初始化CANVAS;
(4)调用JQUERY的AJAX功能向服务器发送请求,得到要显示的频率段的数据,然后调用iCanvas的setOption方法将数据填充进canvas控件,canvas初始化绘图完成;
(5)利用websocket与服务器建立连接,实时获取服务器的推送事件,根据事件内容实时更新要展示的频率段信息。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201811637015.3A CN109783097B (zh) | 2018-12-29 | 2018-12-29 | 绘制web频率图插件的实现方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201811637015.3A CN109783097B (zh) | 2018-12-29 | 2018-12-29 | 绘制web频率图插件的实现方法 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN109783097A true CN109783097A (zh) | 2019-05-21 |
CN109783097B CN109783097B (zh) | 2020-10-23 |
Family
ID=66498957
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201811637015.3A Active CN109783097B (zh) | 2018-12-29 | 2018-12-29 | 绘制web频率图插件的实现方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN109783097B (zh) |
Cited By (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110457331A (zh) * | 2019-07-19 | 2019-11-15 | 北京邮电大学 | 通用的实时更新多维数据可视化系统及方法 |
CN111127583A (zh) * | 2019-11-08 | 2020-05-08 | 北京猎豹移动科技有限公司 | 一种绘制曲线的方法、装置及电子设备 |
CN112347171A (zh) * | 2020-11-03 | 2021-02-09 | 广州朗国电子科技有限公司 | 一种将接口数据转为可视化图表方法及装置、存储介质 |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103605534A (zh) * | 2013-10-31 | 2014-02-26 | 武汉极讯软件有限责任公司 | 图片加载方法及装置 |
JP2016057920A (ja) * | 2014-09-10 | 2016-04-21 | 株式会社モーダルコンセプトジャパン | 図面表示装置、図面表示方法及び図面表示プログラム |
CN106162302A (zh) * | 2015-04-22 | 2016-11-23 | Tcl集团股份有限公司 | 一种Launcher主界面的编排方法、装置及智能电视 |
CN107239287A (zh) * | 2017-06-07 | 2017-10-10 | 福建中金在线信息科技有限公司 | 一种网页显示方法、装置、电子设备及存储介质 |
-
2018
- 2018-12-29 CN CN201811637015.3A patent/CN109783097B/zh active Active
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103605534A (zh) * | 2013-10-31 | 2014-02-26 | 武汉极讯软件有限责任公司 | 图片加载方法及装置 |
JP2016057920A (ja) * | 2014-09-10 | 2016-04-21 | 株式会社モーダルコンセプトジャパン | 図面表示装置、図面表示方法及び図面表示プログラム |
CN106162302A (zh) * | 2015-04-22 | 2016-11-23 | Tcl集团股份有限公司 | 一种Launcher主界面的编排方法、装置及智能电视 |
CN107239287A (zh) * | 2017-06-07 | 2017-10-10 | 福建中金在线信息科技有限公司 | 一种网页显示方法、装置、电子设备及存储介质 |
Non-Patent Citations (3)
Title |
---|
李翠: "Web前端地理数据可视化技术研究与实践", 《中国优秀硕士学位论文全文数据库 基础科学辑》 * |
杨腾飞: "GPS卫星导航信号仿真研究", 《中国优秀硕士学位论文全文数据库 信息科技辑》 * |
苏苏苏苏考拉: "贝塞尔曲线的应用(一)", 《简书 HTTPS://WWW.JIANSHU.COM/P/FE50513C9972》 * |
Cited By (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110457331A (zh) * | 2019-07-19 | 2019-11-15 | 北京邮电大学 | 通用的实时更新多维数据可视化系统及方法 |
CN110457331B (zh) * | 2019-07-19 | 2022-03-29 | 北京邮电大学 | 通用的实时更新多维数据可视化系统及方法 |
CN111127583A (zh) * | 2019-11-08 | 2020-05-08 | 北京猎豹移动科技有限公司 | 一种绘制曲线的方法、装置及电子设备 |
CN111127583B (zh) * | 2019-11-08 | 2024-01-12 | 北京朱比特科技有限公司 | 一种绘制曲线的方法、装置及电子设备 |
CN112347171A (zh) * | 2020-11-03 | 2021-02-09 | 广州朗国电子科技有限公司 | 一种将接口数据转为可视化图表方法及装置、存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN109783097B (zh) | 2020-10-23 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN106033471B (zh) | 一种处理表单的方法和装置 | |
CN106484408A (zh) | 一种基于html5的节点关系图显示方法及系统 | |
CN109783097A (zh) | 绘制web频率图插件的实现方法 | |
CN111259644B (zh) | 富文本处理方法与编辑器、设备及存储介质 | |
CN103389895B (zh) | 一种前端页面的生成方法及系统 | |
CN105975576B (zh) | 终端内容适配显示方法、装置和终端 | |
KR101494844B1 (ko) | 메타 데이터를 이용한 차트 변환 시스템 및 그 방법 | |
CN112102437B (zh) | 一种基于Canvas的雷达图生成方法、装置、存储介质及终端 | |
CN103365855A (zh) | 生成网页的方法及服务器 | |
CN112100550A (zh) | 一种页面构建方法和装置 | |
CN101667171A (zh) | 生成报表的方法及报表生成装置 | |
CN104636400A (zh) | 浏览器网页生成方法、浏览器及系统 | |
CN110955803A (zh) | 基于图数据库的关系图谱的绘制方法、装置、设备及介质 | |
CN109885301B (zh) | 一种可缩放矢量图形的生成方法、装置、存储介质和设备 | |
CN106776994B (zh) | 一种工程符号在工程报表和网页中的应用方法及系统 | |
CN110506267A (zh) | 数字组件背景渲染 | |
CN112926008B (zh) | 生成表单页面的方法、装置、电子设备和存储介质 | |
CN109656652A (zh) | 网页图表绘制方法、装置、计算机设备和存储介质 | |
CN110162301B (zh) | 一种表单渲染方法、装置和存储介质 | |
CN105528206A (zh) | 基于网页的界面生成方法 | |
CN112799670A (zh) | 一种统一多端逻辑开发的方法及系统 | |
CN107025111A (zh) | 一种浏览器目标页面整屏切换显示的方法及系统 | |
CN107436927B (zh) | 一种ui组件的应用方法和系统 | |
CN103970763A (zh) | 三维图像展示系统及方法 | |
US20170315971A1 (en) | Program for displaying webpage, terminal device, and server device |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant | ||
PE01 | Entry into force of the registration of the contract for pledge of patent right |
Denomination of invention: Implementation method of drawing web frequency diagram plug-in Effective date of registration: 20211026 Granted publication date: 20201023 Pledgee: Bank of China Limited Nanjing Chengdong Branch Pledgor: NANJING KONGWEI COMMUNICATION TECHNOLOGY CO.,LTD. Registration number: Y2021980011270 |
|
PE01 | Entry into force of the registration of the contract for pledge of patent right |