WO2022228211A1

WO2022228211A1 - Method and apparatus for constructing visual view

Info

Publication number: WO2022228211A1
Application number: PCT/CN2022/087681
Authority: WO
Inventors: 黄兆嵩; 丁治宇
Original assignee: 华为云计算技术有限公司
Priority date: 2021-04-26
Filing date: 2022-04-19
Publication date: 2022-11-03
Also published as: CN115249284A

Abstract

The present application relates to the technical field of computers and provides a method and apparatus for constructing a visual view. The present application provides a method for constructing a visual view by using a coordinate system with a trajectory coordinate axis as a basis. The trajectory coordinate axis supports a user to customize the shape of a coordinate axis by drawing or other modes. By automatically calculating the position of data to be visualized in a coordinate system based on a trajectory coordinate axis, a complex layout calculation development process is encapsulated, and complicated operations for a user to manually calculate the specific position of an element during the construction of a visual view by using a rectangular coordinate system are avoided. Therefore, learning cost of a user is reduced, and the efficiency of constructing a complex visual view is improved.

Description

Method and device for constructing visual view

This application claims the priority of the Chinese patent application with the application number 202110455318.9 and the invention titled "Method and Device for Constructing Visualization Views" filed on April 26, 2021, the entire contents of which are incorporated into this application by reference.

technical field

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

Background technique

Data visualization is a technology that encodes the attributes, characteristics and other information of data through visual elements and visual channels, and intuitively displays it to users. It utilizes the sharp visual perception ability of people and the powerful data analysis ability of computer, which greatly improves the efficiency of understanding and analyzing data. In recent years, data visualization techniques have played an important role in data journalism, smart cities, and business intelligence.

The related art uses a Cartesian coordinate system to construct a visualization view. In order to visualize data news or other high-dimensional data, the developer needs to calculate the coordinates of each point in the rectangular coordinate system, and then calculate the position coordinates of the point on the curve outline according to the coordinates in the rectangular coordinate system, instructing the computer to calculate The position coordinates of the draw visualization elements, resulting in a visualization view.

However, the above process requires developers to have a strong mathematical background and programming ability, and spend a lot of time and energy on the derivation of mathematical formulas and the writing of position calculation functions, resulting in low efficiency and high learning costs when building complex visualization views. .

SUMMARY OF THE INVENTION

The embodiments of the present application provide a method and apparatus for constructing a visualization view, which help to improve the efficiency of constructing a complex visualization view. The technical solution is as follows.

A first aspect provides a method for constructing a visual view, the method comprising: receiving a construction request, the construction request instructing to construct a visual view of target data based on a set coordinate system, the coordinate axis of the coordinate system includes a trajectory coordinate axis, the trajectory coordinate axis The axis refers to a coordinate axis whose shape is a trajectory; according to the trajectory coordinate axis and the target data, determine the position of the target data in the visual view; according to the determined position, obtain the visual view of the target data, so The visualization view includes visualization elements for representing the target data, the visualization elements are located at the determined positions in the visualization view; and the visualization view is provided. The target data refers to the data to be visualized, for example, the target data is a chart.

The above provides a method for constructing a visual view with a coordinate system based on the trajectory coordinate axis. The trajectory coordinate axis can support the user to customize the shape of the coordinate axis by drawing or other methods, and automatically calculate the data to be visualized. The position in the coordinate system of the trajectory coordinate axis, thus encapsulating the development process of complex layout calculation, avoiding the tedious operation of manually calculating the specific position of the element when constructing the view using the Cartesian coordinate system, thus reducing the user's learning cost and improving the construction. Efficiency of complex visualizations.

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

In some embodiments, the input method of the trajectory includes any one of the following: drawing the trajectory in the construction interface; or inputting the position coordinates of multiple points on the trajectory in the construction interface.

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

In some embodiments, acquiring the first position corresponding to the target data on the trajectory coordinate axis includes: acquiring the position of the trajectory point on the trajectory coordinate axis according to the ratio of the value of the target data in the definition domain of the trajectory coordinate axis, as the first position Position, the distance between the track point and the endpoint of the track axis is scale-dependent.

In some embodiments, the coordinate axis combination relationship is also considered when obtaining the coordinate system position. Specifically, the second position corresponding to the target data in the coordinate system is acquired according to the first position and the coordinate axis combination relationship of the coordinate system.

In some embodiments, the coordinate axis combination relationship includes at least one of an absolute type combination relationship or a relative type combination relationship, the absolute type combination relationship includes that the ordinate axis and the canvas are kept at a set first angle, and the relative type combination relationship includes The coordinate axis and the abscissa axis are maintained at a set second angle, and the canvas is an area for displaying the visual view in the construction interface.

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: in response to the combination relationship of the coordinate system being an absolute combination relationship, according to The first angle and the offset angle of the coordinate system are obtained, and the angle of the ordinate axis in the coordinate system relative to the canvas is obtained, and the absolute combination relationship includes that the ordinate axis and the canvas remain at the first angle; The angle of the ordinate axis relative to the canvas determines the position of the target data in the visualization view.

By providing an absolute combination relationship, at least the following effects can be achieved: the absolute combination relationship makes the orientation and rotation angle of the visualization elements uniform, which helps to keep the various icons in the visualization effect neat, thereby improving the effect of the visualization view. In addition, in the scenario where the user wants to emphasize the text when constructing the visual view, the text in the absolute combination relationship is always kept parallel to the canvas without being rotated, which makes it more convenient for the user to read the text.

In some embodiments, when the coordinate axis combination relationship in the coordinate system is a relative type combination relationship, in response to the coordinate system combination relationship being a relative type combination relationship, according to the second angle, the offset of the coordinate system angle and the tangent direction of the abscissa axis, obtain the angle of the ordinate axis in the coordinate system relative to the canvas, and the relative combination relationship includes that the ordinate axis and the abscissa axis are maintained at the second angle; according to the The angle of the ordinate axis relative to the canvas determines the position of the target data in the visualization view.

By providing a relative combination relationship, at least the following effects can be achieved: the relative coordinate axis can keep the Y axis and the X axis at a certain angle. When visualizing, the text information is not emphasized, and the visual elements (rectangles, lines) need to follow the coordinate axis. This relative axis can reduce the complexity of implementing this visualization when the changes have different rotation angles.

In some embodiments, the visualization is provided through a construction interface for constructing the visualization of the target data. Specifically, a building interface is provided, which includes a visual view.

In some embodiments, the above construction interface not only includes a visual view, but also includes a coordinate system setting area, where the coordinate system setting area is used for the user to set parameters of the coordinate system.

Through the above method, the user is supported to trigger interactive operations on the construction interface to customize the parameters of the coordinate system, thereby eliminating the tedious operation of writing program codes through a programming language, and improving the efficiency of constructing a visual view.

In some embodiments, before receiving the construction request, the method further includes: in response to the coordinate axis setting instruction, determining the trajectory coordinate axis according to the trajectory data input through the coordinate system setting area, the coordinate axis setting instruction indicating setting based on the trajectory data Trajectory axis.

In the above manner, the user is supported to customize the shape of the coordinate axis through the trajectory data, which helps the trajectory coordinate axis to be more accurate and more flexible.

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

In the above manner, it is more convenient and quicker to support the user to customize the shape of the coordinate axis by drawing a track.

In some embodiments, the coordinate system setting area includes trajectory data options, and the trajectory data includes attributes of the target data entered through the trajectory data options.

Through the above method, at least two effects can be achieved. First, the trajectory data given by the data is more controllable and accurate than the shape drawn directly. Second, when the layout shape that the user wants to generate is included in the data, for example, the movement trajectory of the data object, the outline shape of the object, etc. are used as the trajectory shape to generate the coordinate axis, it is faster and more convenient to use the data to directly assign the definition, and there is no need for the user to copy .

In some embodiments, the user is supported to customize the coordinate axis relationship in the coordinate system by triggering interactive operations through the interface. For example, the coordinate system setting area includes a coordinate axis relationship option. Before receiving the construction request, the method further includes: in response to the coordinate axis relationship setting instruction, determining the coordinate axis combination relationship selected through the coordinate axis relationship option as the coordinate axis of the coordinate system. Combination relationship.

In this way, on the one hand, it supports allowing users to customize the combination relationship between different coordinate axes in the coordinate system, which improves flexibility and makes the constructed visual view more suitable for users' needs. On the other hand, it is faster and more convenient, eliminating the tedious operation of writing program codes for setting the combination relationship of the coordinate axes, and reducing the implementation complexity of constructing a visual view.

In some embodiments, a user is supported to trigger an interactive operation through an interface to customize the angle of the coordinate axis in the coordinate system. For example, the coordinate system setting area includes a coordinate axis angle control, and the above method further includes: in response to the coordinate axis angle setting instruction, in the case that the coordinate axis combination relationship is an absolute combination relationship, the coordinate axis angle control The input first angle is determined as the angle between the vertical axis in the coordinate system and the canvas. In response to the coordinate axis angle setting command, in the case that the coordinate axis combination relationship is a relative combination relationship, the second angle input through the coordinate axis angle control is determined as the ordinate axis and the abscissa axis in the coordinate system. maintain the angle.

In this way, on the one hand, it supports allowing users to customize the angle maintained by the ordinate axis and the canvas in the coordinate system or the angle maintained by the ordinate axis and the abscissa axis, which improves flexibility and makes the built visual view more suitable for users. need. On the other hand, it is faster and more convenient, eliminating the tedious operation of writing program codes for setting the angle in the coordinate system, and reducing the implementation complexity of building a visual view.

In some embodiments, the build interface includes a visual view and a code area.

In some embodiments, the code area in the construction interface is used to display the first code for generating the visual view.

In this way, the constructed visualization view and the generated code of the visualization view are returned to the user through the same interface, so that the user can view the effect and code of the visualization view synchronously.

In some embodiments, the method further includes: in response to the code export instruction, outputting the first code in the code region to the target location.

Through the function of exporting code, it is convenient for users to modify the code for secondary development, and it also supports users to copy the code to other projects to deploy complex visual views.

In some embodiments, the method further includes: in response to the code execution instruction, adjusting the visual view by executing the second code entered in the code area.

In this way, the code entered by the user can be fed back to the interactive construction process, and the visual view is updated synchronously with the code entered by the user, so that the user can adjust the visual view by entering the code. In this way, the flexible use of code construction and interactive construction is supported. These two construction methods build charts, which solves the technical problem of code construction and interactive construction in related technologies that only one can be used.

In some embodiments, the method further includes: in response to an attribute setting operation on the visual view triggered on the construction interface, obtaining a third code corresponding to the attribute setting operation; and adding the third code to a code area in the construction interface.

In this way, in the scenario where the user interacts to construct a visual view, whenever the user performs an operation, the code displayed in the interface can be updated in real time following the user's operation, so that the code generated by the user's operation can be fed back in a more timely manner. For users, it is convenient for users to interactively adjust chart parameters and nested logic, and further improve the construction efficiency of visual views.

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

For example, when the visualization view is constructed by the cloud device, the cloud device sends the content of the visualization view to the initiator of the construction request. In this way, it supports to encapsulate the construction process of the visualization view as a cloud service and provide it to customers.

For another example, when the visual view is constructed by the terminal device, the terminal device displays the visual view in the construction interface.

