WO2022228211A1 - Procédé et appareil de construction d'une vue visuelle - Google Patents

Procédé et appareil de construction d'une vue visuelle Download PDF

Info

Publication number
WO2022228211A1
WO2022228211A1 PCT/CN2022/087681 CN2022087681W WO2022228211A1 WO 2022228211 A1 WO2022228211 A1 WO 2022228211A1 CN 2022087681 W CN2022087681 W CN 2022087681W WO 2022228211 A1 WO2022228211 A1 WO 2022228211A1
Authority
WO
WIPO (PCT)
Prior art keywords
axis
trajectory
coordinate
coordinate axis
coordinate system
Prior art date
Application number
PCT/CN2022/087681
Other languages
English (en)
Chinese (zh)
Inventor
黄兆嵩
丁治宇
Original Assignee
华为云计算技术有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 华为云计算技术有限公司 filed Critical 华为云计算技术有限公司
Publication of WO2022228211A1 publication Critical patent/WO2022228211A1/fr

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/20—Drawing from basic elements, e.g. lines or circles
    • G06T11/203—Drawing of straight lines or curves
    • G—PHYSICS
    • G01—MEASURING; TESTING
    • G01V—GEOPHYSICS; GRAVITATIONAL MEASUREMENTS; DETECTING MASSES OR OBJECTS; TAGS
    • G01V3/00—Electric or magnetic prospecting or detecting; Measuring magnetic field characteristics of the earth, e.g. declination, deviation
    • G01V3/08—Electric or magnetic prospecting or detecting; Measuring magnetic field characteristics of the earth, e.g. declination, deviation operating with magnetic or electric fields produced or modified by objects or geological structures or by detecting devices
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/29—Geographical information databases
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/001—Texturing; Colouring; Generation of texture or colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/20—Drawing from basic elements, e.g. lines or circles

