CN115249284A

CN115249284A - Visual view construction method and device

Info

Publication number: CN115249284A
Application number: CN202110455318.9A
Authority: CN
Inventors: 黄兆嵩; 丁治宇
Original assignee: Huawei Cloud Computing Technologies Co Ltd
Current assignee: Huawei Cloud Computing Technologies Co Ltd
Priority date: 2021-04-26
Filing date: 2021-04-26
Publication date: 2022-10-28
Also published as: WO2022228211A1

Abstract

The application provides a method and a device for constructing a visual view, and belongs to the technical field of computers. The method for constructing the visual view by the coordinate system based on the track coordinate axis can support a user to define the shape of the coordinate axis through drawing or other modes through the track coordinate axis, and automatically calculate the position of data to be visualized in the coordinate system based on the track coordinate axis, so that the development process of complex layout calculation is encapsulated, the complex operation that the user manually calculates the specific position of an element when the view is constructed by adopting a rectangular coordinate system is avoided, the learning cost of the user is reduced, and the efficiency of constructing the complex visual view is improved.

Description

Visual view construction method and device

Technical Field

The present application relates to the field of computer technologies, and in particular, to a method and an apparatus for constructing a visual view.

Background

Data visualization is a technology for coding information such as attributes and characteristics of data through visual elements and visual channels and visually displaying the information to a user. The method greatly improves the efficiency of understanding and analyzing data by utilizing the sharp visual perception capability of people and the powerful data analysis capability of a computer. In recent years, data visualization technology plays an important role in the fields of data news, smart cities, business intelligence and the like.

The related art constructs a visualization view using a rectangular coordinate system. In order to visualize data news or other high-dimensional data, a developer needs to calculate coordinates of each point under a rectangular coordinate system, calculate position coordinates of points on a curve contour according to the coordinates under the rectangular coordinate system, and instruct a computer to draw a visualization element at the calculated position coordinates, so that a visualization view is generated.

However, the above process requires a developer to have a strong mathematical background and programming capability, and it takes a lot of time and effort to derive the mathematical formula and write the position calculation function, which results in low efficiency and high learning cost when constructing a complex visual view.

Disclosure of Invention

The embodiment of the application provides a method and a device for constructing a visual view, which are beneficial to improving the efficiency of constructing a complex visual view. The technical scheme is as follows.

In a first aspect, a method for constructing a visual view is provided, where the method includes: receiving a construction request, wherein the construction request indicates that a visual view of target data is constructed based on a set coordinate system, coordinate axes of the coordinate system comprise track coordinate axes, and the track coordinate axes refer to coordinate axes with track shapes; determining the position of the target data in a visual view according to the track coordinate axis and the target data; acquiring a visual view of the target data according to the determined position, wherein the visual view comprises a visual element for representing the target data, and the visual element is located at the determined position in the visual view; a visualization view is provided. The target data refers to data to be visualized, and for example, the target data is a chart.

The method for constructing the visual view by the coordinate system based on the track coordinate axis can support a user to define the shape of the coordinate axis through drawing or other modes through the track coordinate axis, and the position of data to be visualized in the coordinate system based on the track coordinate axis is automatically calculated, so that the development process of complex layout calculation is encapsulated, the complicated operation that the user manually calculates the specific position of an element when the view is constructed by adopting a rectangular coordinate system is avoided, the learning cost of the user is reduced, and the efficiency of constructing the complex visual view is improved.

In some embodiments, the user is enabled to input a curved trajectory as a coordinate axis. Specifically, the shape of the trajectory coordinate axis in the coordinate system indicated by the above-described construction request is a trajectory input by the user, the trajectory coordinate axis having a plurality of points with different curvatures.

In some embodiments, the input mode of the trajectory includes any one of: drawing the track in a construction interface; alternatively, the position coordinates of a plurality of points on the trajectory are input in the construction interface.

In some embodiments, a case where the user inputs a vertical coordinate system is supported. Specifically, the shape of each coordinate axis in the coordinate system indicated by the above-described construction request is a straight line. That is, the coordinate system is a vertical coordinate system.

In some embodiments, obtaining a first position corresponding to the target data on the trajectory coordinate axis includes: and acquiring the position of a track point on the track coordinate axis as a first position according to the proportion of the value of the target data in the defined domain of the track coordinate axis, wherein the distance between the track point and the end point of the track coordinate axis is related to the proportion.

In some embodiments, coordinate axis combinations are also considered in obtaining coordinate system positions. Specifically, a second position corresponding to the target data in the coordinate system is obtained according to the first position and the coordinate axis combination relationship of the coordinate system.

In some embodiments, the axis combination relationship comprises at least one of an absolute combination relationship or a relative combination relationship, the absolute combination relationship comprising a first angle that the axis of ordinate maintains at a set value with respect to a canvas that is an area of the build interface for displaying the visual view, and the relative combination relationship comprising a second angle that the axis of ordinate maintains at a set value with respect to the axis of abscissa.

In some embodiments, the determining the position of the target data in the visual view according to the trajectory coordinate axis and the target data includes: responding to that the combination relationship of the coordinate system is an absolute combination relationship, and acquiring the angle of an ordinate axis in the coordinate system relative to the canvas according to a first angle and the offset angle of the coordinate system, wherein the absolute combination relationship comprises that the ordinate axis and the canvas are kept at the first angle; and determining the position of the target data in the visual view according to the angle of the ordinate axis relative to the canvas.

By providing an absolute type combination relationship, at least the following effects can be achieved: the direction and the rotation angle of the visual elements are unified through the absolute type combination relationship, and the icons in the visual effect can be kept orderly, so that the visual view effect is improved. In addition, in a scene that a user wants to emphasize characters when a visual view is built, the absolute type combined relation characters are always not rotated and are kept parallel to the canvas, and the user can read the characters more conveniently.

In some embodiments, in a case that the coordinate axis combination relationship in the coordinate system is a relative combination relationship, in response to that the combination relationship in the coordinate system is the relative combination relationship, acquiring an angle of a ordinate axis in the coordinate system with respect to the canvas according to a second angle, an offset angle of the coordinate system, and a tangential direction of the abscissa axis, the relative combination relationship including that the ordinate axis and the abscissa axis are maintained at the second angle; and determining the position of the target data in the visual view according to the angle of the ordinate axis relative to the canvas.

By providing a relative type combination relationship, at least the following effects can be achieved: the relative coordinate axis can enable the Y axis and the X axis to keep a certain angle, when character information is not emphasized in visualization, and the visualization elements (rectangles and lines) need to have different rotation angles along with the change of the coordinate axis, the complexity of realizing the visualization view can be reduced by the relative coordinate axis.

In some embodiments, the visualization view is provided through a build interface for building a visualization view of the target data. In particular, a build interface is provided that includes a visualization view.

In some embodiments, the above-mentioned construction interface not only includes a visualization view, but also includes a coordinate system setting area for a user to set parameters of a coordinate system.

By the method, the user is supported to trigger interactive operation on the constructed interface to define the parameters of the coordinate system, the complex operation of programming program codes through a programming language is avoided, and the efficiency of constructing the visual view is improved.

In some embodiments, prior to receiving the build request, the method further comprises: in response to a coordinate axis setting instruction, a trajectory coordinate axis is determined from trajectory data input through the coordinate system setting area, the coordinate axis setting instruction instructing to set the trajectory coordinate axis based on the trajectory data.

By the method, the user is supported to define the shape of the coordinate axis through the track data, so that the track coordinate axis is more accurate and high in flexibility.

In some embodiments, the coordinate system setting area includes a trajectory drawing area for a user to draw a shape of a coordinate axis of the trajectory, and the trajectory data includes position coordinates of a trajectory point in the trajectory drawn in the trajectory drawing area.

By the mode, the user is supported to define the shape of the coordinate axis from the drawing of one track, and the method is simpler, more convenient and quicker.

In some embodiments, the coordinate system setting area includes a trajectory data option, and the trajectory data includes an attribute of the target data input through the trajectory data option.

Through the mode, at least two effects can be achieved. First, given trajectory data by data is more controllable and more accurate than a directly drawn shape. Secondly, when the layout shape that the user wants to generate is included in the data, for example, when the movement track of the data object, the outline shape of the object, etc. are used as the track shape to generate the coordinate axis, the direct assignment definition using the data is faster and more convenient, and the user does not need to copy.

In some embodiments, the supporting user triggers an interactive operation to define the coordinate axis relationship in the coordinate system through the interface. For example, the coordinate system setting area includes a coordinate axis relation option, and before receiving the construction request, the method further includes: and responding to a coordinate axis relation setting instruction, and determining the coordinate axis combination relation selected by the coordinate axis relation option as the coordinate axis combination relation of the coordinate system.

Through the method, on one hand, the user is allowed to self-define and set the combination relationship between different coordinate axes in the coordinate system, the flexibility is improved, and the constructed visual view is more matched with the requirements of the user. On the other hand, the method is faster and more convenient, the complex operation of compiling program codes for setting the coordinate axis combination relationship is avoided, and the realization complexity of constructing the visual view is reduced.

In some embodiments, the support user triggers an interactive operation through the interface to define angles of coordinate axes in the coordinate system. For example, the coordinate system setting area includes a coordinate axis angle control, and the method further includes: and responding to a coordinate axis included angle setting instruction, and determining a first angle input through a coordinate axis included angle control as an angle kept by a vertical coordinate axis and the canvas in the coordinate system under the condition that the coordinate axis combination relationship is an absolute combination relationship. And responding to a coordinate axis included angle setting instruction, and determining a second angle input by the coordinate axis included angle control as an angle kept by the ordinate axis and the abscissa axis in the coordinate system under the condition that the coordinate axis combination relationship is a relative type combination relationship.

Through the method, on one hand, the user is allowed to self-define and set the angle kept between the ordinate axis and the canvas or the angle kept between the ordinate axis and the abscissa axis in the coordinate system, so that the flexibility is improved, and the constructed visual view is more matched with the requirement of the user. On the other hand, the method is faster and more convenient, the complicated operation of programming program codes for setting angles in a coordinate system is avoided, and the realization complexity of constructing the visual view is reduced.

In some embodiments, the build interface includes a visualization view and a code region.

In some embodiments, the code region in the build interface is used to expose the first code that generates the visualization view.

Through the method, the constructed visual view and the generation code of the visual view are returned to the user through the same interface, so that the user can conveniently and synchronously check the effect and the code of the visual view.

In some embodiments, the method further comprises: in response to the code derivation instruction, the first code in the code region is output to the target location.

Through the function of exporting the codes, a user can modify the codes conveniently for secondary development, and the user is supported to copy the codes to other projects to deploy complex visual views.

In some embodiments, the method further comprises: and responding to the code execution instruction, and executing second code input in the code area to adjust the visual view.

By the method, codes input by a user can be fed back to the interactive construction process, the visual view is synchronously updated along with the codes input by the user, so that the user is supported to adjust the visual view by inputting the codes, the flexible use of the code construction and the interactive construction for constructing the chart is supported, and the technical problem that only one of the code construction and the interactive construction in the related technology can be selected for use is solved.

In some embodiments, the method further comprises: responding to attribute setting operation of the visual view triggered on the construction interface, and acquiring a third code corresponding to the attribute setting operation; third code is added to the code region in the build interface.

By the method, in a scene of constructing the visual view through user interaction, when a user executes operation once, the codes displayed in the interface can be updated in real time along with the operation of the user, so that the codes generated by the operation of the user are fed back to the user in time, the interactive adjustment of chart parameters and nesting logic of the user is facilitated, and the construction efficiency of the visual view is further improved.

In some embodiments, the constructed visualization view can be provided to the user in a variety of ways.

For example, when the visual view is constructed by the cloud device, the cloud device sends the content of the visual view to the initiator of the construction request. In this way, the building process of the visual view is packaged into the cloud service and provided to the customer.

For another example, when the terminal device constructs the visual view, the terminal device displays the visual view in the construction interface.

In a second aspect, a visual-view construction apparatus is provided, which has the function of implementing any one of the above-mentioned first aspect or options of the first aspect. The visual view construction device comprises at least one functional module, and the at least one functional module is used for implementing the method provided by the first aspect or any one of the optional manners of the first aspect.

In some embodiments, the functional modules in the visual view building apparatus are implemented by software, and the functional modules in the visual view building apparatus are program modules. In other embodiments, the functional modules in the construction apparatus of the visual view are implemented by hardware or firmware.

The visual view building apparatus optionally operates on a cloud computing system (including a plurality of cloud computing devices, such as servers) for providing a cloud service for building visual views to customers. Alternatively, the visual view building apparatus runs on an edge computing system (including a plurality of edge computing devices, such as a server, a desktop computer, etc.); alternatively, the visual view constructing apparatus runs on a terminal device (such as a notebook computer, a personal desktop computer, etc.).