In a second aspect, an apparatus for constructing a visual view is provided, and the apparatus for constructing a visual view has the function of implementing the first aspect or any optional manner of the first aspect. The apparatus for constructing a visual view includes at least one functional module, and the at least one functional module is configured to implement the method provided in the first aspect or any optional manner of the first aspect.

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

The apparatus for constructing a visual view optionally runs on a cloud computing system (including multiple cloud computing devices, such as servers), and is used to provide a cloud service for constructing a visual view to a customer. Alternatively, the visual view building apparatus runs on an edge computing system (including multiple edge computing devices, such as servers, desktop computers, etc.); desktop computer, etc.).

For the specific details of the apparatus for constructing the visualization view provided in the second aspect, reference may be made to the first aspect or any optional manner of the first aspect, which will not be repeated here.

A third aspect provides a computing device comprising a processor and a memory, wherein the memory stores 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 includes a network interface for sending the constructed visualization over the network. In some embodiments, the computing device further includes a screen for displaying the constructed visualization.

In a fourth aspect, a (non-transitory) computer-readable storage medium is provided. The (non-transitory) computer-readable storage medium stores at least one instruction that, when executed on a computer, causes the computer to execute the method provided in the first aspect or any optional manner of the first aspect. The type of the storage medium includes, but is not limited to, volatile memory, such as random access memory, non-volatile memory, such as flash memory, hard disk drive (HDD), solid state drive (solid state drive, SSD).

In a fifth aspect, a computer program product is provided, the computer program product includes one or more computer program instructions, when the computer program instructions are loaded and executed by a computer, cause the computer to execute the first aspect or the first aspect above. A method provided by any of the alternatives on the one hand. The computer program product is optionally a software installation package, and when the method provided in the first aspect needs to be used, the computer program product is downloaded and executed on a computing device.

In a sixth aspect, a chip is provided, including a memory and a processor, the memory is used to store computer instructions, and the processor is used to call and run the computer instructions from the memory to execute the above-mentioned first aspect and any possible possible aspects of the first aspect. method in the implementation.

In a seventh aspect, a computing device cluster is provided, and the computing device cluster includes at least one computing device. Different units of the computing device in the above second aspect are distributed and run on different computing devices in the computing device cluster. Optionally, the computing device cluster is a cloud computing system (including multiple cloud computing devices, such as servers). Alternatively, the computing device cluster is an edge computing system (including multiple edge computing devices, such as servers and desktop computers); alternatively, the computing device cluster is a terminal device cluster (including multiple terminals, such as desktop computer, etc.).

Description of drawings

1 is a schematic diagram of a comparison of visualization effects under a different shape coordinate axis provided by an embodiment of the present application;

Fig. 2 is a kind of visualization view of Napoleon's army east expedition provided by the embodiment of the present application;

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

4 is a schematic diagram of constructing a visualization view of Napoleon's Crusades based on a Cartesian coordinate system provided by an embodiment of the present application;

Fig. 5 is a kind of visualization view of Napoleon's army east expedition provided by the embodiment of the present application;

6 is a schematic diagram of an application scenario provided by an embodiment of the present application;

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

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

9 is a logical architecture diagram of a method for interactively constructing a visual view provided by an embodiment of the present application;

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

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

12 is a schematic diagram of an interface for constructing a visual view provided by an embodiment of the present application;

13 is a schematic diagram of an interface for constructing a visual view provided by an embodiment of the present application;

14 is a schematic diagram of a trajectory coordinate system implementing a visualization view of Napoleon's Crusades provided by an embodiment of the present application;

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

16 is a schematic structural diagram of an apparatus for constructing a visualization view provided by an embodiment of the present application;

FIG. 17 is a schematic structural diagram of a computing device provided by an embodiment of the present application.

Reference number:

10 - Terminal

11-Server

60 - Building the interface

601 - Data View

602 - Interactive Build View

603 - Hierarchical View

6031 - Icon or Chart

604-Attribute view (also called parameter configuration view)

6041 - Component for entering axis relations

6042 - Component for entering axis angles

6043 - Component for entering chart rotation angle

6044 - Component for entering chart names

6045 - text channel

6046-Font size input component

605-Construct result display area (also called visualization effect display area)

6051 - Visualization view (chart)

60511 - Rectangle Icon

6052 - Export control for triggering export of visualizations

606-code area

6061 - Run control for triggering running code

6062 - Export control for triggering export code

607-Track drawing area

608 - Color Picker

Detailed ways

In order to make the objectives, technical solutions and advantages of the present application clearer, the embodiments of the present application will be further described in detail below with reference to the accompanying drawings.

Some terms and concepts involved in the embodiments of the present application are explained below.

(1) Data visualization

Data visualization refers to the technique of encoding properties of data into properties of graphs to display data. Data visualization is used to communicate more clearly and effectively to users the information contained in the data. For example, encode the number of crowds as the size of a circle. The larger the circle size, the greater the number of crowds, so that the size of the circle can intuitively and effectively convey the number of crowds; another example, encode the date as a point Color, code working days as color 1 and holidays as color 2, so that holidays and working days can be visually distinguished by different colors.

(2) Visual elements

Visual elements are graphics used to present data. Visual elements are also sometimes called graphic symbols, visual symbols, or interface elements. Visual elements include, but are not limited to, rectangles, circles, arcs, curves, text, paths, regions, triangles, stars, and the like, from the perspective of the shape of the visual elements. From the perspective of the attributes of the visualization element, various attributes such as the position of the visualization element (such as x and y coordinates), size, color, shape, texture, line width, radius, length, width, etc. can be used to represent the data. For example, correlate the area of a circle (visualization element) with the number of crowds (a property of the data), with larger circles indicating more crowds. Different types of visualization elements may have the same properties or may have different properties. For example, circular elements have a radius property, and rectangular elements have a width property.

(3) Visual channel

A visual channel refers to the visual attributes that visual elements use to convey information. For example, visual channels include, without limitation, position, size, color, shape, texture, etc.

(4) Visual Coding

Visual encoding refers to using information to encode visual channels when an individual receives information, such as encoding visual channels such as color and size. The darker the color and the larger the size, the greater the data value.

(5) Track coordinate axis

The trajectory coordinate axis refers to the coordinate axis whose shape is a trajectory. For example, referring to Fig. 1 (b), the shape of the trajectory coordinate axis is optionally not a straight line, but a curved polyline. The shape of the trajectory coordinate axis is set by the user, for example.

Trajectory axes support the process of building visualizations in the shape of traces. For example, please refer to FIG. 1 . (a) and (b) of FIG. 1 show visualization views obtained by visualizing the same data using two coordinate axes respectively. (a) of FIG. 1 shows a visualization view obtained by visualizing data using a coordinate system of the X-axis shaped as a straight line and the Y-axis shaped as a straight line. The visualization result of (a) in FIG. 1 is a straight line. (b) of FIG. 1 shows a visualization view obtained by visualizing the data using the coordinate system of the X-axis (track coordinate axis) shaped as a polyline and the Y-axis shaped as a straight line. Since the shape of the X-axis (track coordinate axis) in (b) of FIG. 1 is a polyline, the visualization result in (b) of FIG. 1 is also affected by the shape of the track coordinate axis, and is also a polyline.

Typical application scenarios of the trajectory coordinate axis include the following cases 1 to 3.

Scenario 1: Visualize data whose data distribution is irregular in value, such as in the field of data news.

For example, in the field of data journalism, the layout of visual elements in a view is often domain-specific to deepen the theme and engage the audience. For example, in a visualization related to humanities, the layout of the visual elements is shaped like the shape of a person; in the visualization layout related to the Yellow River, the layout of the visual elements is shaped like the outline of the Yellow River. In such scenarios, the use of track axes helps to build visualizations more quickly. For example, in the application scenario of building a humanities-related visual view, users are supported to set the outline of a person as the trajectory data of the trajectory coordinate axis, so that the shape of the trajectory coordinate axis is the outline of a person, so as to facilitate the construction of a visual view of humanistic data. . For another example, in the application scenario of constructing a visualization view related to the Yellow River, users are supported to set the contour of the Yellow River as the trajectory data of the trajectory coordinate axis, so that the shape of the trajectory coordinate axis is the contour of the Yellow River, so as to facilitate the construction of a visualization view related to the Yellow River. .

The second case is to realize a visual view with a complex layout.

Specifically, when a visualization with a complex layout is realized by using a Cartesian coordinate system to realize a visualization view, a large amount of calculation by the user is required. However, 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 can automatically perform the calculation based on the trajectory coordinate axis.

Scenario 3: Visualization of high-dimensional data.

Specifically, high-dimensional data contains many attributes, and simple traditional views are difficult to express many attributes. The use of track axes helps to achieve more complex views to show the various properties of high-dimensional data. For example, in the scenario of visualizing army march data, several attributes such as longitude, latitude, number of troops, marching direction, time, and time can be displayed through the coordinate system based on the trajectory coordinate axis.

In summary, by providing the trajectory coordinate axis, it can support the user to build a coordinate axis of a custom shape, which is convenient for the visualization of various curve data and high-dimensional data with irregular values, and meets the construction requirements of unconventional layout visualization views. .

(6) Track data

The trajectory data is data for setting the trajectory coordinate axis. Trajectory data includes the location coordinates of a series of points. For example, please refer to (b) in FIG. 1 . In FIG. 1 (b), the trajectory coordinate axis is defined by using four vertices on the polyline as trajectory data. That is, after obtaining the position coordinates of point a, the position coordinates of point b, the position coordinates of point c, and the position coordinates of point d in (b) of FIG. 1, the position coordinates of these four points can be used. As the trajectory data, a trajectory coordinate axis shown in (b) of FIG. 1 is set.

(7) Coordinate axis properties

The axes properties are used to indicate the mapping between the values of the data and the canvas pixel range (ie the position in the visualization). Axis properties are also sometimes called axis parameters. The coordinate axis attributes include, but are not limited to, the type of the coordinate axis, the definition domain of the coordinate axis, the value range of the coordinate axis, and the like.

The types of axes include, but are not limited to, linear axes, category axes, circular axes, quadratic function axes, exponential function axes, polar axes, and the like.

The domain of the coordinate axis represents the value range of the data to be visualized. For example, the definition domain of the coordinate axis is [0, 100], indicating that the value range of the data to be visualized is [0, 100].

The range of the coordinate axis is also called the range of the coordinate axis. The value range of the coordinate axis is used to indicate the range of the coordinate axis distribution in the canvas. The range of the axes is used to determine how much of the canvas the data within the domain should be drawn on when building the visualization. For example, if the value range of the coordinate axis is [0,600], [0,800], it means that the coordinate axis is drawn in a rectangle with a length of 600 and a width of 800 in the canvas.

As the information contained in the data becomes more and more complex, the design of data visualization views is more and more limited to the use of simple charts. For example, the field of data journalism has begun to pursue the integration of art and intuition in the view, and design a data display form with aesthetics that conforms to the characteristics of the field to transmit information, so as to gain the audience's attention and interest in interpreting charts. For example, please refer to Figure 2. Figure 2 shows the visualization of Napoleon's army in 1812. The trajectory of the line represents the army's marching route, the grayscale of the line represents the army's attack and retreat, and the width of the line represents the number of troops. The line graph below Shows the local temperature as the army marches. This view makes people intuitively feel the situation of the army marching from west to east in the cold winter, and then continuously defeated from east to west.

