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

说明书

本发明公开了一种绘制web频率图插件的实现方法。web程序启动后，在进入H5页面时，对插件进行初始化处理；调用插件的方法在相应的H5标签中绘制出canvas绘图模块；利用插件中包装好的方法，输入相关的参数对频率图的参数进行配置，在canvas画布上绘制出要显示的频率段范围的坐标轴；X轴为数值，表示频率的大小；Y轴为贝塞尔曲线制高点的值；利用频率段数据中的起始频点、终止频点以及自定义的制高点数据，调用canvas中的方法将频率图绘制为相应的二次贝塞尔曲线。本发明适用于所有web中频率图的展示，能够灵活地改变控制点的位置来改变曲线的形状，提高了展示的效果。

技术领域

本发明属于web前端技术领域，特别是一种绘制web频率图插件的实现方法。

背景技术

Web是当今社会一种重要的应用平台，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。

在一般的web应用中，应用了大量的图表。但是因为频率段数据是一维的特点，导致其在二维的图标中不能很好地展现，在一般的报表中不够直观。

在普通的线图中，二维线图绘制必须要有所有点的横坐标和纵坐标两个值，所以频率段没有办法直接很好地展现出来。

而如果直接在一维图中显示，则会造成重叠的频率段无法区分，展现效果更差。

现有的方法中，一般会取频率段中间的一个点，赋予它一个纵坐标的值，这样就得到了一个频率段的二维展示。但是这种方法使频率段变成了两条直线连接，不同的频率段特点也不能很好地展示出来。

发明内容

本发明的目的在于提供一种web前端频率图相关的图表的绘制方法。

实现本发明目的的技术解决方案为：一种绘制web频率图插件的实现方法，步骤如下：

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

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

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

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

本发明与现有技术相比，其显著优点：(1)本发明将实现功能的步骤插件化，使得绘制更加简单，提高了开发效率。(2)提供了频率段图形的绘制方式，使得频率段的展现更加直观。(3)提供了动态的接口，开发者能够很方便地对插件参数进行设置，从而使频率图能够实时更新。

附图说明

图1是本发明绘制web频率图插件的实现方法的插件结构图。

具体实施方式

贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。本发明的设计原理是：将一维的频率段中加上一个自定义的第三个点，再用二维的二次贝塞尔曲线绘制出来，使频率图能够能清楚、美观地展示出来。

本发明是是一种基于二次贝塞尔曲线和canvas标签的频率图绘制方法，包括以下步骤：

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