Specific details of the visual view constructing apparatus provided in the second aspect may be found in the first aspect or any optional manner of the first aspect, and are not described herein again.

In a third aspect, a computing device is provided, the computing device comprising a processor and a memory, wherein the memory has stored therein computer instructions, and the processor executes the computer instructions to implement the method of the first aspect and possible implementations thereof. In some embodiments, the computing device further comprises a network interface for transmitting the built visualization view over a network. In some embodiments, the computing device further comprises a screen for displaying the built visualization view.

In a fourth aspect, a (non-transitory) computer-readable storage medium is provided. The (non-transitory) computer-readable storage medium has stored therein at least one instruction which, when executed on a computer, causes the computer to perform the method of the first aspect or any of the alternatives of the first aspect. Types of the storage medium include, but are not limited to, volatile memory, such as random access memory, non-volatile memory, such as flash memory, hard Disk Drive (HDD), and Solid State Drive (SSD).

In a fifth aspect, there is provided a computer program product comprising one or more computer program instructions which, when loaded and executed by a computer, cause the computer to perform the method of the first aspect or any of the alternatives of the first aspect. The computer program product is optionally a software installation package, which is downloaded and executed on a computing device in case it is desired to use the method as provided in the first aspect above.

In a sixth aspect, there is provided a chip comprising a memory for storing computer instructions and a processor for retrieving and executing the computer instructions from the memory to perform the method of the first aspect and any possible implementation manner of the first aspect.

In a seventh aspect, a computing device cluster is provided that includes at least one computing device. The different units of the computing device in the second aspect described above are distributed to run on different computing devices in the cluster of computing devices. Optionally, the cluster of computing devices is a cloud computing system (comprising a plurality of cloud computing devices, such as servers). Alternatively, the cluster of computing devices is an edge computing system (including a plurality of edge computing devices, such as servers, desktops); alternatively, the computing device cluster is a terminal device cluster (including multiple terminals, such as a laptop computer, a personal desktop computer, etc.).

Drawings

FIG. 1 is a schematic diagram illustrating a comparison of visualization effects in coordinate axes of different shapes according to an embodiment of the present application;

fig. 2 is a visual view of east character of the military troops of Napoleon provided in the embodiment of the present application;

FIG. 3 is a data news visualization view provided by an embodiment of the present application;

fig. 4 is a schematic diagram of constructing a visual view of the eastern characters of the Napoleon based on a rectangular coordinate system according to an embodiment of the present application;

fig. 5 is a visual view of east character of the military troops of Napoleon provided by the embodiment of the application;

fig. 6 is a schematic diagram of an application scenario provided in an embodiment of the present application;

FIG. 7 is a flowchart of a method for constructing a visualization view provided by an embodiment of the present application;

FIG. 8 is a schematic diagram of a coordinate axis combination relationship provided in an embodiment of the present application;

FIG. 9 is a logical architecture diagram of an interactive construction method of a visualization view provided by an embodiment of the present application;

FIG. 10 is a visualization view provided by an embodiment of the present application;

FIG. 11 is a schematic diagram of a construction interface of a visualization view provided by an embodiment of the present application;

FIG. 12 is a schematic diagram of a construction interface of a visualization view provided by an embodiment of the present application;

FIG. 13 is a schematic diagram of a construction interface of a visualization view provided by an embodiment of the present application;

fig. 14 is a schematic diagram of a visualization view of a trajectory coordinate system for achieving the features of nefaran according to an embodiment of the present application;

FIG. 15 is a diagram of a visualization effect provided by an embodiment of the application;

FIG. 16 is a schematic structural diagram of a visual view construction device provided in an embodiment of the present application;

fig. 17 is a schematic structural diagram of a computing device according to an embodiment of the present application.

Reference numerals are as follows:

10-terminal

11-server

60-construction interface

601-data View

602-Interactive build View

603-hierarchical view

6031-icons or diagrams

604-Attribute View (also known as parameter configuration View)

6041-Components for inputting coordinate Axis relationships

6042-Assembly for inputting Angle of coordinate axes

6043-Assembly for inputting Chart rotation angles

6044-component for entering chart names

6045-text channel

6046-character size input assembly

605-construction result display area (also called visual effect display area)

6051-visual view (Chart)

60511-rectangular icon

6052-export control to trigger export of visual views

606-code region

6061-run control for triggering run code

6062-export control for triggering export code

607-Trace drawing region

608-color selector

Detailed Description

To make the objects, technical solutions and advantages of the present application more clear, embodiments of the present application will be described in further detail below with reference to the accompanying drawings.

Some concepts of terms related to the embodiments of the present application are explained below.

(1) Data visualization (data visualization)

Data visualization refers to a technique of encoding attributes of data into attributes of a graph to present the data. Data visualization is used to more clearly and efficiently convey the information contained by the data to a user. For example, the number of people is coded into the size of a circle, and the larger the size of the circle is, the larger the number of people is represented, so that the number of people can be intuitively and effectively conveyed through the size of the circle; as another example, a date is coded as a color of a dot, a weekday is coded as a color 1, and a holiday is coded as a color 2, thereby visually distinguishing the holiday and the weekday by different colors.

(2) Visualization element

A visualization element is a graphic used to present data. Visual elements are sometimes also referred to as graphical symbols, visual symbols, or interface elements. From the perspective of the shape of the visualization element, the visualization element includes, without limitation, a rectangle, a circle, an arc, a curve, a text, a path, a region, a triangle, a star, and the like. From the perspective of the properties of the visualization elements, various properties of the visualization elements, such as position (e.g., x and y coordinates), size, color, shape, texture, line width, radius, length, width, etc., can be used to represent the data. For example, the area of a circle (visualization element) is associated with the number of people (attributes of the data), with larger areas of a circle indicating a larger number of people. Different types of visualization elements may have the same properties or may have different properties. For example, a circular element has a radius attribute and a rectangular element has a width attribute.

(3) Visual pathway

Visual channels refer to visual attributes used by visualization elements to convey information. For example, visual channels include, without limitation, position, size, color, shape, texture, and the like.

(4) Visual Coding (Visual Coding)

Visual coding refers to the use of information to code a visual channel when an individual receives the information, such as: and coding visual channels such as colors, sizes and the like, wherein the darker the color is, the larger the size is, the larger the data value is.

(5) Trajectory coordinate axis

The trajectory coordinate axis refers to a coordinate axis in which the shape is a trajectory. For example, referring to fig. 1 (b), the shape of the coordinate axis of the track is optionally not a straight line, but a curved broken line. The shape of the trajectory coordinate axis is set by the user, for example.

The trajectory coordinate axis can support the construction process of the visualization view shaped as the trajectory. For example, referring to fig. 1, (a) and (b) in fig. 1 show visualization views obtained by visualizing the same data using two coordinate axes, respectively. Fig. 1 (a) shows a visualized view obtained by visualizing data using a coordinate system having a straight-line shape and an X-axis and a Y-axis. The visualization result of (a) in fig. 1 is a straight line. Fig. 1 (b) shows a visualized view obtained by visualizing the data using a coordinate system having an X-axis (trajectory coordinate axis) in the shape of a broken line and a Y-axis in the shape of a straight line. Since the shape of the X axis (trajectory coordinate axis) in fig. 1 (b) is a broken line, the visualization result in fig. 1 (b) is affected by the shape of the trajectory coordinate axis and also takes a broken line.

Typical application scenarios for trajectory axes include the following cases one through three.

The method comprises the following steps of visualizing data which are distributed in curves with irregular values in the data news field and the like.

For example, in the field of data news, the layout of visual elements in a view is often distinguished in some areas to deepen the theme and attract viewers. For example, in a human-related visualization view, the layout shape of the visualization elements resembles the shape of a person; in the visualization layout related to the yellow river, the layout shape of the visualization elements resembles the contour shape of the yellow river. In such scenarios, the trajectory coordinate axis facilitates faster construction of the visualization view. For example, in an application scene of constructing a human-related visual view, a user is supported to set a profile of a person as trajectory data of a trajectory coordinate axis, so that the shape of the trajectory coordinate axis is the profile of the person, and the human-related visual view is conveniently constructed. For another example, in an application scene of building a visualization view related to the yellow river, a user is supported to set the outline of the yellow river as trajectory data of a trajectory coordinate axis, so that the shape of the trajectory coordinate axis is the outline of the yellow river, and the visualization view related to the yellow river is conveniently built.

And secondly, realizing a visual view with complex layout.

Particularly, when the visualization view is realized by using the rectangular coordinate system, a large amount of calculation is required for the user when the visualization with a complex layout is realized. By using the trajectory coordinate axis defined in the embodiment of the present application, these calculation processes can be omitted for the user, and the system automatically performs calculation based on the trajectory coordinate axis.

And a third situation, namely a scene for visualizing the high-dimensional data.

In particular, high-dimensional data contains many attributes, which are difficult to express with simple conventional views. The various attributes of the high dimensional data are exposed through the trajectory axis to facilitate more complex views. For example, in a scene for visualizing military marching data, several attributes of longitude and latitude military number marching direction and time can be shown through a coordinate system based on a track coordinate axis.

In summary, by providing a track coordinate axis, a user can be supported to construct a coordinate axis with a user-defined shape, data of various curves with irregular values and high-dimensional data can be conveniently visualized, and the requirement for constructing a visual view with an irregular layout is met.

(6) Trajectory data

The trajectory data is data for setting trajectory coordinate axes. The trajectory data includes the position coordinates of a series of points. For example, referring to fig. 1 (b), the trajectory coordinate axis in fig. 1 (b) is defined by four vertices of the polyline as trajectory data. That is, after the position coordinates of the point a, the point b, the point c, and the point d in fig. 1 (b) are obtained, a trajectory coordinate axis shown in fig. 1 (b) can be set by using the position coordinates of the four points as trajectory data.

(7) Coordinate axis attributes

The coordinate axis attribute is used to indicate a mapping relationship between values of data and canvas pixel ranges (i.e., locations in the visualization view). The coordinate axis attribute is sometimes also referred to as a coordinate axis parameter. The coordinate axis attributes include, without limitation, types of coordinate axes, definition fields of coordinate axes, value fields of coordinate axes, and the like.

Coordinate axis types include, without limitation, linear coordinate axes, category coordinate axes, circular coordinate axes, quadratic function coordinate axes, exponential function coordinate axes, polar coordinate axes, and the like.

The domain of the coordinate axis represents the value range of the data to be visualized. For example, the domain of the coordinate axes is [0,100], which indicates that the data to be visualized has a value range of [0,100].

The range of the coordinate axis (range) is also called the range of the coordinate axis, and the range of the coordinate axis is used for indicating the range of the coordinate axis distributed in the canvas. The value range of the coordinate axes is used to determine how much area within the canvas the data within the defined field should be drawn when constructing the visualization view. For example, if the value ranges of the coordinate axes are [0,600], [0,800], it means that the coordinate axes are drawn in a rectangle with a length of 600 and a width of 800 in the canvas.

As the information contained in data becomes more complex, the design of data visualization views is increasingly limited to the use of simple chart formats. For example, the data news field is pursuing the integration of artistic sense and intuition in the view, and the data display form with aesthetic sense and according with the field characteristics is designed to transmit information, so as to obtain the attention of the audience and the interest of reading the chart. For example, referring to fig. 2, fig. 2 shows a 1812 year-old visual representation of the eastern character of the Napoleon army, the trajectory of the lines representing the marching routes of the army, the gray scale of the lines representing the attack and retreat of the army, the width of the lines representing the number of army, and the lower line graph showing the local temperature of the army as it travels. The view enables people to intuitively feel that army marches from west to east in winter and breaks down from east to west continuously.

The data news visualization view in fig. 3 adopts an S-shaped layout, and shows data of 2015-2021. Figure 3 makes reasonable use of space, shows a large amount of text and data information, and enhances the ornamental value, which is beautiful and practical.

However, in the implementation of the visualization view, the conventional method is limited to use of a rectangular coordinate system for layout of the visualization elements. In order to implement complex visualized works, developers are generally required to write programs corresponding to the design manuscripts of designers, construct mapping functions of data values to pixel points on a canvas, manually calculate specific pixel positions of elements in a view, and draw and present visualization results. The above process requires a developer to have a strong mathematical background and programming capability, and it takes a lot of time and effort to derive a mathematical formula and write a position calculation function, which directly results in high threshold and low efficiency of complex visualization construction. Although the related art helps the user create a coordinate system type other than the conventional numerical rectangular coordinate system by enumerating polar coordinate axes, category coordinate axes, and the like. However, the limited coordinate axis options obtained by enumeration can only form a few typical coordinate systems, and cannot meet the modern design requirements of customized, specialized and open visual works with artistic feelings and increasingly complex layouts.