The data news visualization in Figure 3 adopts an S-shaped layout, showing data from 2015 to 2021. Figure 3 makes reasonable use of space, displays a large amount of text and data information, and at the same time enhances viewing, which is both beautiful and practical.

However, in the implementation of visualization views, traditional methods are limited to using the Cartesian coordinate system for the layout of visualization elements. In order to realize complex visualization works, developers usually need to correspond to the designer's design draft, write a program, construct a mapping function from data values to pixels on the canvas, manually calculate the specific pixel positions of elements in the view, and draw and present the visualization results. The above process requires developers to have a strong mathematical background and programming ability, and it takes a lot of time and energy to deduce mathematical formulas and write position calculation functions, which directly leads to the high threshold and low efficiency of complex visualization construction. Although the related art helps users to create coordinate system types other than the traditional numerical Cartesian coordinate system by enumerating polar coordinate axes, category coordinate axes, etc. However, the limited coordinate axis options obtained from the enumeration can only form several typical coordinate systems, which cannot meet the design requirements of modern artistic, customized, specialized, and open visualization works with increasingly complex layouts.

In addition, the previous visualization construction process mostly relied on developers to directly write visualization programs. Coordinate system definition and visual coding tasks are implemented in the program. Therefore, developers need to be proficient in using visual language and the meaning of the parameters of the methods in the Application Programming Interface (API). During the development process, it is also necessary to iteratively adjust the parameters in the program corresponding to the design draft, recompile and draw comparisons to meet expectations visualization effect. Therefore, high-level visualization developer requirements and cumbersome development process bring great challenges to building complex visualizations. Interactive visualization construction interfaces, such as Tableau (data visualization analysis tool), voyager2 (a visual analysis tool) and other systems, mostly focus on helping users define the binding process of data attributes to visual channels such as color and length, rather than Support for freely defining coordinate systems such as allowing users to draw axes to complete the building process of complex visualizations.

In conclusion, there is an urgent need for an intuitive and efficient method for constructing complex visualization views, which improves the previous construction schemes for complex visualization views with high learning costs and low efficiency.

At present, visual programming languages, such as D3js (a JavaScript function library based on the way of working with data-driven documents) and Vega, although the use of data mapping library or visual chart library can meet the rapid construction tasks of traditional simple visual views, but only provide limited The type of coordinate system cannot support the efficient construction of professional complex, free and open visualization views. For example, using D3js language to realize the visualization view process in Fig. 2 is shown in Fig. 4, Fig. 4 shows a schematic diagram of the realization process of the case of Napoleon's Eastern Expedition in the Cartesian coordinate system, including the following steps (a) to (e).

Step (a) First, the user needs to establish the X-axis with the longitude as the definition domain and the canvas width as the value domain.

Step (b) Then the user needs to establish a Y-axis with the dimension as the definition domain and the canvas height as the value domain.

Step (c) obtains the position of each track point in the data on the canvas.

Step (d) uses line segments to connect adjacent trajectory points.

Step (e) Finally, convert the number of troops corresponding to each trajectory point into a width value, and assign it to each line segment as the line segment width, and the marching direction as the line segment color.

However, the army trajectory drawn only by the above process is segmented, because the width of each line segment is unique, and the continuous curve effect as shown in FIG. 5 cannot be achieved. This effect shows the continuous reduction of troops as they march, and is visually better. If this process is improved and the continuous curve shown in Figure 5 is generated, the developer must calculate the coordinates of the points on the outer contour of the curve in the Cartesian coordinate system. The process is shown in (f) of FIG. 4 and consists of the following 5 steps.

Step (f-1) firstly needs to obtain the coordinates of each track point in the Cartesian coordinate system.

Step (f-2) then obtains the length of the offset mapped to the number of troops corresponding to the current trajectory point.

Step (f-3) calculates the normal vector direction of the current trajectory point (as indicated by the arrow).

Step (f-4) Calculate the abscissa and ordinate offset △x and the offset △y according to the length of the offset and the direction of the normal vector, and calculate the position of the corresponding point on the outer contour of the curve from the coordinate offset of the trajectory point coordinate.

Step (f-5) connects the outer contour coordinates of the curve corresponding to all the trajectory points to generate the target curve.

In the above process, the normal vector direction, offset length, offset △x and offset △y need to be calculated using trigonometric functions. The process is cumbersome and the programming is prone to errors during development. It is very expensive for developers to debug. Even developers who are proficient in visual language APIs need to debug the program on the one hand, carefully write calculation functions, and on the other hand, constantly adjust the normal vector angle and line width in the program corresponding to the design draft. Such a development and debugging process is not only extremely difficult, but also cumbersome, unintuitive, and inefficient.

In the process of constructing open and customized visual views in application fields such as data journalism, there are generally technical problems arising from the above construction process. For example, in order to realize the view shown in Figure 3, the 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 the four points of the rectangle through the normal vector and the offset, and draw the rectangle and Text information, and finally rotate the element. Such construction processes will inevitably waste a lot of manpower, material resources, and financial resources.

For the method that provides several typical mapping method APIs including linear mapping, exponential mapping, category mapping, angle mapping, time mapping, etc., or provides visual view templates of different types of coordinate systems, it is necessary to be familiar with the implementation of complex visualization views. Developers with programming API and mathematical knowledge manually calculate the position of data in the coordinate system to locate visual elements, but cannot freely define the coordinate system and let the system automatically calculate the position of the data in the coordinate system. In addition, the programming and manual parameter tuning process during the development process also brings challenges to achieve an efficient visual construction scheme. Therefore, the previous high-cost, high-threshold, and low-efficiency construction solutions have been unable to meet the requirements for the construction of complex visualization views that are now customized, specialized, and increasingly free.

In recent years, most of the interactive construction schemes for visualization views have focused on helping users define visual codes for implementing traditional simple diagrams. They only have several types of typical coordinate systems such as Cartesian coordinate system or polar coordinate system built-in, so it will limit the visualization design, the generated view customization system is low, and the layout of visualization elements is not flexible enough to support the above mentioned Complex chart building tasks.

In view of this, in some embodiments of the present application, the complex customized visualization views appearing in various fields at this stage, or the construction requirements of professionally designed visualization views with special layout requirements, are supported by users to freely define the coordinate system, And automatically calculate the position coordinates and other information of the visual elements in the user-defined coordinate system in the system, which can reduce the user's workload and liberate the user's energy, allowing them to focus more on visual design and visual coding design, lowering the developer threshold and improving development. efficiency. At the same time, the embodiments of the present application provide an interactive interface to help users freely construct coordinate systems and visualization views, and further improve the construction of complex visualizations, aiming at the characteristics of high development difficulty and cumbersome debugging process caused by the need to write codes in the current construction process. efficiency, reduce learning costs, and realize rapid development and deployment of views.

The embodiment of the present application provides a visualization syntax that supports the user to freely define a coordinate system. On this basis, a construction interface for customized visual views is designed. It provides a set of interactive methods to help users intuitively define coordinate system parameters or freely draw coordinate systems, specify visual codes and adjust parameters, and finally output the corresponding visual view. The code and results allow users to build complex visualizations with minimal time cost. Compared with related solutions, the embodiment of the present application encapsulates the development process of complex layout calculation and underlying rendering by allowing the user to interactively and freely define the coordinate system and visual coding, which greatly reduces the user's workload and usage threshold, and improves the development efficiency. .

The application scenarios of the embodiments of the present application are illustrated below with examples.

FIG. 6 is a schematic diagram of an application scenario provided by 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 function, typical product form, deployment location and interaction mode of each device in FIG. 6 are illustrated below.

(1) Terminal 10

The terminal 10 is used for receiving the user's operation and displaying the visual chart to the user. In some embodiments of the present application, the terminal 10 is specifically configured to display a visual construction interface for nested charts on a screen and receive user input on the visual 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: interaction and inputting codes, so as to ensure the flexibility and correctness of the visual construction. In the interactive construction process, the above-mentioned visual construction interface displayed by the terminal 10 includes input components (such as input boxes and selection boxes), and the user triggers input operations on the input components to input the properties of the chart. The terminal 10 receives the attributes of the chart input by the user on the input component, acquires the constructed visualization view based on the attributes of the user configuration chart, and displays the constructed visualization view in the construction interface. In the process of constructing by means of code, the user inputs the program code in the visual construction interface. The terminal 10 receives the program code input by the user on the visualization construction interface, acquires the constructed visualization view based on the program code input by the user, and displays the constructed visualization view in the construction interface.

There are many possible product forms for the terminal 10 . The terminal 10 includes, without limitation, 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 the terminal 10 environment or in the edge environment. In some embodiments, the terminal 10 is deployed in a local area network.

(2) Server 11

The server 11 is used to provide the construction service of the visualization view. In some embodiments of the present application, the server 11 is specifically configured to calculate the layout parameters of the sub-chart according to the coordinate axis properties of the parent chart, such as the position coordinates of the sub-chart in the canvas area of the interface. Optionally, the server 11 is also used to undertake other tasks that take up large computing power when constructing the visualization view.

The server 11 is optionally 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 functions virtualization (NFV) technology. Virtualization 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 following method embodiments. For example, in response to the user's operation, the terminal 10 sends a visualization request to the server 11 to access the visualization construction service provided by the server 11 . The visualization request carries the information required for building the chart, such as parameters configured through the input component of the building interface or code input through the building interface. In response to the visualization request, the server 11 constructs a visualization chart according to the information carried by 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, the interaction through browser software or service client software. When using browser software to interact, the server 11 is, for example, a website server 11 , the terminal 10 accesses a specified webpage through the browser software to trigger the above-mentioned visualization request, and the server 11 carries the constructed visualization view in an HTML file and returns it to the terminal 10 . When using business client software for interaction, the above server 11 is, for example, a background server 11 associated with the business client software, and the terminal 10 accesses the above server 11 through the business client software to obtain a visual view.

The scenario of the interaction between the terminal 10 and the server 11 shown in FIG. 6 is optional. Alternatively, the terminal 10 locally executes the following method embodiments.

The method flow of the embodiment of the present application is illustrated below with an example.

FIG. 7 is a flowchart of a method for constructing a visualization view provided by an embodiment of the present application. The method shown in FIG. 7 includes the following steps S201 to S205.

The network deployment scenario on which the method shown in FIG. 7 is based is optionally as shown in FIG. 6 above. For example, with reference to FIG. 6 , the computing device in the method shown in FIG. 7 is the server or terminal in FIG. 6 .

The method shown in FIG. 7 is described by taking a computing device performing steps S201 to S204 as an example. In other embodiments, steps S201 to S204 are performed cooperatively by multiple devices. For example, with reference to FIG. 6 , the method shown in FIG. 7 is executed cooperatively by the server and the terminal. In some embodiments, the server undertakes the main processing work, and the terminal undertakes the secondary processing work; in other embodiments, the server undertakes the secondary processing work, and the terminal undertakes the main processing work; or, the server or the terminal respectively undertakes the processing work. In a possible implementation, the terminal acts as the initiator of the visual view construction request, requesting the server to construct the visual view of the chart; the server acts as the responder of the visual view request, constructs the visual view and returns the constructed visual view to the terminal, which is sent by The terminal displays a visual view.

