[发明专利]绘制web频率图插件的实现方法

权利要求书

1.一种绘制web频率图插件的实现方法，其特征在于，步骤如下：

web程序启动后，在进入H5页面时，对插件进行初始化处理；

调用插件的init方法在相应的H5标签中绘制出canvas绘图模块；

利用插件中的setOption方法，输入相关的参数对频率图的参数进行配置，在canvas画布上绘制出要显示的频率段范围的坐标轴；X轴为数值，表示频率的大小；Y轴为贝塞尔曲线制高点的值；

利用频率段数据中的起始频点、终止频点以及自定义的制高点数据，调用canvas中的quadraticCurveTo方法将频率图绘制为相应的二次贝塞尔曲线；

利用频率图插件中的setOption方法对频率图插件的数据进行实时更新，达到动态显示的效果；

应用为浏览器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，将插件作为一个模块导出，使得插件可以导入使用。

2.根据权利要求1所述的方法，其特征在于：所述相关的参数为显示的频率范围和显示的频率段数组。

3.根据权利要求1所述的方法，其特征在于：所述Y轴为发射频率段设备的功率。

4.根据权利要求1所述的方法，其特征在于：所述绘制web频率图插件，封装有与用户操作相关的插件初始化接口init和插件实时数据更新接口setOption。

5.根据权利要求1所述的方法，其特征在于，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与服务器建立连接，实时获取服务器的推送事件，根据事件内容实时更新要展示的频率段信息。