In addition, most of the conventional visualization construction processes rely on developers to directly write visualization programs. Coordinate system definition and visual coding tasks are implemented in the program. Therefore, developers are required to skillfully use the meaning of parameters of methods in a visualization language and an Application Programming Interface (API), and also need to iteratively adjust parameters in a program corresponding to a design draft in the development process, recompile, draw and compare the parameters, so as to achieve an expected visualization effect. Thus, the high level of visualization developer requirements and cumbersome development process present significant challenges to building complex visualization views. Interactive visual building interfaces, such as systems like tablet (data visualization analysis tool), voyager2 (visual analysis tool), etc., mostly focus on the binding process for helping users define data attributes to visual channels such as color, length, etc., and do not support the freely defined coordinate system such as drawing coordinate axes by users, thereby completing the building process of complex visual views.

In summary, there is a need for an intuitive and efficient method for constructing a complex visual view, which improves the previous complex visual view construction scheme with high learning cost and low efficiency.

At present, visual programming languages, such as D3js (a JavaScript function library based on data-driven document working method) and Vega, can satisfy the traditional fast construction task of simple visual views by using a data mapping library or a visual chart library, but cannot support the efficient construction task of professional complex and freely-opened visual views by only providing limited coordinate system types. The process of implementing the visualization in fig. 2 using D3js language is shown in fig. 4, and fig. 4 is a schematic diagram of an implementation process of the nefiran east case in a rectangular coordinate system, and includes the following steps (a) to (e).

In step (a), firstly, the user needs to establish an X-axis with longitude as a definition domain and draw width as a value domain.

Step (b) the user then needs to establish the Y-axis with dimensions as the domain and canvas height as the range.

And (c) acquiring the position of each track point in the data on the canvas.

And (d) connecting the adjacent track points by using line segments.

And (e) finally converting the quantity of the army corresponding to each track point into a width numerical value, giving the width numerical value to each line segment as the width of the line segment, and taking the marching direction as the color of the line segment.

However, the military trajectory drawn by the above-mentioned flow is segmented, because the width of each segment is unique, the continuous curve effect as shown in fig. 5 cannot be achieved. The effect can show the continuous reduction process of the army in the marching process, and the visual effect is better. If the process is modified to generate the continuous curve shown in fig. 5, the developer must calculate the coordinates of the points on the outline of the curve in the rectangular coordinate system. The process is shown as (f) in FIG. 4 and consists of the following 5 steps.

And (f-1) firstly acquiring the coordinates of each track point in the rectangular coordinate system.

And (f-2) acquiring the offset length mapped by the army number corresponding to the current track point.

And (f-3) calculating the normal vector direction (shown by an arrow) of the current track point.

And (f-4) calculating according to the offset length and the normal vector direction to obtain a horizontal coordinate offset delta x and an offset delta y, and calculating according to the coordinate offset of the track point to obtain the position coordinate of the corresponding point on the curve outer contour.

And (f-5) connecting the external contour coordinates of the curves corresponding to all the track points to generate a target curve.

In the process, the normal vector direction, the offset length, the offset delta x and the offset delta y need to be calculated by using a trigonometric function, the process is complicated, the writing program is easy to make mistakes during development, and the debugging process consumes the energy of developers very much. Even a developer skilled in the visualization language API needs to debug a program and carefully write a calculation function, and continuously adjust the normal vector angle and the line width in the program corresponding to a design draft. The development and debugging process is extremely high in threshold, tedious, unintuitive and low in efficiency.

In the process of constructing the open and customized visual views in the application field such as data news, the technical problems generated by the construction flow are generally existed. For example, in order to implement the view shown in fig. 3, a developer needs to manually calculate the position coordinates of each piece of data on the corresponding arc in the rectangular coordinate system, calculate the coordinates of four points of a rectangle through a normal vector and an offset, draw the rectangle and text information, and finally perform the rotation operation of elements. Such a construction process will inevitably waste a lot of manpower, material resources and financial resources.

For implementing a complex visualization view by using several typical mapping methods API including linear mapping, exponential mapping, category mapping, angle mapping, time mapping, etc., or providing a visualization view template of different types of coordinate systems, developers familiar with programming API and mathematical knowledge are required to manually calculate the position of data in the coordinate system, so as to locate the visualization elements, but cannot freely define the coordinate system and let the system automatically calculate the position of data in the coordinate system. In addition, programming and manual parameter adjustment processes in the development process also pose challenges to the realization of efficient visualization construction schemes. Therefore, the traditional construction scheme with high cost, high threshold and low efficiency cannot meet the construction requirement of the complex visual view with increasingly enhanced degree of freedom in customization, specialization and now.

In recent years, interactive construction schemes for visual views have largely focused on helping users define visual codes for implementing traditional simple charts. The built-in systems only have a rectangular coordinate system or a polar coordinate system and other typical coordinate systems, so that the design of visualization is limited, the generated view customization is low, the layout of visualization elements is not flexible and changeable, and the complex chart construction task can not be supported.

In view of this, in some embodiments of the present application, a requirement for constructing a complex customized visual view appearing in each field at the present stage or a visual view with a professional design and a special layout requirement is met, a user is supported to freely define a coordinate system, information such as position coordinates of visual elements in the user-defined coordinate system is automatically calculated in the system, so that the workload of the user can be reduced, the user can pay attention to visual design and visual coding design, the threshold of a developer is reduced, and the development efficiency is improved. Meanwhile, according to the embodiment of the application, aiming at the characteristics of high development difficulty, complex debugging process and the like caused by the fact that codes need to be compiled in the current stage building process, an interactive interface is provided, a user is helped to freely build a coordinate system and a visual view, the building efficiency of complex visualization is further improved, the learning cost is reduced, and the rapid research, development and deployment of the view are realized.

The embodiment of the application provides a visual grammar supporting a user to freely define a coordinate system. On the basis, a set-up interface for customizing the visual view is designed, and provides a set of interaction method, so that a user can be helped to intuitively define the parameters of the coordinate system or freely draw the coordinate system, designate visual codes and adjust the parameters, and finally output codes and results corresponding to the visual view, and the user can set up the complex visual view with the minimum time cost. Compared with the related scheme, the method and the device have the advantages that the user is allowed to interactively and freely define the coordinate system and the visual coding, the complex development processes of layout calculation and bottom rendering are encapsulated, the workload and the use threshold of the user are greatly reduced, and the development efficiency is improved.

The following illustrates an application scenario of the embodiment of the present application.

Fig. 6 is a schematic diagram of an application scenario provided in an embodiment of the present application. As shown in fig. 6, the application scenario includes a terminal 10 and a server 11, and the terminal 10 and the server 11 are connected through a wired network or a wireless network. The role of the various devices, typical product form, deployment location and interaction of fig. 6 are illustrated below.

(1) Terminal 10

The terminal 10 is used for receiving the user's operation and presenting the visual chart to the user. In some embodiments of the present application, the terminal 10 is specifically configured to display a visualization construction interface for nested charts in a screen and to receive user input to the visualization construction interface.

In some embodiments of the present application, the terminal 10 is used to provide a channel for the user to construct a visual chart in two ways, i.e., interaction and code input, so as to ensure flexibility and correctness of visualization construction. In the interactive building process, the visual building interface displayed by the terminal 10 includes an input component (e.g., an input box, a selection box), and the user triggers an input operation on the input component to input the attribute of the chart. The terminal 10 receives the attributes of the chart input by the user on the input component, acquires the constructed visual view based on the attributes of the chart configured by the user, and displays the constructed visual view in the construction interface. In the process of constructing in a code mode, a user inputs program codes in a visual constructing interface. The terminal 10 receives program codes input by a user in the visual construction interface, acquires the constructed visual view based on the program codes input by the user, and displays the constructed visual view in the construction interface.

There are many possible product configurations for the terminal 10. The terminal 10 includes, but is not limited to, a personal computer, a mobile phone, a notebook computer, an IP phone, a camera, a tablet computer, a wearable device, and the like.

The terminal 10 is deployed in a terminal 10 environment or in a border environment. In some embodiments, the terminal 10 is deployed in a local area network.

(2) Server 11

The server 11 is used to provide a construction service of the visual view. In some embodiments of the present application, the server 11 is specifically configured to calculate layout parameters of sub-charts according to the coordinate axis attribute of the parent chart, such as position coordinates of the sub-charts in the canvas area of the interface. Optionally, the server 11 is also used for undertaking other tasks which take a lot of effort when building the visualization view.

The server 11 may be an independent hardware device, or a cluster or distributed system including multiple hardware devices, or a virtualized device implemented based on cloud computing and Network Function Virtualization (NFV) technology. Virtualized devices include, without limitation, virtual machines or containers.

The server 11 is deployed in a cloud environment. In some embodiments, the terminal 10 is deployed in the Internet.

In some embodiments, the terminal 10 and the server 11 interact to implement the method embodiments described below. For example, the terminal 10 transmits a visualization request to the server 11 in response to an operation by the user, accessing a visualization construction service provided by the server 11. The visualization request carries information required to build the chart, such as parameters configured by an input component of the build interface or code entered through the build interface. The server 11 responds to the visualization request, constructs a visualization chart according to the information carried in the visualization request, and returns the visualization chart to the terminal 10.

The interaction between the terminal 10 and the server 11 includes, but is not limited to, interaction via browser software or service client software. When interaction is performed in a browser software manner, the server 11 is, for example, a web server 11, the terminal 10 accesses a specified web page through the browser software to trigger the visualization request, and the server 11 carries the constructed visualization view in an HTML file and returns the visualization view to the terminal 10. When the interaction is performed in the service client software, the server 11 is, for example, a background server 11 associated with the service client software, and the terminal 10 accesses the server 11 through the service client software, so as to obtain a visual view.

The above-described scenario of interaction between the terminal 10 and the server 11 shown in fig. 6 is optional. Alternatively, the terminal 10 performs the method embodiments described below locally.

The following illustrates a method flow of the embodiments of the present application.

Fig. 7 is a flowchart of a method for constructing a visual view according to an embodiment of the present application. The method shown in fig. 7 includes the following steps S201 to S205.

The network deployment scenario upon which the method of fig. 7 is based is optionally as described above with respect to fig. 6. For example, referring to fig. 6, the computing device in the method shown in fig. 7 is a server or a terminal in fig. 6.

The method shown in fig. 7 is described by taking a computing device as an example to execute steps S201 to S204. In other embodiments, steps S201 through S204 are performed by multiple devices in cooperation. For example, referring to fig. 6, the method shown in fig. 7 is cooperatively performed by a server and a terminal. In some embodiments, the server undertakes primary processing and the terminal undertakes secondary processing; in other embodiments, the server undertakes secondary processing and the terminal undertakes primary processing; alternatively, the server or the terminal may be separately responsible for the processing. In one possible implementation, the terminal serves as an initiator of a visualization view construction request, and requests the server to construct a visualization view of a chart; the server serves as a responder of the visualization view request, the visualization view is constructed, the constructed visualization view is returned to the terminal, and the terminal displays the visualization view.

The method shown in fig. 7 relates to a plurality of positions such as positions on coordinate axes, positions in a coordinate system, and the like. In order to distinguish between different locations, a plurality of different locations are described with "first location", "second location", distinction.

The method shown in fig. 7 relates to the angle between the coordinate axis and the canvas and the angle between the ordinate axis and the abscissa axis. In order to distinguish between different angles, a plurality of different angles are described with "first angle", "second angle", distinction.

Step S201, the computing device receives a build request.

The build request instructs to build a visualization view of the target data based on the set coordinate system.

The coordinate axes of the set coordinate system include trajectory coordinate axes. Alternatively, the trajectory coordinate axis is an X-axis of the set coordinate system, or the trajectory coordinate axis is a Y-axis of the set coordinate system. Optionally, the set coordinate system is a two-dimensional coordinate system, and the coordinate axis of the coordinate system is a combination of one track coordinate axis and another type of coordinate axis besides the one track coordinate axis. For example, the X-axis of the coordinate system is a trajectory coordinate axis, and the Y-axis is a linear coordinate axis. Alternatively, both coordinate axes of the set coordinate system are trajectory coordinate axes.

Target data refers to data to be visualized. The target data includes at least one attribute. For example, when constructing the military east character visualization view shown in fig. 2, the target data includes attributes such as longitude where the military is located, latitude where the military is located, and military position.

In some embodiments, the shape of the trajectory axis is a user-entered trajectory, the trajectory axis having a plurality of points of different curvature.

In some embodiments, the input mode of the track corresponding to the track coordinate axis includes any one of the following: drawing the track in a construction interface; alternatively, the position coordinates of a plurality of points on the trajectory are input in the construction interface.

Step S202, the computing equipment determines the position of the target data in the visual view according to the track coordinate axis and the target data.

Optionally, the process of determining the position comprises: the computing device obtains a first position corresponding to the target data on the trajectory coordinate axis. And the computing equipment acquires a second position corresponding to the target data in the coordinate system according to the first position.