The method shown in FIG. 7 involves multiple positions such as the position on the coordinate axis and the position in the coordinate system. In order to distinguish different positions, "first position", "second position", and distinction are used to describe a plurality of different positions.

The method shown in FIG. 7 involves the angle between the coordinate axis and the canvas, and the angle between the ordinate axis and the abscissa axis. In order to distinguish different angles, "first angle", "second angle", and distinction are used to describe a plurality of different angles.

Step S201, the computing device receives a construction request.

A build request instructs to build a visualization of the target data based on the specified coordinate system.

The coordinate axes of the set coordinate system include the trajectory coordinate axes. Optionally, the track coordinate axis is the X axis of the set coordinate system, or the track coordinate axis is the 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 a trajectory coordinate axis and other types of coordinate axes other than a trajectory coordinate axis. For example, the X axis of the coordinate system is the trajectory coordinate axis, and the Y axis is the linear coordinate axis. Alternatively, the two coordinate axes of the set coordinate system are both trajectory coordinate axes.

Target data refers to the data to be visualized. The target data includes at least one attribute. For example, when constructing the visualization view of the army's Eastern Expedition shown in Fig. 2, the target data includes attributes such as the longitude of the army's location, the latitude of the army's location, and the army's location.

In some embodiments, the shape of the trajectory coordinate axis is a trajectory input by the user, and the trajectory coordinate axis has a plurality of points with different curvatures.

In some embodiments, the input method of the trajectory corresponding to the trajectory coordinate axis includes any one of the following: drawing the trajectory in the construction interface; or inputting the position coordinates of multiple points on the trajectory in the construction interface.

Step S202, the computing device determines the position of the target data in the visualization view according to the trajectory coordinate axis and the target data.

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

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

In some embodiments, the above-mentioned first position is specifically determined according to the ratio of the data value to the definition domain. For example, the computing device acquires the position of the trajectory point on the trajectory coordinate axis as the first position according to the ratio of the value of the target data in the definition domain of the trajectory coordinate axis. The distance between the trajectory point and the endpoint of the trajectory axis (such as the start or end point) is scale-dependent. For example, the definition range of the track coordinate axis is 0 to 100, and the data with a value of 30 will be mapped to the position on the canvas where the track point whose distance from the track start point is 30% of the entire track length is located.

The canvas is the area in the build interface for displaying the visualization. The second position is the pixel position corresponding to 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 the second position corresponding to the target data in the coordinate system according to the first position, using the mapping position of the data on the Y-axis as the offset.

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

Step (a) The computing device calculates the coordinate position mapped by the target data on the X-axis according to the value of the target data. And, the computing device calculates the coordinate position mapped by the target data on the Y-axis according to the value of the target data. Among them, the X axis or the Y axis is the trajectory coordinate axis. That is, step (a) includes the above-mentioned step S202.

Step (b) The computing device obtains the offset of the abscissa and the offset of the ordinate according to the coordinate position mapped by the target data on the Y-axis.

Step (c) The computing device superimposes the abscissa offset and the ordinate offset and the coordinate position mapped by the data on the X axis to obtain the final data coordinate position (second position).

For a more specific calculation process of the second position, reference may be made to steps S1 to S3 below, and the introduction to formula (1) to formula (4).

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 scale according to the data value and the definition domain. For example, if the domain is 0-100 and the value is 20, the ratio is 20/100=0.2.

Step (2) obtains a track point from the track according to the ratio calculated in step (1), and the ratio of the distance between the track point and the track start point to the track length is equal to the ratio. For example, if the track length is 300 and the ratio calculated in step (1) is 0.2, then find a position on the track that is 20% away from the starting point of the track, that is, a position 60 away from the starting point.

In step (3), the position coordinates of the track points determined in step (2) are scaled 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 axis is [0,600], [0,800], it means that if the track is all drawn on the canvas, it should be drawn in a rectangle with a length of 600 and a width of 800; if the track point is 60 from the starting point position, then find the pixel corresponding to the point corresponding to 60 in the canvas.

In some embodiments, the coordinate system position is specifically determined according to a preset coordinate axis combination relationship. For example, the computing device acquires the 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 relationship refers to the relationship between different coordinate axes in the 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 combination relationship of the coordinate axes of the two-dimensional coordinate system is the relationship between the abscissa axis and the ordinate axis. This embodiment provides various types of coordinate axis combination relationships, and some possible coordinate axis combination relationships are introduced below.

(1) Absolute combination relationship

For example, the absolute combination relationship is that the ordinate axis (Y axis) and the canvas in the coordinate system are maintained at a set first angle, and the direction of the ordinate axis is optionally independent of the direction, shape and type of the abscissa axis (X axis). . Exemplarily, please refer to FIG. 8 , (a) in FIG. 8 is a schematic diagram of an absolute combination relationship. As shown in (a) of FIG. 8, in the case of using an absolute combination relationship, the Y-axis direction of each point is always at a certain angle to the canvas, that is, the angle between the Y-axis direction of each point and the canvas is identical. A typical application scenario of an absolute combination relationship is to construct a visual view with a complex shape in the X-axis direction and a large amount of data.

In this embodiment, by providing an absolute combination relationship, at least the following effects can be achieved: the absolute combination relationship makes the directions and rotation angles of the visualization elements unified. For example, in the visualization scene of FIG. 3, if the coordinate system of this absolute combination relationship is used, all the rectangles will be vertically upward, and all the text will be vertical, and the resulting visualization effect will be relatively neat. In addition, in the scenario where the user wants to emphasize the text when constructing the visual view, the text in the absolute combination relationship is always kept parallel to the canvas without being rotated, which makes it more convenient for the user to read the text.

In some embodiments, the calculation process from the coordinate position on the trajectory coordinate axis to the position in the coordinate system includes: in response to the combination relationship of the coordinate system being an absolute combination relationship, the computing device calculates the offset angle of the coordinate system according to the first angle and the coordinate system. , to obtain the angle of the ordinate axis in the coordinate system relative to the canvas; the computing device obtains the second position according to the angle of the ordinate axis relative to the canvas and the first position.

(2) Relative combination relationship

The relative type combination relationship is, for example, that the ordinate axis (Y axis) and the abscissa axis (X axis) in the coordinate system are maintained at a set second angle. Illustratively, please refer to FIG. 8 , (b) in FIG. 8 is a schematic diagram of a relative combination relationship. As shown in (b) of FIG. 8, in the case of adopting the relative type combination relationship, the Y-axis direction of each point is always at a certain angle with the X-axis direction, that is, the Y-axis direction and the X-axis direction of each point are at a certain angle. The included angles are the same. A typical application scenario of a relative composition relationship is to build a visual view with a small amount of data and a simple X-axis shape.

By providing a relative combination relationship, this embodiment can at least achieve the following effects: the relative coordinate axes can keep the Y axis and the X axis at a certain angle, thereby reducing the complexity of constructing a visualization view such as FIG. 3 . In addition, when the text information is not emphasized during visualization, and the visualization elements (rectangles, lines) need to have different rotation angles with the change of the coordinate axis, this relative coordinate axis can reduce the complexity of realizing such a visualization view.

In some embodiments, the angle between the ordinate axis and the canvas in the above-mentioned absolute combination relationship (the first angle) or the angle between the ordinate axis and the abscissa axis in the above-mentioned relative combination relationship (the second angle) ) are user-defined settings. For example, the computing device obtains the user's definition information of the coordinate system, and obtains the above-mentioned first angle or the second angle from the definition information. Optionally, the above-mentioned definition information is generated based on codes input by a user through a programming language. For example, the above-mentioned definition information is a declarative code for visual coding.

By supporting the setting of the angle between the Y axis and the X axis or the angle between the Y axis and the canvas, in the process of constructing a visualization view, the computing device will automatically calculate the layout according to the angle specified by the user, without the need for the user to manually calculate. In addition, after the angle is declared, users can quickly declare more diverse visualization views, or adjust the angle according to the visualization effect of the data to obtain a view with better visual effect and artistic effect. For example, if the user does not want the Y-axis to be vertical, he can set the Y-axis and the X-axis to form a 45-degree angle, and the computing device generates an oblique histogram according to the 45-degree angle set by the user, thus saving half of the canvas space in the upper left corner for other drawing of the element.

In some embodiments, the calculation process from the coordinate position on the trajectory coordinate axis to the position in the coordinate system includes: in response to the combination relationship of the coordinate system being a relative type combination relationship, calculating the device according to the second angle, the offset angle of the coordinate system and the tangent direction of the abscissa axis to obtain the angle of the ordinate axis relative to the canvas in the coordinate system; the computing device obtains the second position according to the angle of the ordinate axis relative to the canvas and the first position.

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

The visualization view includes at least one visualization element for representing target data. The visual element is located in the visual view at a determined position, such as the second position described above. Specifically, the computing device draws the visual element at the position determined in the canvas according to the visual element bound by the target data, thereby obtaining the visual view.

Step S205, the computing device provides a visualization view.

Optionally, the visual view is provided to the user by building an interface. The build interface is the interface used to build a visual view of the data. For example, the construction interface provided by the computing device includes a visualization result display area in which a visualization view is displayed. Through the construction interface, the construction result of the nested chart can be displayed intuitively during the visual construction process. Alternatively, the visual view is provided to the user through a file, an interface other than the build interface, and so on.

There are several specific ways to provide a visual view. In one possible implementation, the computing device sends the content of the visualization to the originator of the build request. For example, the computing device is provided as the cloud server 11, the initiator of the construction request is the terminal 10, and the above construction request is a Hyper Text Transfer Protocol (Hyper Text Transfer Protocol, HTTP) request. After the computing device obtains the visual view, it encapsulates the content of the visual view. For a Hyper Text Markup Language (Hyper Text Markup Language, HTML) file, the HTML file is sent to the terminal 10 through an HTTP response. In another implementation, the computing device displays the visualization in the build interface.

This embodiment provides a method for constructing a visual view based on a coordinate system based on the trajectory coordinate axis. The trajectory coordinate axis can support the user-defined shape of the coordinate axis, and the data to be visualized can be automatically calculated based on the trajectory coordinate axis. position in the coordinate system, thus encapsulating the development process of complex layout calculation, avoiding the tedious operation of manually calculating the specific position of the element when constructing the view using the Cartesian coordinate system, thus reducing the user's learning cost and improving the construction of complex visualization views s efficiency.

In the following, the principle of solving the problem of complicated steps when constructing a visual view of a continuous curve as shown in FIG. 5 in the related art in the above-mentioned embodiment is analyzed.

The above embodiment encapsulates the calculation process of the contour points on the curve. For example, after the user sets the trajectory coordinate axis as the coordinate axis in the coordinate system and sets the trajectory data, the system uses the calculation process related to the trajectory coordinate axis and the coordinate system to realize the position calculation of the trajectory contour point. By connecting them, a visualization view containing continuous curves can be formed, without relying on the user to manually calculate the position of the contour points, which greatly simplifies the tedious process of visualization view construction.

In some embodiments, an interactive construction interface supporting a custom coordinate system is provided. The construction interface includes a visual view and a coordinate system setting area, where the coordinate system setting area is used 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 combination relationship of the coordinate axes, and the included angle between the coordinate axes are set by an operation triggered on the coordinate system setting area. 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 the trajectory coordinate axis based on the inputted trajectory data. The computing device determines the trajectory coordinate axis according to the trajectory data input through the coordinate system setting area in response to the coordinate axis setting instruction.