Definitions

  • the present application relates to the field of computer technologies, and in particular, to a method and apparatus for constructing a visualization view.
  • 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.
  • 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.
  • 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 are provided.
  • the user is supported to input a curved trajectory as the coordinate axis.
  • 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.
  • 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.
  • the case where the user enters a vertical coordinate system is supported.
  • 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.
  • 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.
  • 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.
  • 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
  • the relative type combination relationship includes The coordinate axis and the abscissa axis are maintained at a set second angle
  • the canvas is an area for displaying the visual view in the construction interface.
  • 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.
  • 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.
  • 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.
  • the coordinate axis combination relationship in the coordinate system is a relative type combination relationship
  • 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
  • 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.
  • the relative coordinate axis can keep the Y axis and the X axis at a certain angle.
  • 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.
  • the visualization is provided through a construction interface for constructing the visualization of the target data.
  • a construction interface for constructing the visualization of the target data.
  • a building interface is provided, which includes a visual view.
  • 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.
  • 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.
  • the method before receiving the construction request, 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.
  • 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.
  • 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.
  • the coordinate system setting area includes trajectory data options
  • the trajectory data includes attributes of the target data entered through the trajectory data options.
  • the trajectory data given by the data is more controllable and accurate than the shape drawn directly.
  • 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 .
  • the user is supported to customize the coordinate axis relationship in the coordinate system by triggering interactive operations through the interface.
  • the coordinate system setting area includes a coordinate axis relationship option.
  • 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.
  • a user is supported to trigger an interactive operation through an interface to customize the angle of the coordinate axis in the coordinate system.
  • the coordinate system setting area includes a coordinate axis angle control
  • 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.
  • 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.
  • the build interface includes a visual view and a code area.
  • the code area in the construction interface is used to display the first code for generating the visual view.
  • 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 method further includes: in response to the code export instruction, outputting the first code in the code region to the target location.
  • 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.
  • 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.
  • 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.
  • the constructed visualization can be provided to the user in a number of ways.
  • the cloud device 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.
  • the terminal device displays the visual view in the construction interface.
  • an apparatus for constructing a visual view in a second aspect, 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.
  • 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.
  • 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.).
  • 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.
  • the computing device further includes a network interface for sending the constructed visualization over the network.
  • the computing device further includes a screen for displaying the constructed visualization.
  • a (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).
  • a computer program product in a fifth aspect, 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.
  • 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.
  • a chip 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.
  • a 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.
  • the computing device cluster is a cloud computing system (including multiple cloud computing devices, such as servers).
  • 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.).
  • FIG. 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;
  • FIG. 3 is a data news visualization view provided by an embodiment of the present application.
  • FIG. 4 is a schematic diagram of constructing a 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.
  • FIG. 6 is a schematic diagram of an application scenario provided by an embodiment of the present application.
  • FIG. 7 is a flowchart of a method for constructing a visual view provided by an embodiment of the present application.
  • FIG. 8 is a schematic diagram of a coordinate axis combination relationship provided by an embodiment of the present application.
  • FIG. 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.
  • FIG. 11 is a schematic diagram of a construction interface of a visual view provided by an embodiment of the present application.
  • FIG. 12 is a schematic diagram of an interface for constructing a visual view provided by an embodiment of the present application.
  • FIG. 13 is a schematic diagram of an interface for constructing a visual view provided by an embodiment of the present application.
  • FIG. 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.
  • 604-Attribute view also called parameter configuration view
  • 605-Construct result display area also called visualization effect display area
  • 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.
  • 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.
  • a visual channel refers to the visual attributes that visual elements use to convey information.
  • visual channels include, without limitation, position, size, color, shape, texture, etc.
  • 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.
  • the trajectory coordinate axis refers to the coordinate axis whose shape is a trajectory.
  • 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.
  • 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.
  • 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.
  • the layout of visual elements in a view is often domain-specific to deepen the theme and engage the audience.
  • 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.
  • the use of track axes helps to build visualizations more quickly.
  • 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. .
  • 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.
  • Scenario 3 Visualization of high-dimensional data.
  • 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.
  • 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.
  • trajectory coordinate axis 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. .
  • the trajectory data is data for setting the trajectory coordinate axis.
  • Trajectory data includes the location coordinates of a series of points.
  • 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.
  • a trajectory coordinate axis shown in (b) of FIG. 1 is set.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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. .
  • FIG. 6 is a schematic diagram of an application scenario provided by an embodiment of the present application.
  • 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.
  • the terminal 10 is used for receiving the user's operation and displaying the visual chart to the user.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • the server 11 is used to provide the construction service of the visualization view.
  • 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.
  • 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.
  • the terminal 10 is deployed in the Internet.
  • the terminal 10 and the server 11 interact to implement the following method embodiments.
  • 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.
  • 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.
  • 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
  • the server 11 carries the constructed visualization view in an HTML file and returns it to the terminal 10 .
  • 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.
  • the terminal 10 locally executes the following method embodiments.
  • 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.
  • 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.
  • 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.
  • 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.
  • positions such as the position on the coordinate axis and the position in the coordinate system.
  • first position the position on the coordinate axis and the position in the coordinate system.
  • second position the position in the coordinate system.
  • 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.
  • first angle "second angle”
  • 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.
  • 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.
  • 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.
  • the X axis of the coordinate system is the trajectory coordinate axis
  • the Y axis is the linear coordinate axis.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • the above-mentioned first position is specifically determined according to the ratio of the data value to the definition domain.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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).
  • the calculation process according to the trajectory coordinate axis and the data includes the following steps (1) to (3).
  • 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.
  • 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.
  • 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.
  • the coordinate system position is specifically determined according to a preset coordinate axis combination relationship.
  • 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.
  • the coordinate axes of the two-dimensional coordinate system include an abscissa axis and an ordinate axis
  • the combination relationship of the coordinate axes of the two-dimensional coordinate system is the relationship between the abscissa axis and the ordinate axis.
  • 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).
  • FIG. 8 (a) in FIG. 8 is a schematic diagram of 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.
  • 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.
  • 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.
  • 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.
  • FIG. 8 (b) in FIG. 8 is a schematic diagram of a relative 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.
  • 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 .
  • this relative coordinate axis can reduce the complexity of realizing such a visualization view.
  • 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.
  • 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.
  • the above-mentioned definition information is generated based on codes input by a user through a programming language.
  • the above-mentioned definition information is a declarative code for visual coding.
  • the computing device 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.
  • 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.
  • the computing device 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.
  • 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.
  • 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.
  • 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.
  • the visual view is provided to the user through a file, an interface other than the build interface, and so on.
  • the computing device sends the content of the visualization to the originator of the build request.
  • 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.
  • HTTP Hyper Text Transfer Protocol
  • the computing device obtains the visual view, it encapsulates the content of the visual view.
  • HTML Hyper Text Markup Language
  • the HTML file is sent to the terminal 10 through an HTTP response.
  • 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.
  • 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.
  • an interactive construction interface supporting a custom coordinate system 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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 (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 (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.
  • 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 .
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • the properties view 604 also provides a component 6043 for entering the rotation angle of the chart.
  • the user inputs an angle of 0 degrees to the component 6043 as the rotation angle of the chart in the custom coordinate system.
  • the properties view 604 also provides a component 6044 for entering a chart name.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • the ordinate of the trajectory data is set as the ordinate of the trajectory data.
  • the trajectory data given by the data is more controllable and accurate than the shape drawn directly.
  • 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 .
  • 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 .
  • 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.
  • 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.
  • 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.
  • 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.
  • 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 .
  • the visual view 6051 drawn by the drawing module 503 specifically includes a group of rectangular icons 60511 .
  • the construction result display area 605 includes an export control 6052.
  • the computing device 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.
  • the code area 606 is used to display the code for generating the visual view.
  • 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.
  • 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.
  • the computing device executes the code entered in the code area 606 in response to the code execution instruction.
  • 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.
  • 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.
  • the computing device presents program code for generating the visualization in the build interface.
  • the construction interface 60 includes a code area 606 for displaying the first code for generating the visual view 6051 .
  • 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.
  • 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.
  • 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.
  • 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.
  • the first code is the code entered in the code area 606 in the construction interface 60 .
  • the above-described build interface supports the ability to export the generated code of the visualization.
  • 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.
  • the above-described build interface supports the function of generating code for inputting the visualization.
  • 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.
  • the code running instruction instructs to run the code input in the construction interface.
  • 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.
  • 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 .
  • 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 .
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • this embodiment of the present application also provides a trajectory coordinate axis module 7212 to support the user to construct a custom coordinate axis .
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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]
  • the width of the value range of the quadratic function coordinate axis is set.
  • the height of the value range of the quadratic function coordinate axis to 0.8 times the height of the canvas.
  • 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.
  • 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].
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • the embodiment of the present application maps the encapsulated data to the calculation process of the position in the coordinate system.
  • 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.
  • the combined angle a in the following formula (1) is an example of the first angle in the method shown in FIG. 7
  • the combined angle a in the following formula (2) is an example of the first angle in the method shown in FIG. 7 .
  • Step S1 calculates the coordinate position (x 1 , y 1 ) of the data on the X-axis.
  • Step S2 calculates the coordinate position (x 2 , y 2 ) 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.
  • the coordinate axis combination type is absolute type
  • the following formula (1) is used to calculate the direction of the Y axis.
  • the coordinate axis combination type is the relative type
  • the following formula (2) is used to calculate the direction of the Y axis.
  • 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.
  • 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.
  • the declarative code for visual coding is as follows.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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 .
  • 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.
  • 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.
  • 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.
  • 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.
  • 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 .
  • visual elements eg, rectangle, circle
  • this embodiment provides three different interactive ways to help users declare visual codes.
  • Interaction mode 1 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.
  • the value input by the user is used as the visual channel.
  • 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.
  • 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
  • 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.
  • the user 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.
  • 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.
  • the user drags the longitude and latitude fields in the data to the track data option on the X-axis.
  • 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.
  • 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 .
  • 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.
  • 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
  • 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.
  • a custom coordinate system 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.
  • 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%.
  • 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.
  • the apparatus 900 for constructing the visual view shown in FIG. 16 is the terminal 10 or the server 11 in FIG. 6 .
  • the apparatus 900 for constructing a visual view shown in FIG. 16 is a computing device in the method flow shown in FIG. 7 .
  • 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.
  • the division of the above-mentioned units is only a logical function division.
  • 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.
  • 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.
  • the above-mentioned units in FIG. 16 are respectively implemented by different hardware in the computing device.
  • 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 .
  • processor 801 for example, other cores in a multi-core processor
  • FPGA field-programmable gate array
  • programmable device such as a coprocessor
  • 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.
  • the computing device 800 shown in FIG. 17 is the terminal 10 or the server 11 in FIG. 6 .
  • the computing device 800 shown in FIG. 17 is the computing device in the method flow shown in FIG. 7 .
  • 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.
  • 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.
  • ROM read-only memory
  • RAM random access memory
  • 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.
  • the memory 802 exists independently and is connected to the processor 801 through an internal connection 804 .
  • 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.
  • processor 801 includes one or more CPUs, such as CPU0 and CPU1 shown in FIG. 17 .
  • computing device 800 optionally includes multiple processors, such as processor 801 and processor 805 shown in FIG. 17 .
  • processors are, 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).
  • 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.
  • the internal connection 804 is a single board or bus.
  • the internal connection 804 is divided into an address bus, a data bus, a control bus, and the like.
  • computing device 800 also includes an input-output interface 806 .
  • Input and output interface 806 is connected to internal connection 804 .
  • 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.
  • 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.
  • 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.
  • 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.
  • A refers to B, which means that A is the same as B or A is a simple variation of B.
  • 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.
  • 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.
  • the meaning of "at least one” means one or more, and the meaning of "plurality” means two or more.
  • 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.
  • software 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.