In some embodiments, the first position is determined by a pre-established mapping rule. The mapping rule indicates a mapping relationship from the data value to the position coordinate on the trajectory coordinate axis. And the computing equipment acquires the position coordinates of the value mapping of the target data as the first position according to the target data and the mapping rule.

In some embodiments, the first position is determined according to a ratio of the data value to the domain. For example, the computing device acquires, as the first position, a position of a trajectory point on the trajectory coordinate axis according to a proportion of the value of the target data in a defined domain of the trajectory coordinate axis. The distance between a trajectory point and an end point (e.g., start or end point) of the trajectory coordinate axis is related to the scale. For example, the trajectory coordinate axis is defined in the range of 0 to 100, and data with a value of 30 would be mapped to a location on the canvas where the trajectory point is thirty percent of the entire trajectory length from the start of the trajectory.

The canvas is an area of the build interface for displaying the visualization view. The second position is the corresponding pixel position of the target data in the canvas, and the second position indicates where the visual element should be drawn on the screen.

In some embodiments, the computing device obtains a second position corresponding to the target data in the coordinate system according to the first position and taking the mapping position of the data on the Y axis as an offset.

In some embodiments, the calculation process of the second position includes the following steps (a) to (c).

The step (a) the calculation device calculates the coordinate position of the target data mapped on the X-axis according to the value of the target data. And, the calculation device calculates the coordinate position on the Y-axis to which the target data is mapped, based on the value of the target data. Wherein, X-axis or Y-axis is the track coordinate axis. That is, step (a) includes step S202 described above.

And (b) the calculation equipment acquires the horizontal coordinate offset and the vertical coordinate offset according to the coordinate position of the target data mapped on the Y axis.

And (c) superposing the horizontal coordinate offset and the vertical coordinate offset with the coordinate position mapped by the data on the X axis by the computing equipment to obtain the final data coordinate position (second position).

The more specific calculation process of the second position may refer to steps S1 to S3, and the descriptions of equations (1) to (4) below.

In an exemplary embodiment, the calculation process according to the trajectory coordinate axis and the data includes the following steps (1) to (3).

Step (1) calculates a ratio based on the data value and the domain. For example, if the domain is 0 to 100 and the value is 20, the ratio is 20/100=0.2.

And (2) acquiring track points from the track according to the proportion calculated in the step (1), wherein the proportion of the distance between the track points and the track starting point to the track length is equal to the proportion. For example, if the track is 300 a long and the ratio calculated in step (1) is 0.2, then a position twenty percent away from the start of the track, i.e., a position 60 away from the start of the track, is found.

And (3) zooming the position coordinates of the track points determined in the step (2) according to the value range of the coordinate axis, so as to obtain the canvas pixel positions corresponding to the track points. For example, if the value range of the coordinate axes is [0,600], [0,800], it means that the trace should be drawn in a rectangle 600 length by 800 width in the canvas if all the traces are drawn on the canvas; if the locus point is a location from the starting point 60, the corresponding pixel in the canvas for that point 60 is found.

In some embodiments, the coordinate system position is determined according to a preset coordinate axis combination relationship. For example, the computing device obtains a second position corresponding to the target data in the coordinate system according to the first position and the coordinate axis combination relationship of the coordinate system.

The coordinate axis combination relation refers to the relation between different coordinate axes in a coordinate system. For example, for a two-dimensional coordinate system, the coordinate axes of the two-dimensional coordinate system include an abscissa axis and an ordinate axis, and the coordinate axis combination relationship of the two-dimensional coordinate system is a relationship between the abscissa axis and the ordinate axis. The present embodiment provides various types of coordinate axis combinations, and some possible coordinate axis combinations are described below.

(1) Absolute type combination relationship

An absolute type combination relation is, for example, a first angle in which the ordinate axis (Y-axis) is held at a set value with respect to the canvas in the coordinate system, the direction of the ordinate axis optionally being independent of the direction, shape and type of the abscissa axis (X-axis). Illustratively, referring to fig. 8, (a) in fig. 8 is a schematic view of an absolute type combination relationship. As shown in fig. 8 (a), in the case of adopting an absolute combination relationship, the Y-axis direction of each point always forms a certain angle with the canvas, that is, the included angle between the Y-axis direction of each point and the canvas is the same. A typical application scenario of the absolute type combination relationship is to construct a visual view with a complex shape in the X-axis direction and a large data volume.

The present embodiment can achieve at least the following effects by providing an absolute type combination relationship: the absolute type combination relationship unifies the direction and rotation angle of the visual elements. For example, in the scenario of visualizing fig. 3, if the coordinate system of the absolute type combination relationship is used, all rectangles are vertically upward, and all characters are also vertically, so that the generated visualization effect is relatively neat. In addition, in a scene that a user wants to emphasize characters when a visual view is built, the absolute type combined relation characters are always not rotated and are kept parallel to the canvas, and the user can read the characters more conveniently.

In some embodiments, the calculation from the coordinate position on the trajectory coordinate axis to the position in the coordinate system comprises: responding to the absolute combination relation of the coordinate system, and acquiring the angle of the ordinate axis relative to the canvas in the coordinate system by the computing equipment according to the first angle and the offset angle of the coordinate system; the computing device obtains a second position according to the angle of the ordinate axis relative to the canvas and the first position.

(2) Relative type combination relationship

The relative combination relationship is, for example, a second angle in which the ordinate axis (Y axis) and the abscissa axis (X axis) are held at a set value in the coordinate system. Exemplarily, referring to fig. 8, (b) in fig. 8 is a schematic diagram of the relative type combination relationship. As shown in fig. 8 (b), in the case of the relative combination, the Y-axis direction of each point always forms a certain angle with the X-axis direction, that is, the included angle between the Y-axis direction and the X-axis direction of each point is the same. The typical application scenario of the relative type combination relationship is to construct a visual view with small data size and simple X-axis shape.

The present embodiment can achieve at least the following effects by providing the relative type combination relationship: the relative coordinate axes allow the Y-axis to be at an angle to the X-axis, thereby reducing the complexity of constructing a visualization such as that shown in fig. 3. In addition, when the text information is not emphasized during visualization, and the visualization elements (rectangles and lines) need to have different rotation angles along with the change of the coordinate axes, the relative coordinate axes can reduce the complexity of realizing the visualization.

In some embodiments, the angle between the ordinate axis and the canvas (the first angle) in the absolute type combination or the angle between the ordinate axis and the abscissa axis (the second angle) in the relative type combination is set by a user. For example, the computing device obtains the definition information of the coordinate system by the user, and obtains the first angle or the second angle from the definition information. Alternatively, the definition information is generated based on a code input by a user through a programming language. For example, the above definition information is a declaration code visually encoded.

By supporting the setting of the included angle between the Y axis and the X axis or the included angle between the Y axis and the canvas, the computing equipment can automatically perform layout calculation through the angle specified by the user in the process of constructing the visual view, and the manual calculation of the user is not needed. In addition, after the angle is declared, a user can quickly declare more various visual views, or the angle is adjusted according to the visual effect of the data, so that the view with better visual effect and artistic effect is obtained. For example, the user does not want the Y axis to be vertical, a 45-degree included angle between the Y axis and the X axis can be set, and the computing device generates an oblique histogram according to the 45-degree included angle set by the user, so that a half of the canvas space in the upper left corner is saved for drawing other elements.

In some embodiments, the calculation from the coordinate positions on the trajectory coordinate axes to the positions in the coordinate system comprises: in response to the fact that the combination relation of the coordinate system is a relative combination relation, the computing device obtains the angle of the ordinate axis relative to the canvas in the coordinate system according to the second angle, the offset angle of the coordinate system and the tangential direction of the abscissa axis; the computing device obtains a second position according to the angle of the ordinate axis relative to the canvas and the first position.

And S204, the computing equipment acquires a visual view of the target data according to the determined position.

The visualization view includes a visualization element for at least one representation of the target data. The visualization element is located at a determined position in the visualization view, such as the second position described above. Specifically, the computing device draws the visualization elements at the determined positions in the canvas according to the visualization elements bound to the target data, so that a visualization view is obtained.

Step S205, the computing device provides a visualization view.

Optionally, the visualization view is provided to the user through a build interface. A build interface is an interface for building a visual view of data. For example, a build interface provided by a computing device includes a visualization presentation area having a visualization view displayed therein. Through the construction interface, the construction result of the nested chart can be intuitively displayed in the visual construction process. Alternatively, the visualization view is provided to the user in other forms, such as files, other interfaces besides a build interface, and so forth.

Providing a visualization includes a number of specific ways. In one possible implementation, the computing device sends the content of the visualization view to the originator of the build request. For example, the computing device is provided as a cloud server 11, the initiator of the construction request is a terminal 10, the construction request is a hypertext Transfer Protocol (HTTP) request, after the computing device obtains the visual view, the content of the visual view is encapsulated as a hypertext Markup Language (HTML) file, and the HTML file is sent to the terminal 10 through an HTTP response. In another implementation, a computing device displays a visualization view in a build interface.

The embodiment provides a method for constructing a visual view by using a coordinate system based on a track coordinate axis, which can support a user to define the shape of the coordinate axis through the track coordinate axis, and automatically calculate the position of data to be visualized in the coordinate system based on the track coordinate axis, thereby encapsulating the development process of complex layout calculation, avoiding the complex operation of manually calculating the specific position of an element by the user when a rectangular coordinate system is adopted to construct the view, reducing the learning cost of the user and improving the efficiency of constructing the complex visual view.

Next, an analysis is made on the principle of the above-described embodiment to solve the problem of the related art that the steps are cumbersome in constructing the visual view of the continuous curve as shown in fig. 5.

The above embodiment encapsulates the calculation process of the contour points on the curve. For example, after a user sets a track coordinate axis as a coordinate axis in a coordinate system and sets track data, the system can calculate the position of a track contour point by using a calculation process related to the track coordinate axis and the coordinate system, the system connects the track contour points according to curves to form a visual view containing continuous curves, the position of the contour point does not need to be calculated manually by the user, and therefore the complicated process of constructing the visual view is simplified remarkably.

In some embodiments, an interactive build interface supporting a custom coordinate system is provided, the build interface including a visualization view and a coordinate system setting area for a user to set parameters of the coordinate system. In the method shown in fig. 7, the trajectory data of the trajectory coordinate axes, the coordinate axis combination relationship, and the included angle between the coordinate axes are set by an operation triggered on a set region of the coordinate system. For example, after the user inputs trajectory data into the coordinate system setting area, a coordinate axis setting instruction is triggered, and the coordinate axis setting instruction instructs to set trajectory coordinate axes based on the input trajectory data. The computing device determines a trajectory coordinate axis from trajectory data input through the coordinate system setting area in response to the coordinate axis setting instruction.

Referring to fig. 12, fig. 12 is an illustration of a coordinate system setting area in the build interface 60 shown in fig. 11. The coordinate system setting area includes an interaction building view 602, a property view 604, and a trajectory drawing area 607. Next, each component included in the coordinate system setting area in the build interface will be described.

(1) Interactive build View 602

The interaction build view 602 is used for a user to create a chart into a visualization view. The interaction build view 602 allows a user to specify the types of icons in the diagram, nesting relationships between diagrams, diagram structure, and the like. For example, the interaction building view 602 in (a) of FIG. 13 contains a created set of rectangular icons 6031. The interactive build view 602 in (b) of fig. 13 contains two sets of rectangular icons 6031 and one set of circular icons 6032 created.

(2) Attribute View 604

The attribute view 604 is used for configuring visual attributes (such as color, size, and the like) of the visual elements by the user, so that the chart structure building and the visual content filling are divided, and the building process of the user is clearer. The property view 604 includes a variety of input components, and the types of input components in the property view 604 include, without limitation, the following components (a) to (f).

Component (a) text entry box: for name, etc. text type parameter entry.

Component (b) numeric input box: the digital input method is used for inputting digital parameters such as height, width, font size, line width and the like.

Component (c) drop-down box (also called drop-down menu): for enumerating type parameter inputs.

Component (d) color selection box: for color input.

Component (e) radio box: for optional parameter input.

Component (f) combined text entry box: for parameter inputs where the range, margin, etc. contains multiple values.

In some embodiments, the property view 604 includes various components that support the input of coordinate system parameters, thereby allowing a user to set the coordinate system parameters utilized by the method of FIG. 7. For example, referring to FIG. 12, property view 604 includes a coordinate axis relationship option 6041, and a coordinate axis angle control 6042.

A coordinate axis relation option 6041 is a component for inputting a coordinate axis relation, and the coordinate axis relation option 6041 is, for example, a drop-down box. The user triggers an operation on a coordinate axis relationship option 6041, and selects one of absolute type combination relationships and relative type combination relationships as a combination relationship of coordinate axes in a custom coordinate system. The operation of the coordinate axis relation option 6041 by the user triggers a coordinate axis relation setting instruction. The computing device determines the coordinate axis combination relationship selected by the coordinate axis relationship option 6041 as the coordinate axis combination relationship of the coordinate system. For example, in fig. 12, the user selects an absolute (fixed) combination relationship as a combination relationship of coordinate axes in the custom coordinate system.