Please refer to FIG. 12 . FIG. 12 is an example of the coordinate system setting area in the construction interface 60 shown in FIG. 11 . The coordinate system setting area includes an interactive construction view 602 , a property view 604 , and a trajectory drawing area 607 . Next, each component included in the coordinate system setting area in the construction interface will be introduced.

(1) Interactive construction view 602

The interactive construction view 602 is used for a user to create a diagram into a visualization view. The interactive construction view 602 allows the user to specify the kinds of icons in the diagram, nesting relationships between diagrams, diagram structure, and the like. For example, the interactive construction view 602 in (a) of FIG. 13 includes a set of rectangular icons 6031 created. The interactive construction view 602 in (b) of FIG. 13 includes two sets of rectangular icons 6031 and one set of circular icons 6032 that are created.

(2) Property view 604

The property view 604 is used for the user to configure the visual properties (such as color, size, etc.) of the visual element, so as to separate the chart structure construction and the visual content filling, and make the construction process clearer for the user. The property view 604 includes various input components, and the types of input components in the property view 604 include, but are not limited to, the following components (a) to (f).

Component (a) text input box: used for name, and other text type parameter input.

Component (b) Digital input box: used for inputting digital parameters such as height, width, font size, and line width.

Component (c) drop-down box (also called drop-down menu): used for enumeration type parameter input.

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

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

Component (f) Combined text input box: used for parameter input with multiple values, such as range, margin, etc.

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

The coordinate axis relationship option 6041 is a component for inputting the coordinate axis relationship, and the coordinate axis relationship option 6041 is, for example, a drop-down box. The user triggers an operation on the coordinate axis relationship option 6041, and selects one of the absolute type combination relationship and the relative type combination relationship as the combination relationship of the coordinate axis in the custom coordinate system. The user's operation on the coordinate axis relationship option 6041 will trigger the coordinate axis relationship setting command. The computing device determines the coordinate axis combination relationship selected through 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 type (fixed) combination relationship as the coordinate axis combination relationship in the custom coordinate system.

The coordinate axis included angle control 6042 is a component for inputting the coordinate axis included angle. The coordinate axis included angle control 6042 is, for example, a number input box. In the case that the coordinate axis combination relationship is an absolute combination relationship, the user triggers an operation on the coordinate axis included angle control 6042, and inputs the 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 in the coordinate system and the canvas. Alternatively, when the coordinate axis combination relationship is a relative combination relationship, the user triggers an operation on the coordinate axis angle control 6042, and inputs the angle maintained by the angle maintained 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 the angle maintained by the ordinate axis and the abscissa axis in the coordinate system. For example, in FIG. 12, the user inputs an angle of 66 degrees as the angle between the vertical axis in the custom coordinate system and the canvas.

In some embodiments, the properties view 604 also provides a component 6043 for entering the rotation angle of the chart. For example, in FIG. 12, the user inputs an angle of 0 degrees to the component 6043 as the rotation angle of the chart 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 Figure 12, the user enters the string 132 into component 6044 as the name of the chart.

(3) Trajectory drawing area 607

The trajectory drawing area 607 is used for the user to draw the shape of the trajectory coordinate axis, so as to set the trajectory data of the trajectory coordinate axis. The trajectory drawing area 607 is also called a trajectory drawing panel.

In the process of setting the parameters of the track coordinate axis, the user may perform a drawing operation on the track drawing area 607 through a mouse, a touch screen or other input devices, thereby drawing a track. In response to the user's drawing operation on the trajectory drawing area 607, the computing device acquires the trajectory drawn in the trajectory drawing area 607, and extracts the position coordinates of the trajectory points from the trajectory as trajectory data of the trajectory coordinate axis. For example, referring to FIG. 12 , after the user draws the trajectory, the computing device extracts the position coordinates of the trajectory point A, the position coordinates of the trajectory point B, the position coordinates of the trajectory point C, and the position coordinates of the trajectory point D from the trajectory. The position coordinates of each track point are set as the track data of the track coordinate axis.

Setting the shape of the trajectory axes by drawing operations is optional. Alternatively, properties of the data to be visualized are used as trajectory data. For example, the coordinate system setting area includes trajectory data options (not shown in FIG. 12 ), and the user inputs the attributes of the target data into the trajectory data options by dragging or other methods. The computing device sets the attribute of the target data input through the trajectory data option as the trajectory data of the trajectory coordinate axis. For example, the user drags the first attribute of the target data and the second attribute of the target data to the trajectory data option, and the computing device sets the first attribute of the target data as the abscissa of the trajectory data, and sets the second attribute of the target data as the abscissa of the trajectory data. Set as the ordinate of the trajectory data.

By using the trajectory data to define the coordinate axis, at least two effects can be achieved. First, the trajectory data given by the data is more controllable and accurate than the shape drawn directly. Second, when the layout shape that the user wants to generate is included in the data, for example, the movement trajectory of the data object, the outline shape of the object, etc. are used as the trajectory shape to generate the coordinate axis, it is faster and more convenient to use the data to directly assign the definition, and there is no need for the user to copy .

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

(4) Data View 601

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

(5) Hierarchical view 603

Hierarchy view 603 is used to present a hierarchy diagram of the diagram. Hierarchy diagrams are used to represent each icon (sub-diagram) contained in the diagram. Diagrams that are logically at different levels have different heights in the hierarchy diagram. For example, when the method shown in FIG. 7 is executed, the hierarchical view 603 is used to display the hierarchical structure diagram of the target data whose type is a chart, and the chart of the icon type in the hierarchical structure diagram is located in the lower layer of the parent chart. Through the design of the hierarchical view 603, the hierarchical structure of the chart currently under construction can be displayed intuitively, and the hierarchical structure of the chart can be transmitted to the user through the interface.

(6) Construction result display area 605

The construction result display area 605 is used to present the construction result of the visual view. The visual view 6051 drawn by the drawing module 503 will be displayed in the construction result display area 605 . In FIG. 11 , the visual view 6051 drawn by the drawing module 503 specifically includes a group of rectangular icons 60511 .

In some embodiments, the construction result display area 605 includes an export control 6052. When the user triggers an operation on the export control 6052, the computing device outputs the constructed visual view 6051 to the target location in the form of a picture, a file or other forms.

(7) Code area 606

The code area 606 is used to display the code for generating the visual view. In some embodiments, the code area 606 includes an export control 6062 and a run control 6061 . The export control 6062 is used to trigger the code export instruction. When the user triggers an operation on the export control 6062, the computing device outputs the code in the code area 606 to the target location in response to the code export instruction. The running control 6061 is used to trigger the code running instruction. When the user triggers an operation on the execution control 6061, the computing device executes the code entered in the code area 606 in response to the code execution instruction.

Through the visualization component construction interface shown in FIG. 11, the user can interactively construct the visualization view, and the user can complete the steps of object creation and parameter configuration by dragging and dropping, which further simplifies the construction process.

The meaning of the code displayed in the code area 606 in FIG. 11 is to set the parameters of the visual view, the specific meaning is to set the width to 1000, the height to 800, the background color to RGB(4,14,4), the X axis The type is set to linear, the domain is set between 0 and 2, the value range is set between 0 and 500, the type of Y-axis is set to linear, the domain is set between 0 and 3, and the value range is set between 0 and 500. between 520.

In some embodiments, the embodiments of the present application support the flexible use of two construction methods of code construction and interactive construction in a unified construction interface to build charts, thereby solving the problem that only one of code construction and interactive construction in the related art can be selected. The technical problems used, the following is an example of the implementation method related to code construction.

In some embodiments, the computing device presents program code for generating the visualization in the build interface. For example, referring to FIG. 11 , the construction interface 60 includes a code area 606 for displaying the first code for generating the visual view 6051 . While displaying the visual view 6051 in the construction interface, the computing device displays the generated code of the visual view 6051 in the code area 606 . In this way, the constructed visualization view and the generated code of the visualization view are returned to the user through the same interface, so that the user can view the effect and code of the visualization view synchronously.

The source of the first code displayed in the construction interface includes many situations, and the following is an example of combining two situations.

Situation 1. The first code displayed in the construction interface is the code generated according to the user's operation on the interface component in the process of constructing the visual view in an interactive manner.

For example, please refer to FIG. 11 , the first code is code generated based on the setting operation of the element attribute triggered on the interactive construction view 602 or the attribute view 604 . The first code represents the visual encoding set for the visualization element. For example, the user selects Arial as the font of the text icon in the font input box in the property view 604, and the first code indicates that the font of the text icon is set to Arial.

Situation 2: The first code displayed in the construction interface is the code input by the user in the process of constructing the visual view by means of code. For example, referring to FIG. 11 , the first code is the code entered in the code area 606 in the construction interface 60 .

In some embodiments, the above-described build interface supports the ability to export the generated code of the visualization. For example, referring to FIG. 11 , the code area 606 in the above construction interface 60 includes an export control 6062, and the user clicks or operates on 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 export instruction. The code export instruction is used to instruct to export the first code in the code area 606 . This destination is used to save the generated code for the exported visualization. The target location includes, but is not limited to, a default location or a location set by the user. The target location includes, but is not limited to, a local storage location of the computing device or a storage location in the cloud. Through the function of exporting code, it is convenient for users to modify the code for secondary development, and it also supports users to copy the code to other projects to deploy complex visual views.

In some embodiments, the above-described build interface supports the function of generating code for inputting the visualization. For example, the code area in the build interface above contains an input component capable of receiving user input. The user inputs the second code in the code area in the construction interface to trigger the code running instruction. The computing device adjusts the visual view by running the second code input in the code area in the construction interface in response to the code running instruction, and provides the adjusted visual view in the construction interface. Wherein, the code running instruction instructs to run the code input in the construction interface. Exemplarily, please refer to FIG. 11 , the code area 606 in the construction interface includes an export control 6062 , and the code running instruction is triggered by an operation on the export control 6062 . In this way, the code entered by the user can be fed back into the interaction building process, allowing the user to adjust the visualization by entering the code.

In some embodiments, the computing device will synchronously update the code displayed in the construction interface as the user sets the properties of the visual element. For example, the computing device obtains the third code corresponding to the attribute setting operation in response to the attribute setting operation on the visual element in the visualization view triggered on the construction interface; and adds the third code to the code area 606 in the construction interface. The property setting operation is, for example, an operation triggered by an input component in the property view 604 , an operation triggered by the interactive construction view 602 or the hierarchical view 603 . For example, the property setting operation is an operation of inputting the included angle of the coordinate axis triggered by the component 6042 for inputting the included angle of the coordinate axis in the property view 604 . In this way, in the scenario where the user interacts to construct a visual view, whenever the user performs an operation, the code displayed in the interface can be updated in real time following the user's operation, so that the code generated by the user's operation can be fed back in a more timely manner. For users, it is convenient for users to interactively adjust chart parameters and nested logic, and further improve the construction efficiency of visual views.

Below, the logical function architecture provided by the embodiment of the present application is illustrated by way of example.

Please refer to FIG. 9. FIG. 9 shows a frame diagram of an interactive construction method of a visual view. The frame structure shown in FIG. 9 can be provided as a construction device 70 for a visualization view. The frame structure of the apparatus 70 for constructing the visual view mainly includes three parts, which are the generation module 71 of the interactive construction interface, the visual grammar module 72 and the communication module 73 respectively.