Landscapes

  • Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Theoretical Computer Science (AREA)
  • Remote Sensing (AREA)
  • Databases & Information Systems (AREA)
  • Life Sciences & Earth Sciences (AREA)
  • Electromagnetism (AREA)
  • General Engineering & Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Environmental & Geological Engineering (AREA)
  • Geology (AREA)
  • General Life Sciences & Earth Sciences (AREA)
  • Geophysics (AREA)
  • Processing Or Creating Images (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

La présente demande se rapporte au domaine technique des ordinateurs et concerne un procédé et un appareil de construction d'une vue visuelle. La présente demande concerne un procédé de construction d'une vue visuelle à l'aide d'un système de coordonnées ayant un axe de coordonnées de trajectoire en tant que base. L'axe de coordonnées de trajectoire aide un utilisateur à personnaliser la forme d'un axe de coordonnées par le dessin ou d'autres modes. En calculant automatiquement la position des données à visualiser dans un système de coordonnées sur la base d'un axe de coordonnées de trajectoire, un processus de développement de calcul de disposition complexe est encapsulé, et des opérations compliquées pour qu'un utilisateur calcule manuellement la position spécifique d'un élément pendant la construction d'une vue visuelle à l'aide d'un système de coordonnées rectangulaires sont évitées. Par conséquent, le coût d'apprentissage d'un utilisateur est réduit, et l'efficacité de construction d'une vue visuelle complexe est améliorée.
PCT/CN2022/087681 2021-04-26 2022-04-19 Procédé et appareil de construction d'une vue visuelle WO2022228211A1 (fr)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202110455318.9 2021-04-26
CN202110455318.9A CN115249284A (zh) 2021-04-26 2021-04-26 可视化视图的构建方法及装置

Publications (1)

Publication Number Publication Date
WO2022228211A1 true WO2022228211A1 (fr) 2022-11-03

Family

ID=83697634

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2022/087681 WO2022228211A1 (fr) 2021-04-26 2022-04-19 Procédé et appareil de construction d'une vue visuelle

Country Status (2)

Country Link
CN (1) CN115249284A (fr)
WO (1) WO2022228211A1 (fr)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117215528A (zh) * 2023-08-02 2023-12-12 南京国电南自维美德自动化有限公司 一种动态图元坐标生成方法及系统

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20160174940A1 (en) * 2014-12-19 2016-06-23 General Electric Company Method and apparatus for animate visualization of static 3-d data
CN107038198A (zh) * 2016-12-08 2017-08-11 阿里巴巴集团控股有限公司 数据的可视化处理方法及装置
CN109087553A (zh) * 2018-08-23 2018-12-25 广东智媒云图科技股份有限公司 一种临摹绘画方法
CN111311918A (zh) * 2020-05-12 2020-06-19 南京云析科技有限公司 一种基于视觉分析的交通管理方法及装置
CN112578462A (zh) * 2020-12-11 2021-03-30 北京卫星环境工程研究所 一种基于梯度磁场的探测结果实时可视化方法

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20160174940A1 (en) * 2014-12-19 2016-06-23 General Electric Company Method and apparatus for animate visualization of static 3-d data
CN107038198A (zh) * 2016-12-08 2017-08-11 阿里巴巴集团控股有限公司 数据的可视化处理方法及装置
CN109087553A (zh) * 2018-08-23 2018-12-25 广东智媒云图科技股份有限公司 一种临摹绘画方法
CN111311918A (zh) * 2020-05-12 2020-06-19 南京云析科技有限公司 一种基于视觉分析的交通管理方法及装置
CN112578462A (zh) * 2020-12-11 2021-03-30 北京卫星环境工程研究所 一种基于梯度磁场的探测结果实时可视化方法

Also Published As

Publication number Publication date
CN115249284A (zh) 2022-10-28

Similar Documents

Publication Publication Date Title
US10254848B2 (en) Cross-platform data visualizations using common descriptions
US10346013B2 (en) Manipulating graphical objects
US11182513B2 (en) Generating technical drawings from building information models
WO2019109485A1 (fr) Procédé, appareil et dispositif de création d'un graphique basé sur un outil echarts, et support
US11087503B2 (en) Interactive color palette interface for digital painting
US8825459B2 (en) Multi-modal manipulation of a geometric model
WO1995012161A1 (fr) Systeme de logiciel integre pour programme d'edition graphique
CN112540763A (zh) 前端页面生成方法、装置、平台设备及存储介质
US20200273226A1 (en) Interactive Layout-Aware Construction of Bespoke Charts
KR101798149B1 (ko) 데이터 테이블 중 일부 영역 선택을 통한 차트 시각화 방법
US11113855B2 (en) Expression interpretation engine for computer map visualizations
US20140184592A1 (en) Creating, editing, and querying parametric models, e.g., using nested bounding volumes
CN114675925B (zh) 组态图像处理方法、装置、计算机设备、存储介质
US20190258396A1 (en) Layout design with adaptive areas
CN110832456B (zh) 为图形界面创建默认布局约束
US20230185984A1 (en) Generating Technical Drawings From Building Information Models
WO2022228211A1 (fr) Procédé et appareil de construction d'une vue visuelle
US20140325404A1 (en) Generating Screen Data
US11086498B2 (en) Server-side chart layout for interactive web application charts
JP2019185687A (ja) プログラム、情報処理方法及び情報端末
CN109887058A (zh) 跨平台绘图系统
WO2022228209A1 (fr) Procédé et appareil pour construire une vue visuelle
AU2013299742B2 (en) Manipulating graphical objects
CN114461324B (zh) 绘图工具、基于绘图工具的图形生成方法、装置、设备及介质
US10586361B2 (en) Mesh art positioning techniques as part of digital content creation

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 22794682

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 22794682

Country of ref document: EP

Kind code of ref document: A1