A coordinate axis angle control 6042 is a component for inputting a coordinate axis angle. The coordinate axis angle control 6042 is, for example, a numeric input box. When the coordinate axis combination relationship is an absolute combination relationship, the user triggers an operation to the coordinate axis included angle control 6042, and inputs an angle maintained by the ordinate axis and the canvas. In response to the coordinate axis angle setting instruction, the computing device determines the first angle input through the coordinate axis angle control 6042 as the angle maintained by the ordinate axis and the canvas in the coordinate system. Alternatively, when the coordinate axis combination relationship is the relative type combination relationship, the user triggers the operation of the coordinate axis included angle control 6042 to input the angle held by the ordinate axis and the abscissa axis. In response to the coordinate axis angle setting instruction, the computing device determines the second angle input through the coordinate axis angle control 6042 as an angle maintained by the ordinate axis and the abscissa axis in the coordinate system. For example, in FIG. 12, the user enters an angle of 66 degrees as the angle that the ordinate axis maintains with the canvas in the custom coordinate system.

In some embodiments, property view 604 also provides a component 6043 for entering the angle of rotation of the chart. For example, in FIG. 12, the user inputs angle 0 degrees to component 6043 as the chart rotation angle in the custom coordinate system.

In some embodiments, the properties view 604 also provides a component 6044 for entering a chart name. For example, in fig. 12, the user inputs the character string 132 as the name of the chart to the component 6044.

(3) Trajectory drawing region 607

The trajectory drawing region 607 is used for the user to draw the shape of the trajectory coordinate axis, thereby setting trajectory data of the trajectory coordinate axis. The trajectory rendering region 607 is also referred to as a trajectory rendering panel.

In the process of setting the parameters of the trajectory coordinate axes, the user may perform a drawing operation on the trajectory drawing area 607 through a mouse, a touch screen, or other input devices, thereby drawing a trajectory. In response to a drawing operation of the trajectory drawing region 607 by the user, the computing apparatus acquires the trajectory drawn in the trajectory drawing region 607, and extracts position coordinates of trajectory points from the trajectory as trajectory data of trajectory coordinate axes. For example, referring to fig. 12, after the user draws a track, the computing device extracts the position coordinates of a track point a, the position coordinates of a track point B, the position coordinates of a track point C, and the position coordinates of a track point D from the track, and sets the position coordinates of the four track points as track data of a track coordinate axis.

Setting the shape of the trajectory coordinate axis by the drawing operation is an optional manner. Alternatively, attributes of the data to be visualized are used as trajectory data. For example, the coordinate system setting area includes a track data option (not shown in fig. 12) to which the user drags or otherwise inputs the attribute of the target data. The computing device sets the attribute of the target data input through the trajectory data option as trajectory data of the trajectory coordinate axis. For example, the user drags a first attribute of the target data and a second attribute of the target data to the track data option, and the computing device sets the first attribute of the target data as an abscissa of the track data and sets the second attribute of the target data as an ordinate of the track data.

By using trajectory data to define the coordinate axes, at least two effects are achieved. First, given trajectory data by data is more controllable and accurate than shapes drawn directly. Secondly, when the layout shape that the user wants to generate is included in the data, for example, when the movement track of the data object, the outline shape of the object, etc. are used as the track shape to generate the coordinate axis, the direct assignment definition using the data is faster and more convenient, and the user does not need to copy.

In some embodiments, as shown in FIG. 11, the build interface 60 further includes a data view 601, a hierarchy view 603, a build result presentation area 605, and a code area 606.

(4) Data view 601

The data view 601 is used for displaying imported data to be visualized. The data presented in the data view 601 includes at least one attribute and a value for each attribute.

(5) Hierarchical view 603

The hierarchy view 603 is used to show a hierarchy view of charts. The hierarchical structure diagram is used to represent each icon (sub-graph) included in the graph. Charts that are logically at different levels have different heights in the hierarchy chart. For example, in executing the method shown in FIG. 7, the hierarchical view 603 is used to show a hierarchical structure diagram of target data of which the type is a chart, and the chart of the icon type in the hierarchical structure diagram is located at the lower layer of the parent chart. Through the design of the hierarchical view 603, the hierarchical structure of the chart in the current construction can be visually displayed, and the chart surface hierarchical structure is transmitted to a user through an interface.

(6) Build results display area 605

The build result display area 605 is used to present the build results of the visualization view. The visualization view 6051 rendered by the rendering module 503 is presented in the build result presentation area 605. In fig. 11, the visual view 6051 rendered by the rendering module 503 specifically includes a set of rectangular icons 60511.

In some embodiments, build result presentation area 605 includes export control 6052, and when a user triggers an operation on export control 6052, the computing device outputs the built visualization view 6051 to the target location in a picture, file, or other form.

(7) Code region 606

The code area 606 is used to expose the code that generates the visualization view. In some embodiments, the code region 606 includes export controls 6062 and run controls 6061. Export control 6062 is used to trigger a code export instruction. When the user triggers an operation on the export control 6062, the computing device outputs the code in the code region 606 to the target location in response to the code export instruction. The run control 6061 is used to trigger a code run instruction. When the user triggers an operation on the run control 6061, the computing device runs the code entered in the code region 606 in response to the code run instruction.

Through the visualization component construction interface shown in fig. 11, when a user constructs a visualization view, the user can perform the steps of object creation and parameter configuration in an interactive manner, and the user can complete the steps of object creation and parameter configuration through dragging, so that the construction process is further simplified.

The code shown in the code area 606 in fig. 11 means setting the parameters of the visualization, specifically the width is set to 1000, the height is set to 800, the background color is set to RGB (4, 14, 4), the type of the X-axis is set to linear, the definition domain is set to between 0 and 2, the value domain is set to between 0 and 500, the type of the Y-axis is set to linear, the definition domain is set to between 0 and 3, and the value domain is set to between 0 and 520.

In some embodiments, the embodiment of the application supports that in a unified construction interface, a chart is constructed by flexibly using two construction modes, namely code construction and interactive construction, so that the technical problem that the code construction and the interactive construction in the related art can only select one construction mode for use is solved, and the following description exemplifies the related implementation modes of the code construction.

In some embodiments, the computing device may expose program code for generating a visualization view in a build interface. For example, referring to FIG. 11, the build interface 60 includes a code region 606, the code region 606 being used to expose a first code that generates a visualization view 6051. The computing device presents the generated code for the visualization view 6051 in the code region 606 while presenting the visualization view 6051 in the build interface. By the method, the constructed visual view and the generation code of the visual view are returned to the user through the same interface, so that the user can conveniently and synchronously check the effect and the code of the visual view.

The source of the first code presented in the build interface includes a number of scenarios, which are exemplified below in connection with both scenarios.

In the first situation, the first code displayed in the construction interface is a code generated according to the operation of a user on an interface component in the process of constructing the visual view in an interactive mode.

For example, referring to fig. 11, the first code is a code generated based on a setting operation on an element attribute triggered on the interaction build view 602 or the attribute view 604. The first code represents a visual code set for the visualization element. For example, the user selects the font style of the text icon in the font input box in the property view 604, and the first code indicates that the font style of the text icon is set to be the style.

And secondly, the first code displayed in the construction interface is the code input by the user in the process of constructing the visual view in a code mode. For example, referring to FIG. 11, the first code is the code entered into the code area 606 of the build interface 60.

In some embodiments, the build interface described above supports functionality for exporting the generation code for the visualization view. For example, referring to fig. 11, the code area 606 of the build interface 60 includes an export control 6062, and the user clicks or otherwise operates the export control 6062 to trigger a code export instruction. The computing device outputs the first code in the code region 606 to the target location in response to the code derivation instructions. The code derivation instruction is to indicate a first code in the derived code region 606. The target location is used to save the derived visualization generation code. The target location includes, but is not limited to, a default location or a user-set location. The target location includes, without limitation, a storage location local to the computing device or a storage location that is a cloud. Through the function of exporting the codes, a user can modify the codes conveniently for secondary development, and the user is also supported to copy the codes to other projects to deploy complex visual views.

In some embodiments, the build interface described above supports the functionality of inputting the generation code for the visualization view. For example, the code region in the build interface described above includes an input component capable of receiving user input. And the user inputs a second code in the code area in the construction interface to trigger the code operation instruction. The computing device responds to the code running instruction, and the second code input in the code area in the construction interface is run to adjust the visual view, so that the adjusted visual view is provided in the construction interface. Wherein the code execution instruction indicates to execute the code input in the build interface. Illustratively, referring to fig. 11, the code area 606 in the build interface includes export controls 6062, and the code execution instructions are triggered by operation of the export controls 6062. In this way, the code input by the user can be fed back to the interactive construction process, thereby supporting the user to adjust the visual view by inputting the code.

In some embodiments, the computing device may update the code presented in the build interface synchronously as the user sets operations on the properties of the visualization elements. For example, the computing device responds to an attribute setting operation, triggered on the building interface, on the visual element in the visual view, and obtains a third code corresponding to the attribute setting operation; third code is added to the build interface in code area 606. The attribute setting operation is, for example, an operation triggered by an input component in the attribute view 604, an operation triggered by the interactive build view 602, or the hierarchy view 603. For example, the attribute setting operation is an operation of inputting a coordinate axis angle, which is triggered by the component 6042 for inputting a coordinate axis angle in the attribute view 604. By the method, in a scene of constructing the visual view through user interaction, when a user executes operation once, the codes displayed in the interface can be updated in real time along with the operation of the user, so that the codes generated by the operation of the user are fed back to the user in time, the interactive adjustment of chart parameters and nesting logic of the user is facilitated, and the construction efficiency of the visual view is further improved.

Next, a logical functional architecture provided in the embodiments of the present application is illustrated.

Referring to fig. 9, fig. 9 is a frame diagram illustrating an interactive construction method of a visualization view. The frame structure shown in fig. 9 may be provided as a visual view of the building apparatus 70. The frame structure of the construction device 70 for visual views mainly comprises three parts, namely a generation module 71 for interactive construction interface, a visual grammar module 72 and a communication module 73.

The interactive build interface generation module 71 is configured to generate an interactive build interface. The generation module 71 of the interactive construction interface supports the user to specify the coordinate system and define the visual code through the interface. The generation module 71 of the interactive construction interface includes a coordinate system formulation module 711, a visual code formulation module 712, a visualization effect return module 713, and a visualization code return module 714. The coordinate system establishing module 711 is used for supporting the user to specify the coordinate system through the interface. Visual code formulation module 712 is used to support the assignment of visual codes for interaction with a user. The visualization effect returning module 713 is used for returning the final visualization effect graph to the user, so that the user can conveniently check the effect and interactively debug the parameters in the view. The visualized code returning module 714 is used for returning the codes corresponding to the visualized effect graph, so that the user can directly export or perform secondary development conveniently.

Visualization grammar module 72 is operative to support visual coding based on a custom coordinate system. The visual grammar module 72 includes a visual coding module 721 and a code encapsulation module 722. The visual coding module 721 is used to draw the visual elements through the visual code and coordinate system specified by the user. Visual coding module 721 includes a classical axis library 7211, a trajectory axis module 7212, a coordinate system calculation module 7213, and other visual coding modules 7214. A classic coordinate axis library 7211, a trajectory coordinate axis module 7212, and a coordinate system calculation module 7213 may be provided as the layout calculation module. The three modules of the classical coordinate axis library 7211, the trajectory coordinate axis module 7212 and the coordinate system calculation module 7213 are used for processing position-related layout calculation. The classic coordinate axis library 7211 facilitates the user to directly construct a classic coordinate system. Trajectory coordinate axis module 7212 allows a user to define coordinate axes of arbitrary shape. The coordinate system calculation module 7213 is used to encapsulate the layout calculation process of mapping data to a specific location in the coordinate system. Other visual coding module 7214 handles the designation and rendering methods of other visual channels in the visualization view besides the location layout. The code encapsulation module 722 encapsulates the underlying layout calculation process and rendering process, and outputs compact declarative code back to the build interface.

The communication module 73 is used for interacting with a user. For example, the communication module 73 is configured to receive the coordinate system parameters (such as the drawn track) input by the user, and the communication module 73 sends the coordinate system parameters input by the user to the generation module 71 of the interactive construction interface. The interactive build interface generation module 71 generates a build interface using the coordinate system parameters input by the communication module 73. After the generation module 71 of the interactive build interface generates the visual view and the code, the visual view and the code are sent to the communication module 73. The communication module 73 returns the visual view and code to the user.

Next, the functions and the specific implementation principle of each of the above modules are described one by one from bottom to top.