The interactive construction interface generation module 71 is used to generate the interactive construction interface. The generation module 71 of the interactive construction interface supports the user to specify the coordinate system through the interface and define the visual code. The generation module 71 of the interactive construction interface 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 . The coordinate system setting module 711 is used to support the user to specify the coordinate system through the interface. Visual code formulation module 712 is used to support specifying visual codes in interaction with the user. The visualization effect returning module 713 is used to return the final visualization effect graph to the user, so as to facilitate the user to view the effect and interactively debug the parameters in the view. The visual code return module 714 is used to return the code corresponding to the visual effect diagram, which is convenient for the user to directly export or perform secondary development.

The visual grammar module 72 is used to support visual coding based on a custom coordinate system. The visual grammar module 72 includes a visual coding module 721 and a code packaging module 722 . The visual coding module 721 is used to draw visual elements through the visual coding and coordinate system specified by the user. The visual coding module 721 includes a classic coordinate axis library 7211 , a trajectory coordinate axis module 7212 , a coordinate system calculation module 7213 and other visual coding modules 7214 . The classic coordinate axis library 7211, the trajectory coordinate axis module 7212, and the coordinate system calculation module 7213 can be provided as the layout calculation module. The three modules of the classic coordinate axis library 7211, the trajectory coordinate axis module 7212, and the coordinate system calculation module 7213 are used for processing position-related layout calculations. The classic coordinate axis library 7211 is convenient for users to directly construct the classic coordinate system. The Trajectory Axes module 7212 allows the user to define axes of arbitrary shape. The coordinate system calculation module 7213 is used to encapsulate the layout calculation process of mapping data to a specific position in the coordinate system. The other visual coding module 7214 handles the designation and rendering methods of other visual channels in the visualization in addition to the positional layout. The code encapsulation module 722 encapsulates the underlying layout calculation process and rendering process, and outputs concise declarative code to return to the construction interface.

The communication module 73 is used to interact with the user. For example, the communication module 73 is configured to receive the coordinate system parameters input by the user (such as a drawn trajectory), 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 generation module 71 of the interactive construction interface uses the coordinate system parameters input by the communication module 73 to generate the construction interface. After the generation module 71 of the interactive construction 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 visualization and code to the user.

Next, the functions and specific implementation principles of each of the above modules are introduced one by one from the bottom up.

Visual grammar module 72 provides a set of declarative visual programming language, which encapsulates the underlying layout calculation process and visual rendering process. Users can obtain code for complex visual views by entering data, formulating coordinate systems, and defining visual coding rules and visualize the results. The visual grammar module 72 includes the following visual coding module 721 and code packaging 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 display data attributes, and to encapsulate the calculation and drawing process of visual elements.

The visual encoding module 721 includes a layout calculation module. The layout calculation module is responsible for the position-related calculation tasks. In the layout calculation module, in order to support the rapid construction of unconventional layout visualization views, in addition to providing the conventional classic coordinate axis library 7211, this embodiment of the present application also provides a trajectory coordinate axis module 7212 to support the user to construct a custom coordinate axis . And through the coordinate system calculation module 7213, it further provides a method for defining the combination relationship between the horizontal and vertical coordinate axes, which supports more flexible coordinate system definition. . The specific description is as follows.

(i) Classic axis library 7211

The classic coordinate axis library 7211 in this embodiment of the application provides classic coordinate axis libraries including linear coordinate axes, polar coordinate axes, circular coordinate axes, exponential function coordinate axes, quadratic function coordinate axes, and category coordinate axes. For example, through the code of the declarative syntax of the coordinate axis shown below, several coordinate axes in the classic coordinate axis library 7211 can be directly called, and the parameters such as the definition domain and value range of the coordinate axis can be adjusted through the configuration options, and the coordinate axis can be directly completed. build process.

Exemplarily, the code for constructing the linear coordinate axis is as follows, the meaning of the code shown below is to set the definition domain of the linear coordinate axis to be 1.2 times the minimum value to 1.2 times the maximum value of the data to be visualized, and The range of the linear axis is set to the canvas height.

Exemplarily, the code of the circular category coordinate axis is as follows, the meaning of the code shown below is to set the definition domain of the circular category coordinate axis to all the values of the name attribute of the data to be visualized, and the circular The value range of the category coordinate axis (that is, the starting and ending angles) is set to [0,270], the specified circle radius is 100, and the angle corresponding to each category and the interval between categories is specified as 0.3.

Exemplarily, the code of the quadratic function coordinate axis is as follows, the meaning of the code shown below is to set the quadratic term coefficient a in the quadratic function corresponding to the quadratic function coordinate axis to 1, and set the quadratic function coordinate The value range of x in the quadratic function corresponding to the axis is set to [0, 20], the definition domain of the quadratic function coordinate axis is set to [0, 600], and the width of the value range of the quadratic function coordinate axis is set. To be half the width of the canvas, set the height of the value range of the quadratic function coordinate axis to 0.8 times the height of the canvas.

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

Exemplarily, the code of the polar coordinate axis is as follows, the meaning of the code shown below is to set the definition domain of the polar coordinate axis to all the values of the name attribute of the data to be visualized, and set the value range of the polar coordinate axis to (Start and end angle) is set to [0,360].

(ii) Track coordinate axis module 7212

Exemplarily, the code for declaring the trajectory coordinate axis of the trajectory coordinate axis module 7212 is as follows, the meaning of the code shown below is to set the trajectory data of the trajectory coordinate axis as data trajData, and set the definition domain of the trajectory coordinate axis. For [0,500], set the width of the range (distribution range) of the trajectory coordinate axis to the width of the canvas, and set the height of the range (distribution range) of the trajectory coordinate axis to 0.4 times the height of the canvas.

The track coordinate axis module 7212 provided by the embodiment of the present application, as shown in FIG. 12 , allows the data of a track to be used as the coordinate axis attribute, thereby constructing a coordinate axis of any shape. The custom coordinate axis shape capability provided by the trajectory coordinate axis module 7212 greatly improves the flexibility of coordinate system definition and facilitates the generation of customized coordinate systems. In the process of subsequent use, the calculation process of the element layout position is encapsulated by the track 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 proportion of the value in the definition domain. For example, in a trajectory coordinate axis with a definition domain of 0 to 100, data with a value of 30 will be mapped to the position on the canvas where the trajectory point is 30% of the entire trajectory length from the start point of the trajectory, and will It is used as the coordinate of the data on the coordinate axis.

(iii) Coordinate system calculation module 7213

The coordinate system calculation module 7213 abstracts the structure of the coordinate system, that is, a two-dimensional coordinate system consists of the X axis and the Y axis, and the combination relationship between the X axis and the Y axis is divided into two types: relative type combination and absolute type. FIG. 8 shows a schematic diagram of the combination relationship of the coordinate axes. As shown in FIG. 8 , the absolute type combination means that the Y-axis always maintains a certain angle with the canvas, regardless of the direction of the X-axis. The relative type combination means that the Y-axis is always at a certain angle to the X-axis, and the direction of the Y-axis changes with the direction of the X-axis tangent.

Exemplarily, the user declares the coordinate system by entering the following code, and after adding the rectangular visualization element, the visualization result shown in FIG. 10 will be obtained. The meaning of the following code is to set both the X-axis and the Y-axis as the coordinate axes in the predefined classic coordinate axis library 7211. Set the X-axis to the pre-defined line category axis. Set the Y-axis to the predefined linear numerical axis. Set the combination type of the X-axis and the Y-axis to relative type, set the angle between the X-axis and the Y-axis to 50 degrees, and rotate the coordinate system counterclockwise by 50 degrees.

Thus, a user can customize a free-form coordinate system through the classic coordinate axis library 7211, the trajectory coordinate axis module 7212, and the coordinate system combination definition method provided by the embodiment of the present application, so as to construct a visual view of a complex layout. After the coordinate system is given, the embodiment of the present application maps the encapsulated data to the calculation process of the position in the coordinate system.

In a 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 formula (1) is an example of the first angle in the method shown in FIG. 7 , and the combined angle a in the following formula (2) is an example of the first angle in the method shown in FIG. 7 . An example of two angles,

Step S1 calculates the coordinate position (x ₁ , y ₁ ) of the data on the X-axis.

Step S2 calculates the coordinate position (x ₂ , y ₂ ) of the data on the Y axis.

Step S3 calculates the direction A of the Y axis under the current X coordinate according to the combination type of the coordinate axis, the combination angle a, the current tangent direction of the X axis and the offset angle b of the coordinate system. Among them, when the coordinate axis combination type is absolute type, the following formula (1) is used to calculate the direction of the Y axis. When the coordinate axis combination type is the relative type, the following formula (2) is used to calculate the direction of the Y axis.

A=a+b; formula (1)

A=a+b+X-axis tangent direction at (x ₁ , y ₁ ) position; formula (2)

In step S4, according to the coordinate position and direction on the Y-axis, the offset of the horizontal and vertical coordinates of the data is calculated and superimposed on the coordinates 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). The x and y obtained by the following formula (3) and formula (4) represent the pixel position on the canvas.

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

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

(iv) Other visual coding modules 7214

The other visual encoding module 7214 provides user designation and rendering methods for visual channels other than the location of visual elements. Other visual channels outside of position include, but are not limited to, fill color, line color, line width, element height, element width, angle, and the like. Illustratively, the declarative code for visual coding is as follows.

There are two ways to specify other visual channels. One way is to directly specify the value as the value of the element's visual channel, for example, in the above example, set the border width of each rectangle to 0. Another way is to use the attribute value of the data returned by the function as the element attribute. In the above example, the height of the rectangle is bound to the attribute value of the val attribute of each piece of data. The rectangle corresponding to the data with a large val value will be taller. After obtaining the data encoding, the system will calculate the element position and other element attributes according to the layout module.

(B) Code Encapsulation Module 722

The code encapsulation module 722 separates the declarative code from the specific implementation code, allows the declarative code to be defined, and encapsulates the underlying rendering and calculation processes. In this embodiment, through the code encapsulation module 722 , the user is mainly concerned with what needs to be drawn and which attribute values the drawn elements need to correspond to, and does not need to care too much about how to draw and how to perform mapping calculation on data values. In the construction scheme of the embodiment of the present application, the encapsulated semantic code is as shown in the above case, and will be returned to the generation module 71 of the interactive construction interface, which is convenient for users to export or perform secondary development together with the grammar package.

Please refer to FIG. 11 . FIG. 11 is a schematic diagram of a generation module 71 of a construction interface of a visualization view provided by an embodiment of the present application. The interactive construction interface generation module 71 provided by the embodiment of the present application includes a series of interaction schemes, helping the user to define the coordinate system and visual coding, iteratively adjust the visual parameters, and return the visual view and code to the user. The interactive construction interface generation module 71 is used, for example, to generate the construction 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 visual effect return module 713 and a visual code return module 714 .

(a) Coordinate system formulation module 711

As shown in FIG. 12 , the coordinate system setting module 711 allows the user to interactively specify parameters such as the coordinate axis in the two-dimensional coordinate system and the combination type and combination angle between the coordinate axes. The user can drag the coordinate axis or track coordinate axis in the classic coordinate axis library 7211 on the left to the X or Y axis to specify the coordinate axis type. After specifying the coordinate type, the user can set the parameters of the X or Y coordinate axis in the property view 604 in the lower left corner of the interface, and the input methods include the following three.

