Implementation method for drawing web frequency diagram plug-in

Abstract

The invention discloses an implementation method for drawing a web frequency diagram plug-in. The method comprises: after the web program is started, when the web program enters the H5 page, the plug-in is initialized; A plug-in method is called to draw a canvas drawing module in the corresponding H5 label; Inputting relevant parameters to configure the parameters of the frequency diagram by usinga method packaged in a plug-in, and drawing a coordinate axis of a frequency band range to be displayed on canvas of canvas; Wherein the X axis is a numerical value and represents the frequency; TheY axis is the value of a Bezier curve commanding point; And calling a method in canvas to draw a frequency diagram into a corresponding quadratic Bezier curve by utilizing a starting frequency point,a terminating frequency point and self-defined commanding point data in the frequency band data. The method and the device are suitable for displaying frequency diagrams in all webs, the shapes of thecurves can be changed by flexibly changing the positions of the control points, and the display effect is improved.

Description

technical field

[0001] The invention belongs to the field of web front-end technology, in particular to a method for realizing a plug-in for drawing a web frequency map. Background technique

[0002] Web is an important application platform in today's society. It is a global, dynamic interactive, cross-platform distributed graphic information system based on hypertext and HTTP. It is a network service built on the Internet. It provides a graphical, easy-to-access and intuitive interface for viewers to search and browse information on the Internet. The documents and hyperlinks in it organize the information nodes on the Internet into a mutual Associated network structure.

[0003] In general web applications, a large number of charts are used. However, because the frequency band data is one-dimensional, it cannot be displayed well in two-dimensional icons, and it is not intuitive enough in general reports.

[0004] In an ordinary line graph, two-dimensional line graph draw...

Examples

Embodiment Construction

[0015] A Bézier curve, also known as a Bézier curve or a Bézier curve, is a mathematical curve applied to two-dimensional graphics applications. The design principle of the present invention is: add a self-defined third point to the one-dimensional frequency segment, and then draw it with a two-dimensional quadratic Bezier curve, so that the frequency map can be displayed clearly and beautifully .

[0016] The present invention is a method for drawing frequency diagrams based on quadratic Bezier curves and canvas labels, comprising the following steps:

[0017] After the web program starts, when entering the H5 page, the plug-in is initialized.

[0018] Call the init method of the plug-in to draw the canvas drawing module in the corresponding H5 tag.

[0019] Use the setOption method in the plug-in to input relevant parameters to configure the parameters of the frequency graph (the displayed frequency range and the displayed frequency segment array). First, draw the coordina...

technical field

[0001] The invention belongs to the field of web front-end technology, in particular to a method for realizing a plug-in for drawing a web frequency map. Background technique

[0002] Web is an important application platform in today's society. It is a global, dynamic interactive, cross-platform distributed graphic information system based on hypertext and HTTP. It is a network service built on the Internet. It provides a graphical, easy-to-access and intuitive interface for viewers to search and browse information on the Internet. The documents and hyperlinks in it organize the information nodes on the Internet into a mutual Associated network structure.

[0003] In general web applications, a large number of charts are used. However, because the frequency band data is one-dimensional, it cannot be displayed well in two-dimensional icons, and it is not intuitive enough in general reports.

[0004] In an ordinary line graph, two-dimensional line graph draw...

Examples

Embodiment Construction

[0015] A Bézier curve, also known as a Bézier curve or a Bézier curve, is a mathematical curve applied to two-dimensional graphics applications. The design principle of the present invention is: add a self-defined third point to the one-dimensional frequency segment, and then draw it with a two-dimensional quadratic Bezier curve, so that the frequency map can be displayed clearly and beautifully .

[0016] The present invention is a method for drawing frequency diagrams based on quadratic Bezier curves and canvas labels, comprising the following steps:

[0017] After the web program starts, when entering the H5 page, the plug-in is initialized.

[0018] Call the init method of the plug-in to draw the canvas drawing module in the corresponding H5 tag.

[0019] Use the setOption method in the plug-in to input relevant parameters to configure the parameters of the frequency graph (the displayed frequency range and the displayed frequency segment array). First, draw the coordina...

Images