The visualization grammar module 72 provides a set of declarative visualization programming languages, encapsulates the underlying layout calculation process and visualization rendering process, and allows a user to obtain codes and visualization results for complex visualization views by inputting data, formulating coordinate systems, and defining visual coding rules. Visualization grammar module 72 includes the following visual coding module 721 and code encapsulation module 722.

(A) Visual coding module 721

The visual coding module 721 is mainly used to help the user to specify visual channels, such as position, color, shape, etc., to show the data attributes, and to encapsulate the calculation and drawing processes of the visual elements.

The visual coding module 721 includes a layout calculation module. The layout calculation module is responsible for position-related calculation tasks. In the layout calculation module, in order to support the rapid construction of the non-conventional layout visualization view, in addition to providing the conventional classical coordinate axis library 7211, the embodiment of the present application further provides a trajectory coordinate axis module 7212 for supporting the user to construct a custom-form coordinate axis. And through the coordinate system calculation module 7213, a method for defining the combination relationship between the horizontal and vertical coordinate axes is further provided, more flexible coordinate system definition is supported, and meanwhile, the calculation process of mapping the encapsulated data to a specific position in the coordinate system is realized, and the workload of a user is reduced. The concrete description is as follows.

(i) Classical coordinate axis library 7211

The classical coordinate axis library 7211 according to the embodiment of the present application provides a classical coordinate axis library including a linear coordinate axis, a polar coordinate axis, a circular coordinate axis, an index function coordinate axis, a quadratic function coordinate axis, a category coordinate axis, and the like. For example, several coordinate axes in the classic coordinate axis library 7211 may be directly called by following a code of a coordinate axis declarative grammar, and a coordinate axis construction process may be directly completed by adjusting parameters such as a definition domain and a value domain of a coordinate axis through configuration options.

Exemplarily, the code constructing the rectilinear coordinate axis means setting a domain of the rectilinear coordinate axis to 1.2 times of a minimum value to 1.2 times of a maximum value of data to be visualized as follows, and setting a domain of the rectilinear coordinate axis to a canvas height.

let yAxis＝UVE.axis({

type linear'// Linear coordinate axis with straight line as category

Domain [// Domain is 1.2 times the maximum minimum value of the data

minValue*1.2,

maxValue*1.2,

range [0, config.height ],// value field is canvas height

})；

Exemplarily, the codes of the circular category coordinate axis are as follows, and the meaning of the codes shown below is to set the domain of the circular category coordinate axis to all values of the name attribute of the data to be visualized, set the domain of the value of the circular category coordinate axis (i.e. the start/end angle) to [0,270], designate the radius of the circle to be 100, and designate the angle size corresponding to each category and the angle size corresponding to the interval between categories to be 0.3.

let xAxis UVE.axis({

type circleBand,// type is the category coordinate axis of the circle

data.map ((d) = > d.name)// define domain as all the name values of data

range [0,270],// set value range, start and end angle

r 100,// radius of the circle designated

padding:0.3,// specifying the angle size corresponding to each class and the angle size corresponding to the interval between classes

})

Exemplarily, the codes of the quadratic function coordinate axes are as follows, and the codes shown below mean that a coefficient a of a quadratic term in a quadratic function corresponding to the quadratic function coordinate axes is set to 1, a value range of x in the quadratic function corresponding to the quadratic function coordinate axes is set to [0,20], a definition domain of the quadratic function coordinate axes is set to [0,600], a width of the value domain of the quadratic function coordinate axes is set to half of a canvas width, and a height of the value domain of the quadratic function coordinate axes is set to 0.8 times of the canvas height.

let xAxis UVE.axis({

type is linearQuad,// declares the coordinate axis type as quadratic function coordinate axis

a:1, coefficient a of quadratic term of quadratic function y = ax ^2

funCrange: [0,20],// specifying the x-value range of the quadratic function

Domain: [0,600],// designated Domain

range [// distribution range of designated coordinate axis on canvas

[0,contextwidth 0.5],// width is half of canvas width

[0,contextheight 0.8],// height 0.8 canvas height

})

Exemplarily, the codes of the category coordinate axes are as follows, and the meaning of the codes shown below is to set the definition domain of the category coordinate axes to all values of the name attribute of the data to be visualized, set the value domain of the category coordinate axes to the canvas width, and set the ratio of the distance between categories of the category coordinate axes to the size of each category itself to 0.3.

let xAxis UVE.axis({

Band', type/type axis with straight line type

Map ((d) = > d.name,// define domain as data name

range is [0,config.width ],// value range is canvas width

padding:0.3,// ratio of distance between classes and size of each class itself

})

Exemplarily, the codes of the polar axis have the meaning that the domain of definition of the polar axis is set to all values of the name attribute of the data to be visualized, and the domain of value (start/end angle) of the polar axis is set to [0,360].

let xAxis UVE.axis({

Radial of type,// type polar axis

domain: [0, sumdial ],// setup definition field

range [0,360],// polar axis start and end angles

})；

(ii) Trajectory coordinate axis module 7212

Illustratively, the code declaring the trajectory coordinate axis of the trajectory coordinate axis module 7212 means that the trajectory data of the trajectory coordinate axis is set to data trajData, the definition range of the trajectory coordinate axis is set to [0,500], the width of the range (distribution range) of the trajectory coordinate axis is set to the width of the canvas, and the height of the range (distribution range) of the trajectory coordinate axis is set to 0.4 times the height of the canvas.

let chartXAxis UVE.axis({

type: linertaj "// declare coordinate axis type as track coordinate axis

traj trajData,// designating track data as trajData

domain: [0,500],// designate coordinate axis definition domain

range [// define coordinate axis distribution range

(0,contextWidth),// the distribution range is wide of the canvas

[0,contextheight.4],// distribution range is 0.4 times as high as that of the canvas

})；

The trajectory coordinate axis module 7212 provided in the embodiment of the present application, as shown in fig. 12, allows data of one trajectory to be used as a coordinate axis attribute, thereby constructing a coordinate axis of an arbitrary shape. The ability to customize the shape of the coordinate axes provided by the trajectory coordinate axis module 7212 greatly improves the flexibility of coordinate system definition, facilitating the generation of customized coordinate systems. In the course of subsequent use, the calculation of the element layout positions is encapsulated by the trajectory coordinate axis module 7212. Any value in the definition domain of the trajectory coordinate axis will be mapped to the corresponding position on the trajectory according to the ratio of the value in the definition domain. For example, in the coordinate axis of the trace with a defined field of 0 to 100, data with a value of 30 is mapped to a position on the canvas where a trace point which is thirty percent of the length of the whole trace from the starting point of the trace is located, and the position is taken as the coordinate of the data on the coordinate axis.

(iii) Coordinate system calculation module 7213

The coordinate system calculation module 7213 abstracts the configuration of the coordinate system, that is, a two-dimensional coordinate system is configured by the X-axis and the Y-axis, and the combination relationship between the X-axis and the Y-axis is classified into a relative type combination and an absolute type combination. FIG. 8 is a schematic diagram showing coordinate axis combinations. As shown in fig. 8, the absolute type combination indicates that the Y-axis always maintains a certain angle with the canvas, regardless of the direction amount of the X-axis. The relative combination means that the Y axis always forms a certain angle with the X axis, and the direction of the Y axis changes along with the change of the direction of the tangent of the X axis.

Illustratively, the user adds a rectangular visualization element by entering the following code declaration coordinate system to obtain the visualization result shown in fig. 10. The following codes mean that both the X-axis and the Y-axis are set as coordinate axes in the pre-defined classic coordinate axis library 7211. The X-axis is set to a predefined straight line category coordinate axis. The Y-axis is set to a predefined straight-line numerical coordinate axis. The combination type of the X axis and the Y axis is set to be opposite, the included angle between the X axis and the Y axis is set to be 50 degrees, and the coordinate system is rotated 50 degrees anticlockwise.

barChart.setAxis({

xAxis: xAxis,// X axis is the defined linear category coordinate axis

yAxis: yAxis,// Y-axis is the defined linear numerical coordinate axis

Left,// lateral shift of coordinate system on canvas

Left,// longitudinal offset of coordinate axes on canvas

relationship type of 'relative',// coordinate axis relation is relative type

axisAngle 50,// the angle between the two axes is 50 degrees

})

Seclotation (15); v/rotating the coordinate System

Therefore, a user can customize a free-form coordinate system through the classical coordinate axis library 7211, the trajectory coordinate axis module 7212 and the coordinate system combination definition method provided by the embodiment of the application, so as to construct a visualization view of a complex layout. Given a coordinate system, the embodiments of the present application provide a calculation process for mapping package data to a location in the coordinate system.

In one specific example, the specific flow of the calculation process from the data to the position in the coordinate system is as follows, including the following steps S1 to S4. Wherein the combined angle a in the following equation (1) is an illustration of a first angle in the method shown in FIG. 7, the combined angle a in the following equation (2) is an illustration of a second angle in the method shown in FIG. 7,

step S1 calculates the coordinate position (X) of the data on the X-axis ₁ ，y ₁ )。

Step S2 of calculating the coordinate position (x) of the data on the Y axis ₂ ，y ₂ )。

And S3, calculating the direction A of the Y axis under the current X coordinate according to the coordinate axis combination type, the combination angle a, the current tangent direction of the X axis and the offset angle b of the coordinate system. When the coordinate axis combination type is absolute, the direction of the Y axis is calculated by the following formula (1). In the case where the coordinate axis combination type is the relative type, the direction of the Y axis is calculated by the following formula (2).

A = a + b; formula (1)

A = a + b + X axis at (X) ₁ ，y ₁ ) The tangential direction of the location; formula (2)

And S4, calculating the horizontal and vertical coordinate offset of the data according to the coordinate position and the direction on the Y axis, and superposing the horizontal and vertical coordinate offset on the coordinate of the data on the X axis to obtain the final coordinate position of the data. Step S4 is calculated by using the following formula (3) and formula (4). X and y obtained by the following formula (3) and formula (4) represent pixel positions on the canvas.

x＝x ₁ +x ₂ + cos (A); formula (3)

y＝y ₁ +y ₂ + sin (A); formula (4)

(iv) Other visual coding modules 7214

Other visual coding modules 7214 provide for user specification and rendering of other visual channels beyond the location of the visual elements. Other visual channels outside of the location include, without limitation, fill color, line width, element height, element width, angle, and the like. Illustratively, the declaration code of the visual coding is visualized as follows.

let rect＝barChart.addGlyphs({

Rect, declaring the visualization element as a rectangle

attr:

x (d) = > d.name, and the x coordinate mapped by the name value of the data is used as the abscissa

The y is 0, the// y coordinate is always the coordinate corresponding to the data value 0

height (d) = > d.val,// width is the val attribute value of data

width xAxis. GetScale (). BandWidth (),// Width is the bandWidth of each category on the category axis

StrokeWidth of 0,// frame width of 0

}

style:{

TransitionDuration 2s// set cs style

}

})

The manner of designating other visual channels includes two manners. One way is to directly specify a value as the value of the element visual channel, for example, in the above example, the width of the frame of each rectangle is set to 0. Another way is that the height of the rectangle in the above example is bound to the property value of the val property of each piece of data by using the property value of the function return data as the element property. The rectangle for data with a large val value will be higher. After obtaining the data encoding, the system will calculate the element position and other element attributes from the layout module.

(B) Code encapsulation module 722

Code encapsulation module 722 separates the declaration code from the specific implementation code, allowing the declaration code to be defined, while encapsulating the underlying rendering and computation processes. In this embodiment, through the code encapsulation module 722, the user mainly cares about what needs to be drawn, and what attribute values the drawn elements need to correspond to, without much concern about how to draw and how to perform mapping calculation on the data values. In the construction scheme of the embodiment of the application, the encapsulated semantic code is as shown in the above case, and returns to the generation module 71 of the interactive construction interface, so that the user can conveniently export the semantic code together with the grammar package or perform secondary development.

Referring to fig. 11, fig. 11 is a schematic diagram of a generation module 71 of a construction interface of a visual view provided in an embodiment of the present application. The generation module 71 of the interactive construction interface provided in the embodiment of the present application includes a series of interactive schemes, helps a user to define a coordinate system and a visual code, iteratively adjusts a visualization parameter, and returns a visualization view and a code to the user. The interactive build interface generation module 71 is used, for example, to generate the build interface 60.

The generation module 71 of the interactive construction interface includes a coordinate system formulation module 711, a visual code formulation module 712, a visualization effect return module 713, and a visualization code return module 714.

(a) Coordinate system formulation module 711

As shown in fig. 12, the coordinate system formulation module 711 allows a user to interactively specify parameters such as a combination type, a combination angle, and the like between coordinate axes in a two-dimensional coordinate system. The user can drag a coordinate axis or a trajectory coordinate axis in the left side classical coordinate axis library 7211 to the X or Y axis to specify the type of the coordinate axis. After the coordinate type is specified, the user can set parameters of the X or Y coordinate axis in the property view 604 at the lower left corner of the interface, and the input modes include the following three modes.