Input method 1. The user inputs a numerical value as a parameter, for example, the input interval [0,100] is used as the definition domain of the linear coordinate axis.

Input method 2. The user drags the data attribute to the parameter of the coordinate axis, indicating that the value range of the data value is used as the definition domain of the coordinate axis. For example, the user drags the name attribute field of the data to the definition domain of the X-axis, indicating that all the values of the name are used as the definition domain of the category-type coordinate axis.

Input method 3. For the trajectory coordinate axis, the user can directly draw a trajectory in the panel manually, and the system will automatically extract the trajectory points as the trajectory data of the coordinate axis. The user can also use the trajectory coordinates in the data to specify two of the data. The attribute is used as the horizontal and vertical coordinates of the trajectory data. Both of the above schemes for drawing and trajectory data allow the user to define an axis of any shape.

Next, the user can adjust the coordinate system parameters in the property view 604, including selecting the combination type of the coordinate axis from the drop-down menu, rotating or scaling the coordinate axis by dragging the rotation point and zoom point on the coordinate axis, and adjusting the combination of the coordinate axis The angle and the rotation angle of the coordinate system. When adjusting the parameters, the system will automatically apply it to the construction of the visualization attempt according to the user's input, and return the adjusted visualization results, so that the user can obtain the result feedback in real time during the dragging process, realize the interactive parameter adjustment process, and improve the user's experience. development efficiency.

(b) Visual coding formulation module 712

The visual coding formulating module 712 in this embodiment of the present application allows the user to add visual elements in the visual view and set visual coding. Specifically, as shown in (a) of FIG. 13 , the user can drag and drop visual elements (eg, rectangle, circle) in the visual element library to add to the interactive construction view 602 . For example, FIG. 13 shows the user dragging the rectangular icon 6031 to the interaction construction view 602 .

Then, this embodiment provides three different interactive ways to help users declare visual codes.

Interaction mode 1. As shown in (b) of FIG. 13, the user can drag the attribute of the data to the visual channel option box of the element in the attribute view 604, and use the attribute value of the data as the visual channel of the visual element. value. For example, in FIG. 13, dragging the text field to the text channel 6045 of the text element indicates that the displayed text of the text element is the content of the text field of the data.

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

Interaction Mode 3: As shown in (d) of FIG. 13 , a color selector 608 is provided, and the built-in color selector 608 is used to select a color as the value of the visual channel.

(c) Visualization effect return module 713

As shown in the construction result display area 6051 in FIG. 11, along with the user interactive construction process, the system will call the underlying visual grammar module 72 to perform visual rendering and code encapsulation, and then directly return the visual view constructed by the user in the interface On the one hand, the user can intuitively grasp the current status of the view generation, and can also interactively adjust the coordinate axis parameters or visual coding by returning the results to achieve the desired visualization effect.

(d) Visualization code return module 714

As shown in the code area 606 in FIG. 11, in addition to returning the visual effect, the user will also get the visual code written in the declarative syntax on the interface. The user can directly modify the code for secondary development, or copy the code to other projects for implementation. Export and deployment of complex visualization code.

The following is an example to illustrate the method of constructing a visual view.

Example 1

Fig. 14 shows a schematic diagram of a case of Napoleon's Eastern Expeditions realized using the trajectory coordinate system. This embodiment realizes the visualization case flow of Napoleon's Crusades with a continuous curve as shown in FIG. 14 , including the following steps (a) to (i).

Step (a) The user drags the track coordinate axis in the coordinate axis library as the X axis.

Step (b) The user drags the linear value coordinate axis in the coordinate axis library as the Y axis.

Step (c) The user selects the coordinate axis relationship as relative type, and sets the angle between the X axis and the Y axis as 90 degrees.

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

Step (e) The user drags the size field of the number of troops of the data to the domain option of the Y-axis, and sets the Y-axis value range to [0,100]. A coordinate system as shown in FIG. 15 is thus established.

Step (f) The user adds a visual element of type 'area' to the view.

Step (g) The user drags the date field of the data to the x option of the "Area" property panel, drags the size field of the army number to the y property of the element property panel, and selects the fill color of the area to be light yellow.

Step (h) Through the returned visualization result, drag the Y axis to rotate, adjust the combined angle between the coordinate axes, and finally obtain the visualization effect diagram as shown in FIG. 15 .

In step (i), other auxiliary views are constructed, and a visualization effect diagram as shown in FIG. 15 can be obtained.

The meaning of the code area 606 in FIG. 15 is to define the trajectory coordinate axis, and the specific meaning is to set the range of the trajectory coordinate axis to be the closed interval of 0 to 600, the closed interval of 0 to 600*0.4, and the definition domain of the Y axis is equal to The number of troops, set the Y-axis height to 70.

To sum up, the embodiment of the present application can support the establishment of a custom coordinate system based on the trajectory coordinate axis, and can define the relationship and combination angle between the coordinate axes, provide more flexible coordinate system options, and make the construction layout complex When creating a visual view, it can encapsulate the mapping calculation process of data to the canvas position. Users only need to define the coordinate axis parameters and declare the visual code to complete the construction of the visual view, so there is no need to have basic knowledge background such as mathematics and graphics drawing. It greatly reduces the workload of complex view construction and improves construction efficiency.

Further, on the basis of supporting a custom coordinate system, it provides a set of interactive interfaces to help users build complex visual views, create visual elements and visual coding through drag-and-drop methods, and can draw, specify, etc. The coordinate system is established in this way, and the visual results and codes are updated in real time and returned to the user for convenient parameter adjustment and export, which reduces the professional threshold and the efficiency of building and debugging codes, effectively avoiding the waste of manpower and time.

To sum up, some embodiments of the present application propose an abstract model of a free coordinate system in a visualization view, and based on this, a set of visualization grammars that allow a user to define a coordinate system are established. Users can use a declarative language to select common coordinate axes or customize any trajectory as coordinate axes to establish a coordinate system, which encapsulates the mapping process of data values to positions in the coordinate system. Users only need to declare the binding rules of the coordinate system and visual coding, namely It can complete the drawing of complex visual views without mathematical background knowledge and position calculation, thus improving the development efficiency and the code amount by more than 50%.

In addition, a set of interactive visual view construction methods are designed. Users can use simple and intuitive interactive operations to select or draw the coordinate axes in the coordinates, freely create a coordinate system, and then add visual elements in the coordinate system for visual coding, Adjust parameters to complete complex visualization building and refinement tasks. The final result can be directly exported in the form of code, which is convenient for use and secondary development, which greatly reduces the development threshold and reduces the waste of manpower, time and resources in the development of complex visual views.

FIG. 16 is a schematic structural diagram of a computing device provided by an embodiment of the present application. The visualization view constructing apparatus 900 shown in FIG. 16 is used to implement the visualization view constructing method provided by the above method embodiments.

Optionally, with reference to the application scenario shown in FIG. 6 , the apparatus 900 for constructing the visual view shown in FIG. 16 is the terminal 10 or the server 11 in FIG. 6 .

Optionally, with reference to FIG. 7 , the apparatus 900 for constructing a visual view shown in FIG. 16 is a computing device in the method flow shown in FIG. 7 .

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

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

The apparatus embodiment described in FIG. 16 is only illustrative. For example, the division of the above-mentioned units is only a logical function division. In actual implementation, there may be other division methods, for example, multiple units or components may be combined or Integration into another system, or some features can be ignored, or not implemented. Each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically alone, or two or more units may be integrated into one unit.

All or part of each unit in the apparatus 900 for constructing a visual view is implemented by software, hardware, firmware or any combination thereof.

In the case of software implementation, for example, the above-mentioned visual grammar module 902 and interactive construction interface generation module 903 are software generated by at least one processor 801 in FIG. 17 after reading the program code stored in the memory 802 functional unit to achieve.

In the case of hardware implementation, for example, the above-mentioned 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 visual grammar module 902 is implemented by a part of the processing resources in at least one processor 801 in FIG. 17 (for example, one core or two cores in a multi-core processor), and the interactive construction interface generation module 903 is implemented by FIG. 17 . The remaining part of the processing resources in at least one processor 801 (for example, other cores in a multi-core processor), or use a field-programmable gate array (field-programmable gate array, FPGA), or a programmable device such as a coprocessor to complete .

In the case of a combination of 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 the program code stored in the memory read by the CPU After that, the generated software functional unit.

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

FIG. 17 is a schematic structural diagram of a computing device provided by an embodiment of the present application. The computing device 800 shown in FIG. 17 is used to implement the method for constructing a visualization view provided by the above method embodiments.

Optionally, with reference to 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, with reference to FIG. 7 , the computing device 800 shown in FIG. 17 is the computing device in the method flow shown in FIG. 7 .

Optionally, with reference 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 , and a visual code return module 714 shown in FIG. 9 . , a visual coding module 721 and a code packaging module 722 .

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 general-purpose central processing unit (central processing unit, CPU), a network processor (network processor, NP), a graphics processing unit (graphics processing unit, GPU), a neural-network processing unit (neural-network processing units, NPU) ), a data processing unit (DPU), a microprocessor or one or more integrated circuits for implementing the solution of the present application. For example, the processor 801 includes an application-specific integrated circuit (ASIC), a programmable logic device (PLD), or a combination thereof. The PLD is, for example, a complex programmable logic device (CPLD), a field-programmable gate array (FPGA), a generic array logic (GAL), or any combination thereof.

The memory 802 is, for example, a read-only memory (ROM) or other types of static storage devices that can store static information and instructions, or a random access memory (RAM) or a memory device that can store information and instructions. Other types of dynamic storage devices, such as electrically erasable programmable read-only memory (EEPROM), compact disc read-only memory (CD-ROM) or other optical disk storage, optical disks storage (including compact discs, laser discs, compact discs, digital versatile discs, Blu-ray discs, etc.), magnetic disk storage media, or other magnetic storage devices, or capable of carrying or storing desired program code in the form of instructions or data structures and capable of Any other medium accessed by a computer without limitation. Optionally, the memory 802 exists independently and is connected to the processor 801 through an internal connection 804 . Alternatively, the memory 802 and the processor 801 are optionally integrated.

The network interface 803 uses any transceiver-like device 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 (wireless local area network, WLAN) interface, a cellular network network interface or a combination thereof, and the like.

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 a multi-core processor (multi-CPU). A processor herein optionally refers to one or more devices, circuits, and/or processing cores for processing data (eg, computer program instructions).

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

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

In some embodiments, the input and output interface 806 is used to connect with an input device, and receive commands or data related to the method shown in FIG. 7 input by the user through the input device, such as a construction request, information for defining coordinate axes (such as Trajectory data, coordinate axis definition domain, coordinate axis type, coordinate axis value domain), information used to define the combination relationship of coordinate axes (such as absolute type or relative type, the angle between the Y axis and the canvas, the angle between the Y axis and the X axis) , the code used to generate the visualization, the type of icon, and the parameters of the chart or icon. Input devices include, but are not limited to, keyboards, touch screens, microphones, mice, or sensing devices, among others.

In some embodiments, the input-output interface 806 is also used to interface with output devices. The input and output interface 806 outputs the intermediate results and/or final results generated by the processor 301 executing the above-mentioned method shown in FIG. 7 through the output device, such as the visual view, the code for generating the visual view, and the result generated according to the configuration operation on the visual view. code. Output devices include, but are not limited to, displays, printers, projectors, and the like.

Optionally, the processor 801 implements the methods in the foregoing embodiments by reading program codes 810 stored in the memory 802, or the processor 801 implements the methods in the foregoing embodiments by using internally stored program codes. When the processor 801 implements the method in the above embodiment by reading the program code 810 stored in the memory 802, the memory 802 stores the program code for implementing the visualization view construction method provided by the embodiment of the present application.

For more details of the above-mentioned functions implemented by the processor 801, please refer to the descriptions in the foregoing method embodiments, which will not be repeated here.

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

A refers to B, which means that A is the same as B or A is a simple variation of B.

The terms "first" and "second" in the description and claims of the embodiments of the present application are used to distinguish different objects, rather than used to describe the specific order of the objects, nor should they be construed as indicating or implying relative importance sex. For example, the first position and the second position are used to distinguish different positions, not to describe a specific order of the positions, nor should it be understood that the first position is more important than the second position.

In the embodiments of the present application, unless otherwise specified, the meaning of "at least one" means one or more, and the meaning of "plurality" means two or more. For example, multiple 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, it can 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. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of the present application are generated. The computer may be a general purpose computer, special purpose computer, computer network, or other programmable device. The computer instructions may be stored in or transmitted from one computer readable storage medium to another computer readable storage medium, for example, the computer instructions may be downloaded from a website site, computer, server or data center Transmission to another website site, computer, server, or data center is by wire (eg, coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (eg, infrared, wireless, microwave, etc.). The computer-readable storage medium may be any available medium that can be accessed by a computer or a data storage device such as a server, data center, etc. that includes an integration of one or more available media. The usable media may be magnetic media (eg, floppy disks, hard disks, magnetic tapes), optical media (eg, DVD), or semiconductor media (eg, Solid State Disk (SSD)), and the like.

The above embodiments are only used to illustrate the technical solutions of the present application, but not to limit them; although the present application has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that: The recorded technical solutions are modified, or some technical features thereof are equivalently replaced; and these modifications or replacements do not make the essence of the corresponding technical solutions deviate from the scope of the technical solutions of the embodiments of the present application.

Claims

A method for constructing a visual view, characterized in that the method comprises:

receiving a construction request, the construction request instructing to construct a visual view of the target data based on a set coordinate system, where the coordinate axis of the coordinate system includes a trajectory coordinate axis, and the trajectory coordinate axis refers to a coordinate axis whose shape is a trajectory;

According to the trajectory coordinate axis and the target data, determine the position of the target data in the visualization view;

obtaining a visual view of the target data according to the determined position, where the visual view includes a visual element for representing the target data, and the visual element is located at the determined position in the visual view;

The visualization is provided.
The method according to claim 1, wherein the shape of the trajectory coordinate axis is a trajectory input by a user, and the trajectory coordinate axis has a plurality of points with different curvatures.
The method according to claim 2, wherein the input method of the trajectory comprises any one of the following:

draw the trajectory in the build interface; or,

The position coordinates of the multiple points on the trajectory are input in the construction interface.
The method according to claim 1, wherein the shape of each coordinate axis in the coordinate system is a straight line.
The method according to any one of claims 1 to 4, wherein the determining the position of the target data in the visualization view according to the trajectory coordinate axis and the target data comprises:

In response to the combination relationship of the coordinate system being an absolute combination relationship, the angle of the ordinate axis in the coordinate system relative to the canvas is obtained according to the first angle and the offset angle of the coordinate system, and the absolute combination relationship is obtained. Including that the ordinate axis and the canvas are kept at the first angle, and the canvas is an area for displaying the visual view in the construction interface;

The position of the target data in the visualization view is determined according to the angle of the ordinate axis relative to the canvas.
The method according to any one of claims 1 to 4, wherein the determining the position of the target data in the visualization view according to the trajectory coordinate axis and the target data comprises:

In response to the combination relationship of the coordinate system being a relative combination relationship, obtain the relative relationship of the ordinate axis in the coordinate system to the canvas according to the second angle, the offset angle of the coordinate system, and the tangent direction of the abscissa axis The angle of the relative type combination includes that the ordinate axis and the abscissa axis are kept at the second angle, and the canvas is an area used to display the visual view in the construction interface;

The position of the target data in the visualization view is determined according to the angle of the ordinate axis relative to the canvas.
The method according to any one of claims 1 to 6, wherein the providing the visual view comprises:

A construction interface is provided, and the construction interface includes the visual view and a coordinate system setting area, where the coordinate system setting area is used for a user to set parameters of the coordinate system.
The method according to claim 7, wherein before the receiving the construction request, the method further comprises:

In response to a coordinate axis setting instruction, the trajectory coordinate axis is determined according to 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.
The method according to claim 8, wherein the coordinate system setting area includes a trajectory drawing area, the trajectory drawing area is used for a user to draw the shape of the trajectory coordinate axis, and the trajectory data is included in the The position coordinates of the trajectory points in the trajectory drawn in the above trajectory drawing area.
The method according to claim 8, wherein the coordinate system setting area includes trajectory data options, and the trajectory data includes attributes of the target data input through the trajectory data options.
The method according to any one of claims 7 to 10, wherein the coordinate system setting area includes a coordinate axis relationship option, and before the receiving the construction request, the method further comprises:

In response to the coordinate axis relationship setting instruction, the coordinate axis combination relationship selected through the coordinate axis relationship option is determined as the coordinate axis combination relationship of the coordinate system.
The method according to any one of claims 7 to 11, wherein the coordinate system setting area includes a coordinate axis included angle control, and before the receiving the construction request, the method further comprises:

In response to the coordinate axis angle setting instruction, in the case that the coordinate axis combination relationship is an absolute combination relationship, the first angle input through the coordinate axis angle control is determined as the vertical axis in the coordinate system. The angle that the coordinate axis maintains with the canvas, which is the area in the construction interface for displaying the visual view; or,

In response to the coordinate axis angle setting instruction, in the case that the coordinate axis combination relationship is a relative type combination relationship, the second angle input through the coordinate axis angle control is determined as the vertical axis in the coordinate system. The angle maintained by the coordinate axis and the abscissa axis, and the canvas is an area used to display the visual view in the construction interface.
The method according to any one of claims 7 to 12, wherein the construction interface further comprises a code area, and the code area is used to display the first code for generating the visual view.
The method of claim 13, wherein the method further comprises:

The first code in the code region is output to a target location in response to a code export instruction.
The method according to claim 13 or 14, wherein the method further comprises:

The visualization is adjusted by running the second code entered in the code area in response to a code running instruction.
The method according to any one of claims 13 to 15, wherein the method further comprises:

In response to an attribute setting operation on the visual view triggered on the construction interface, acquiring a third code corresponding to the attribute setting operation;

The third code is added to the code area in the build interface.
The method according to any one of claims 1 to 16, wherein the providing the visual view comprises:

sending the content of the visualization to the originator of the build request; or,

The visualization is displayed in the build interface.
An apparatus for constructing a visual view, characterized in that the apparatus for constructing a visual view comprises:

The communication module is used to receive a construction request, the construction request indicates that a visual view of the target data is constructed based on a set coordinate system, the coordinate axis of the coordinate system includes a trajectory coordinate axis, and the trajectory coordinate axis refers to the shape of a trajectory. Axis;

A visual grammar module for determining the position of the target data in the visual view according to the trajectory coordinate axis and the target data;

The generation module of the interactive construction interface is used to obtain a visual view of the target data according to the determined position, the visual view includes a visual element used to represent the target data, and the visual element is in the visual view. in said determined location;

A communication module for providing the visual view.
The apparatus for constructing a visual view according to claim 18, wherein the shape of the trajectory coordinate axis is a trajectory input by the user received by the communication module, and the trajectory coordinate axis has a plurality of points with different curvatures.
The apparatus for constructing a visual view according to claim 18 or 19, wherein the communication module is configured to receive the input track in any one of the following ways:

receive the trajectory drawn in the build interface; or,

The position coordinates of a plurality of points on the trajectory are input in the construction interface.
The apparatus for constructing a visual view according to claim 20, wherein the visual syntax module is configured to respond that the combination relationship of the coordinate system is an absolute combination relationship, according to the first angle and the coordinate system The offset angle is to obtain the angle of the ordinate axis in the coordinate system relative to the canvas, and the absolute combination relationship includes that the ordinate axis and the canvas are kept at the first angle, and the canvas is used in the construction interface to display all The area of the visualization view is determined; the position of the target data in the visualization view is determined according to the angle of the ordinate axis relative to the canvas.
The apparatus for constructing a visual view according to claim 20, wherein the visual syntax module is configured to, in response to the combination relationship of the coordinate system being a relative type combination relationship, according to the second angle, the coordinate system The offset angle and the tangent direction of the abscissa axis are obtained, and the angle of the ordinate axis in the coordinate system relative to the canvas is obtained, and the relative combination relationship includes that the ordinate axis and the abscissa axis are maintained at the second angle, The canvas is an area in the construction interface for displaying the visual view; the position of the target data in the visual view is determined according to the angle of the ordinate axis relative to the canvas.
The apparatus for constructing a visual view according to any one of claims 18 to 22, wherein the communication module is configured to provide a constructing interface generated by the interactive constructing interface generating module, the constructing interface comprising: The visual view and the coordinate system setting area, the coordinate system setting area is used for the user to set the parameters of the coordinate system.
The apparatus for constructing a visual view according to claim 23, wherein the generation module of the interactive construction interface is configured to respond to the coordinate axis setting instruction received by the communication module, according to the coordinate system setting instruction through the coordinate system. The trajectory coordinate axis is determined by the trajectory data input in the fixed area, and the coordinate axis setting instruction instructs to set the trajectory coordinate axis based on the trajectory data.
The apparatus for constructing a visual view according to any one of claims 23 to 24, wherein the coordinate system setting area includes a coordinate axis relationship option, and the generation module of the interactive construction interface is configured to respond to the The coordinate axis relationship setting instruction received by the communication module determines the coordinate axis combination relationship selected through the coordinate axis relationship option as the coordinate axis combination relationship of the coordinate system.
The apparatus for constructing a visual view according to any one of claims 23 to 25, wherein the coordinate system setting area includes a coordinate axis included angle control, and the generation module of the interactive construction interface is used to respond to the In the coordinate axis angle setting instruction received by the communication module, in the case that the coordinate axis combination relationship is an absolute combination relationship, the first angle input through the coordinate axis angle control is determined as the The angle maintained by the ordinate axis in the coordinate system and the canvas; or, in response to the coordinate axis angle setting instruction received by the communication module, in the case that the coordinate axis combination relationship is a relative combination relationship, the The second angle input by the coordinate axis included angle control is determined as the angle maintained by the ordinate axis and the abscissa axis in the coordinate system.
A computing device, characterized in that the computing device includes a processor and a memory, wherein:

computer instructions are stored in the memory;

The processor executes the computer instructions to implement the method of any one of claims 1-17.
A computer-readable storage medium, characterized in that, the storage medium stores at least one instruction, and when the instruction is executed on a computer, the computer executes the method described in any one of claims 1 to 17. method.