The first input mode is that a user inputs numerical values as parameters, for example, an interval [0,100] is input as a definition field of a straight coordinate axis.

And in the second input mode, the user drags the data attribute to the parameter of the coordinate axis, and the value range of the data value is represented as the definition domain of the coordinate axis. For example, the user drags the name attribute field of the data to the definition field of the X axis, which represents that all values of the name are taken as the definition field of the category coordinate axis.

And for a track coordinate axis, a user can directly draw a track manually in the panel, the system can automatically extract track points to serve as track data of the coordinate axis, the user can also use track coordinates in the data, and two attributes of the specified data serve as horizontal and vertical coordinates of the track data. Both the above-described mapping and trajectory data schemes allow a user to define an arbitrarily shaped coordinate axis.

Next, the user may adjust the coordinate system parameters in the property view 604, including adjusting the combination angle of the coordinate axes and the rotation angle of the coordinate system by selecting the combination type of the coordinate axes in the pull-down menu, by dragging the rotation point and the zoom point on the coordinate axes, and rotating or zooming the coordinate axes. When parameters are adjusted, the system is automatically applied to construction of a visual attempt according to user input, and an adjusted visual result is returned, so that a user can obtain result feedback in real time in a dragging process, an interactive parameter adjusting process is realized, and the development efficiency of the user is improved.

(b) Visual code formulation module 712

The visual code formulation module 712 of the embodiment of the present application allows a user to add visual elements in a visual view and set a visual code. Specifically, as shown in fig. 13 (a), the user can drag a visual element (e.g., rectangle, circle) in the visual element library to add to the interactive build view 602. For example, FIG. 13 shows a user dragging a rectangular icon 6031 to the interactive build view 602.

The present embodiment then provides three different ways of interaction to help the user declare the visual code.

In a first interaction manner, as shown in (b) of fig. 13, a user may drag an attribute of data into a visual channel option box of an element in the attribute view 604, and use the attribute value of the data as a value of a certain visual channel of a visual element. For example, in fig. 13, the text field is dragged into the text channel 6045 of the text element, and the display text of the text element is represented as the text field content of the data.

In the second interaction mode, as shown in fig. 13 (c), the value input by the user is used as a visual channel. For example, in FIG. 13, the user enters 20 the size of the font size as a text element into the in-interface property view 604 font size entry component 6046.

In a third interaction mode, as shown in fig. 13 (d), a color selector 608 is provided, and a color is selected as a value of a visual channel using the built-in color selector 608.

(c) Visualization effect return module 713

As shown in a construction result display area 6051 in fig. 11, in the process of user interactive construction, the system calls a bottom-layer visualization grammar module 72 to perform visualization rendering and code packaging, and then directly returns the visualization view effect constructed by the user in the interface, so that the user can intuitively grasp the generation status of the view on one hand, and can also interactively adjust coordinate axis parameters or visual codes by returning results to achieve an expected visualization effect.

(d) Visualization code return module 714

As shown in a code area 606 in fig. 11, in addition to returning a visualization effect, a user obtains a visualization code written in a declarative grammar on an interface, and the user can directly modify the code for secondary development, and can copy the code to other projects to implement export and deployment of complex visualization view codes.

The method for constructing the visual view is illustrated below with reference to an example.

Example 1

Figure 14 shows a diagram of the nepoleon case implemented using the trajectory coordinate system. The case flow for the visualization of the scopolamine east aspect, which implements the continuous curve as shown in fig. 14, of the present embodiment includes the following steps (a) to (i).

And (a) dragging the track coordinate axis in the coordinate axis library by the user to be used as an X axis.

And (b) dragging the linear numerical coordinate axis in the coordinate axis library by the user to be used as the Y axis.

And (c) selecting the coordinate axis relation as a relative type by the user, and setting the angle between the X axis and the Y axis to be 90 degrees.

Step (d) sets the X-axis attribute. First, the user drags the longitude and latitude fields in the data to the trajectory data option on the X-axis. Then, the user drags the date field in the data to the X-axis domain option as the domain of the coordinate axis. Finally, the user inputs the value range of the X axis and defines the length and the width of the drawing range of the X axis.

Step (e) the user drags the military quantity field size of the data to the domain for Y-axis option and sets the Y-axis value domain to [0,100]. Thereby establishing a coordinate system as shown in fig. 15.

Step (f) the user adds a 'region' type visualization element to the view.

And (g) dragging the date field of the data to an x option of an 'area' attribute panel by the user, dragging the army number size field to a y attribute of an element attribute panel, and selecting the filling color of the area to be light yellow.

And (h) dragging the Y axis to rotate according to the returned visualization result, and adjusting the combined angle between the coordinate axes to finally obtain the visualization effect graph shown in the attached drawing 15.

Step (i) constructing other auxiliary views, which can obtain the visualization effect graph shown in fig. 15.

The code area 606 in fig. 15 means defining the track coordinate axes, and specifically means setting the track coordinate axes to have a closed interval ranging from 0 to 600, a closed interval ranging from 0 to 600 × 0.4, and defining the Y-axis definition field equal to the military quantity, and setting the Y-axis height to be 70.

Summarizing, the embodiment of the application can support the establishment of a user-defined coordinate system based on track coordinate axes, the relation and the combination angle between the coordinate axes can be defined, more flexible coordinate system options are provided, the mapping calculation process of data to canvas positions can be encapsulated when the visual view with complex layout is established, a user only needs to define coordinate axis parameters, visual coding is declared, the visual view establishment can be completed, the basic knowledge background such as mathematics and graphic drawing is not needed, the workload of complex view establishment is greatly reduced, and the establishment efficiency is improved.

Furthermore, on the basis of supporting a user-defined coordinate system, an interactive interface is provided to help a user to construct a complex visual view, visual element creation and visual coding are performed in a dragging mode, meanwhile, the coordinate system can be established in a drawing mode, an appointed mode and the like, a visual result and codes are updated in real time and returned to the user for convenient parameter adjustment and export, a professional threshold is lowered, and waste of manpower and time is effectively avoided due to the efficiency of constructing and debugging the codes.

In summary, some embodiments of the present application propose an abstract model of a free coordinate system in a visual view, and thus establish a set of visual syntax allowing a user to customize the coordinate system. The user can use the declarative language to select a common coordinate axis or a self-defined arbitrary track as the coordinate axis to establish a coordinate system, a mapping process of a data value to a position in the coordinate system is encapsulated, the user can finish the drawing of a complex visual view only by declaring a binding rule of the coordinate system and a visual code, mathematical background knowledge is not needed, position calculation is not needed, and therefore the development efficiency and the code amount are improved by more than 50%.

In addition, a set of interactive visual view construction method is designed, so that a user can select or draw coordinate axes in coordinates by using simple and visual interactive operation, freely create a coordinate system, add visual elements in the coordinate system, perform visual coding, adjust parameters and complete complex visual view construction and improvement tasks. The final result can be directly derived in a code form, so that the use and secondary development are convenient, the development threshold is greatly reduced, and the waste of manpower, time and resources in the development process of the complex visual view is reduced.

Fig. 16 is a schematic structural diagram of a computing device according to an embodiment of the present application, and the visual view building apparatus 900 shown in fig. 16 is configured to implement the visual view building method provided by the above-described method embodiments.

Optionally, in view of the application scenario shown in fig. 6, the construction apparatus 900 of the visualization view shown in fig. 16 is the terminal 10 or the server 11 in fig. 6.

Optionally, when viewed in conjunction with fig. 7, the visual view construction apparatus 900 shown in fig. 16 is a computing device in the method flow shown in fig. 7.

Optionally, when referring to fig. 9, the communication module 901 of the construction apparatus 900 for visualization shown in fig. 16 is the communication module 73 in fig. 9. The visual syntax module 902 of the visual view construction apparatus 900 shown in fig. 16 includes the visual coding module 721 and the code encapsulation module 72 of fig. 9. The generation module 903 of the interactive construction interface in the construction apparatus 900 of the visual view shown in fig. 16 includes a coordinate system formulation module 711, a visual code formulation module 712, a visual effect return module 713, and a visual code return module 714 in fig. 9.

The visual view construction device 900 comprises a communication module 901, a visual grammar module 902 and an interactive construction interface generation module 903. The communication module 901 is used for supporting the construction apparatus 900 of the visualization view to execute S201 and S205. The visualization grammar module 902 is used for supporting the construction apparatus 900 of the visualization view to execute S202. The generation module 903 of the interactive construction interface is used for supporting the construction device 900 of the visual view to execute S204.

The apparatus embodiment depicted in fig. 16 is merely illustrative, and for example, the division of the above-mentioned units is only one type of logical functional division, and other division manners may be available in actual implementation, for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted or not executed. Each functional unit in the embodiments of the present application may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit.

The various elements of the visual view construction apparatus 900 are implemented in whole or in part by software, hardware, firmware, or any combination thereof.

In the case of software implementation, for example, the visualization grammar module 902 and the interactive construction interface generation module 903 are implemented by software functional units generated by the at least one processor 801 in fig. 17 after reading program codes stored in the memory 802.

In the case of a hardware implementation, for example, the above units in fig. 16 are respectively implemented by different hardware in the computing device. For example, the communication module 901 is implemented by at least one of the network interface 803 or the input/output interface 806 in fig. 17. The visualization grammar module 902 is implemented by a part of processing resources (e.g., one core or two cores in a multi-core processor) in at least one of the processors 801 in fig. 17, and the generation module 903 of the interactive construction interface is implemented by the rest of processing resources (e.g., other cores in the multi-core processor) in at least one of the processors 801 in fig. 17, or by a field-programmable gate array (FPGA), a coprocessor, or other programmable device.

In the case of implementation by combining software and hardware, for example, the visual grammar module 902 in fig. 16 is implemented by a hardware programmable device, and the generation module 903 of the interactive construction interface is a software functional unit generated by the CPU after reading program codes stored in a memory.

The basic hardware structure of the computing device is illustrated below.

Fig. 17 is a schematic structural diagram of a computing device provided in an embodiment of the present application, and the computing device 800 shown in fig. 17 is configured to implement the method for constructing the visualization provided in the foregoing method embodiments.

Optionally, in view of the application scenario shown in fig. 6, the computing device 800 shown in fig. 17 is the terminal 10 or the server 11 in fig. 6.

Optionally, referring to FIG. 7, the computing device 800 shown in FIG. 17 is a computing device in the method flow shown in FIG. 7.

Optionally, referring to fig. 9, the computing device 800 shown in fig. 17 includes a coordinate system formulation module 711, a visual code formulation module 712, a visualization effect return module 713, a visualization code return module 714, a visual code module 721, and a code encapsulation module 722 shown in fig. 9.

The computing device 800 includes at least one processor 801, memory 802, and at least one network interface 803.

The processor 801 is, for example, a Central Processing Unit (CPU), a Network Processor (NP), a Graphics Processing Unit (GPU), a neural-Network Processing Unit (NPU), a Data Processing Unit (DPU), a microprocessor, or one or more integrated circuits for implementing the present disclosure. For example, the processor 801 includes an application-specific integrated circuit (ASIC), a Programmable Logic Device (PLD), or a combination thereof. PLDs are, for example, complex Programmable Logic Devices (CPLDs), field-programmable gate arrays (FPGAs), general Array Logic (GAL), or any combination thereof.

The Memory 802 is, for example, but not limited to, a read-only Memory (ROM) or other type of static storage device that can store static information and instructions, a Random Access Memory (RAM) or other type of dynamic storage device that can store information and instructions, an electrically erasable programmable read-only Memory (EEPROM), a compact disc read-only Memory (CD-ROM) or other optical disc storage, optical disc storage (including compact disc, laser disc, optical disc, digital versatile disc, blu-ray disc, etc.), a magnetic disk storage medium or other magnetic storage device, or any other medium that can be used to carry or store desired program code in the form of instructions or data structures and that can be accessed by a computer. Optionally, the memory 802 resides separately and is coupled to the processor 801 via an internal connection 804. Alternatively, the memory 802 and the processor 801 are optionally integrated.

The network interface 803 uses any transceiver or the like for communicating with other devices or communication networks. The network interface 803 includes, for example, at least one of a wired network interface or a wireless network interface. The wired network interface is, for example, an ethernet interface. The ethernet interface is for example an optical interface, an electrical interface or a combination thereof. The wireless network interface is, for example, a Wireless Local Area Network (WLAN) interface, a cellular network interface, or a combination thereof.

In some embodiments, processor 801 includes one or more CPUs, such as CPU0 and CPU1 shown in FIG. 17.

In some embodiments, computing device 800 optionally includes multiple processors, such as processor 801 and processor 805 shown in FIG. 17. Each of these processors is, for example, a single-core processor (single-CPU) or, for example, a multi-core processor (multi-CPU). A processor herein may alternatively refer to one or more devices, circuits, and/or processing cores for processing data (e.g., computer program instructions).

In some embodiments, computing device 800 also includes internal connections 804. The processor 801, the memory 802, and the at least one network interface 803 are connected by an internal connection 804. Internal connections 804 comprise pathways that convey information between the aforementioned components. Optionally, internal connection 804 is a single board or bus. Optionally, the internal connections 804 are divided into an address bus, a data bus, a control bus, etc.

In some embodiments, computing device 800 also includes input-output interface 806. The input-output interface 806 is connected to the internal connection 804.

In some embodiments, the input/output interface 806 is configured to interface with an input device, and receive commands or data related to the method shown in fig. 7, such as a construction request, information for defining coordinate axes (e.g., trajectory data, coordinate axis definition field, coordinate axis type, coordinate axis value field), information for defining coordinate axis combination relationship (e.g., absolute type or relative type, included angle between Y axis and canvas, included angle between Y axis and X axis), code for generating a visual view, icon category, chart, or icon parameter, which are input by a user through the input device. Input devices include, but are not limited to, a keyboard, touch screen, microphone, mouse or sensing device, etc.

In some embodiments, the input-output interface 806 is also used to connect with output devices. The input/output interface 806 outputs intermediate results and/or final results generated by the processor 301 executing the method of fig. 7, such as the visual view, the code for generating the visual view, and the code generated according to the configuration operation on the visual view, via the output device. Output devices include, but are not limited to, a display, a printer, a projector, and the like.

Alternatively, the processor 801 implements the method in the above-described embodiment by reading the program code 810 saved in the memory 802, or the processor 801 implements the method in the above-described embodiment by an internally stored program code. In the case where the processor 801 implements the method in the above-described embodiment by reading the program code 810 stored in the memory 802, the program code implementing the method for constructing the visual view provided by the embodiment of the present application is stored in the memory 802.

For more details of the processor 801 to implement the above functions, reference is made to the previous descriptions of the various method embodiments, which are not repeated here.

The embodiments in the present specification are described in a progressive manner, and the same and similar parts among the embodiments can be referred to each other, and each embodiment focuses on differences from other embodiments.

A refers to B and refers to the simple variation where A is the same as B or A is B.

The terms "first" and "second," and the like in the description and in the claims of the embodiments of the present application, are used for distinguishing between different objects, and not for describing a particular order of the objects, nor are they to be construed as indicating or implying relative importance. For example, a first location and a second location are used to distinguish between different locations, rather than to describe a particular order of locations, nor should it be understood that a first location is more important than a second location.

In the present examples, unless otherwise specified, the meaning of "at least one" means one or more, and the meaning of "a plurality" means two or more. For example, a plurality of visualization elements refers to two or more visualization elements.

The above-described embodiments may be implemented in whole or in part by software, hardware, firmware, or any combination thereof. When implemented in software, may be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. The procedures or functions described in accordance with the embodiments of the application are all or partially generated when the computer program instructions are loaded and executed on a computer. The computer may be a general purpose computer, a special purpose computer, a network of computers, or other programmable device. The computer instructions may be stored in a computer readable storage medium or transmitted from one computer readable storage medium to another, for example, from one website site, computer, server, or data center to another website site, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital Subscriber Line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.). The computer-readable storage medium can be any available medium that can be accessed by a computer or a data storage device, such as a server, a data center, etc., that incorporates one or more of the available media. The usable medium may be a magnetic medium (e.g., floppy Disk, hard Disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid State Disk (SSD)), among others.

The above embodiments are only used to illustrate the technical solutions of the present application, and not to limit the same; although the present application has been described in detail with reference to the foregoing embodiments, it should be understood by those of ordinary skill in the art that: the technical solutions described in the foregoing embodiments may still be modified, or some technical features may be equivalently replaced; and these modifications or substitutions do not depart from the scope of the technical solutions of the embodiments of the present application.

Claims

1. A method for constructing a visual view, the method comprising:

receiving a construction request, wherein the construction request indicates that a visual view of target data is constructed based on a set coordinate system, coordinate axes of the coordinate system comprise track coordinate axes, and the track coordinate axes refer to coordinate axes with track shapes;

determining the position of the target data in a visual view according to the track coordinate axis and the target data;

acquiring a visual view of the target data according to the determined position, wherein the visual view comprises a visual element used for representing the target data, and the visual element is positioned at the determined position in the visual view;

providing the visualization view.

2. The method of claim 1, wherein the shape of the trajectory coordinate axis is a user-entered trajectory, the trajectory coordinate axis having a plurality of points of different curvature.

3. The method of claim 2, wherein the input mode of the track comprises any one of the following:

drawing the track in a construction interface; or,

inputting position coordinates of a plurality of points on the trajectory in a build interface.

4. The method of claim 1, wherein the shape of each coordinate axis in the coordinate system is a straight line.

5. The method of any of claims 1 to 4, wherein said determining a location of said target data in a visualization view based on said trajectory coordinate axis and said target data comprises:

responding to that the combination relationship of the coordinate system is an absolute combination relationship, and acquiring the angle of an ordinate axis in the coordinate system relative to a canvas according to a first angle and the offset angle of the coordinate system, wherein the absolute combination relationship comprises that the ordinate axis and the canvas keep the first angle, and the canvas is an area used for displaying the visual view in a construction interface;

and determining the position of the target data in the visual view according to the angle of the ordinate axis relative to the canvas.

6. The method of any of claims 1 to 4, wherein said determining a location of said target data in a visualization view based on said trajectory coordinate axis and said target data comprises:

responding to that the combination relationship of the coordinate system is a relative combination relationship, and acquiring the angle of an ordinate axis relative to a canvas in the coordinate system according to a second angle, the offset angle of the coordinate system and the tangential direction of the abscissa axis, wherein the relative combination relationship comprises that the ordinate axis and the abscissa axis are kept at the second angle, and the canvas is an area used for displaying the visual view in a construction interface;

7. The method according to any one of claims 1 to 6, wherein the providing the visual view comprises:

and providing a construction interface, wherein the construction interface comprises the visual view and a coordinate system setting area, and the coordinate system setting area is used for setting parameters of the coordinate system by a user.

8. The method of claim 7, wherein prior to receiving the build request, the method further comprises:

determining the trajectory coordinate axis from trajectory data input through the coordinate system setting area in response to a coordinate axis setting instruction that instructs setting of the trajectory coordinate axis based on the trajectory data.

9. The method according to claim 8, wherein the coordinate system setting area includes a trajectory drawing area for a user to draw a shape of the trajectory coordinate axis, and the trajectory data includes position coordinates of a trajectory point in a trajectory drawn in the trajectory drawing area.

10. The method of claim 8, wherein the coordinate system setting area includes a trajectory data option, and the trajectory data includes an attribute of the target data input through the trajectory data option.

11. The method according to any one of claims 7 to 10, wherein the coordinate system setting area includes a coordinate axis relation option, and before receiving the build request, the method further comprises:

and responding to a coordinate axis relation setting instruction, and determining the coordinate axis combination relation selected by the coordinate axis relation option as the coordinate axis combination relation of the coordinate system.

12. The method of any one of claims 7 to 11, wherein the coordinate system setting area comprises a coordinate axis angle control, and wherein before receiving the build request, the method further comprises:

responding to a coordinate axis included angle setting instruction, and determining a first angle input through the coordinate axis included angle control as an angle kept by a vertical coordinate axis and a canvas in the coordinate system under the condition that the coordinate axis combination relationship is an absolute combination relationship, wherein the canvas is an area used for displaying the visual view in a construction interface; or,

responding to a coordinate axis included angle setting instruction, determining a second angle input through the coordinate axis included angle control as an angle kept by a ordinate axis and an abscissa axis in the coordinate system under the condition that the coordinate axis combination relationship is a relative type combination relationship, and setting the canvas as an area for displaying the visual view in the construction interface.

13. The method of any of claims 7 to 12, wherein the build interface further comprises a code region for exposing a first code that generates the visualization view.

14. The method of claim 13, further comprising:

outputting the first code in the code region to a target location in response to a code derivation instruction.

15. The method according to claim 13 or 14, characterized in that the method further comprises:

and responding to a code running instruction, and adjusting the visualization result by running second code input in the code area.

16. The method of any one of claims 13 to 15, further comprising:

responding to the attribute setting operation of the visual view triggered on the construction interface, and acquiring a third code corresponding to the attribute setting operation;

adding the third code to the code region in the build interface.

17. The method of any one of claims 1 to 16, wherein said providing said visual view comprises:

sending the content of the visual view to the initiator of the build request; or,

displaying the visualization view in a build interface.

18. A visual view construction apparatus, characterized in that the visual view construction apparatus comprises:

the system comprises a communication module, a data processing module and a data processing module, wherein the communication module is used for receiving a construction request, the construction request indicates that a visual view of target data is constructed based on a set coordinate system, coordinate axes of the coordinate system comprise track coordinate axes, and the track coordinate axes refer to coordinate axes with the shapes of tracks;

the visual grammar module is used for determining the position of the target data in a visual view according to the track coordinate axis and the target data;

the generation module of the interactive construction interface is used for acquiring a visual view of the target data according to the determined position, wherein the visual view comprises a visual element used for representing the target data, and the visual element is positioned at the determined position in the visual view;

a communication module for providing the visualization view.

19. A visual view construction apparatus according to claim 18, wherein the trajectory coordinate axis has a shape of a trajectory of the user input received by said communication module, and has a plurality of points with different curvatures.

20. A visual view construction apparatus according to claim 18 or 19, wherein said communication module is configured to receive an input trajectory by any one of:

receiving the track drawn in a construction interface; or,

receiving input of position coordinates of a plurality of points on the trajectory in a build interface.

21. The apparatus for constructing a visual view according to claim 20, wherein the visualization syntax module is configured to, in response to that the combination relationship of the coordinate system is an absolute combination relationship, obtain an angle of an ordinate axis in the coordinate system relative to a canvas according to the first angle and the offset angle of the coordinate system, the absolute combination relationship including that the ordinate axis and the canvas are maintained at the first angle, and the canvas is an area in the construction interface for displaying the visual view; and determining the position of the target data in the visual view according to the angle of the ordinate axis relative to the canvas.

22. The apparatus for constructing a visual view according to claim 20, wherein the visualization grammar module is configured to, in response to the combination relationship of the coordinate system being a relative combination relationship, obtain an angle of an ordinate axis in the coordinate system relative to a canvas according to a second angle, an offset angle of the coordinate system and a tangential direction of the abscissa axis, the relative combination relationship including that the ordinate axis and the abscissa axis are maintained at the second angle, the canvas being an area in the construction interface for displaying the visual view; and determining the position of the target data in the visual view according to the angle of the ordinate axis relative to the canvas.

23. A visual view construction apparatus according to any one of claims 18 to 22, wherein the communication module is configured to provide a construction interface generated by the interactive construction interface generation module, and the construction interface includes the visual view and a coordinate system setting area, and the coordinate system setting area is configured to allow a user to set parameters of the coordinate system.

24. A visual view construction apparatus according to claim 23, wherein the interactive construction interface generation module is configured to determine the trajectory coordinate axis according to trajectory data inputted through the coordinate system setting area in response to a coordinate axis setting instruction received by the communication module, the coordinate axis setting instruction instructing to set the trajectory coordinate axis based on the trajectory data.

25. A visual view construction apparatus according to any one of claims 23 to 24, wherein the coordinate system setting region includes a coordinate axis relation option, and the interactive construction interface generation module is configured to determine, in response to a coordinate axis relation setting instruction received by the communication module, a coordinate axis combination relation selected by the coordinate axis relation option as the coordinate axis combination relation of the coordinate system.

26. A visual view construction apparatus according to any one of claims 23 to 25, wherein the coordinate system setting area includes a coordinate axis included angle control, and the interactive construction interface generation module is configured to respond to a coordinate axis included angle setting instruction received by the communication module, and determine a first angle input through the coordinate axis included angle control as an angle maintained by a vertical coordinate axis and a canvas in the coordinate system when the coordinate axis combination relationship is an absolute combination relationship; or responding to a coordinate axis included angle setting instruction received by the communication module, and determining a second angle input by the coordinate axis included angle control as an angle kept by a vertical coordinate axis and an horizontal coordinate axis in the coordinate system under the condition that the coordinate axis combination relationship is a relative type combination relationship.

27. A computing device, comprising a processor and a memory, wherein:

the memory having stored therein computer instructions;

the processor executes the computer instructions to implement the method of any of claims 1 to 17.

28. A computer-readable storage medium having stored therein at least one instruction which, when executed on a computer, causes the computer to perform the method of any one of claims 1 to 17.