WO2022228209A1 - 可视化视图的构建方法及装置 - Google Patents

可视化视图的构建方法及装置 Download PDF

Info

Publication number
WO2022228209A1
WO2022228209A1 PCT/CN2022/087676 CN2022087676W WO2022228209A1 WO 2022228209 A1 WO2022228209 A1 WO 2022228209A1 CN 2022087676 W CN2022087676 W CN 2022087676W WO 2022228209 A1 WO2022228209 A1 WO 2022228209A1
Authority
WO
WIPO (PCT)
Prior art keywords
chart
view
code
layout
visual
Prior art date
Application number
PCT/CN2022/087676
Other languages
English (en)
French (fr)
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 WO2022228209A1 publication Critical patent/WO2022228209A1/zh

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/206—Drawing of charts or graphs
    • 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/26—Visual data mining; Browsing structured data
    • 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
    • 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

Definitions

  • the present application relates to the field of computer technologies, and in particular, to a method and apparatus for constructing a visualization view.
  • Nested charts are charts in which different charts are nested within each other.
  • the form of nested charts is that a large chart contains at least one small chart of the same or related type, and these small charts are arranged and displayed according to certain layout parameters in the large chart.
  • a calendar chart is a typical nested chart, where a calendar chart representing a year contains 12 second charts for 12 months, each second chart showing data for each day of the month.
  • a developer In order to construct a visual view of a nested chart, in the related art, a developer needs to manually calculate parameters related to layout parameters such as position and rotation angle for each small chart in the nested chart. In addition, the developer needs to write codes for configuring parameters related to the calculated layout parameters for each small chart, and input the written codes on the computer. The computer draws, renders, etc. according to the code written by the developer, thereby displaying the nested chart.
  • the above method relies on a huge amount of code, resulting in low efficiency.
  • the nested chart contains many small charts, and developers need to calculate and configure the layout parameters of many small charts separately, resulting in a cumbersome and complicated process. , the problem of low efficiency is even more serious.
  • Embodiments of the present application provide a method and apparatus for constructing a visualization view, which help to improve the efficiency of visualization of complex nested diagrams.
  • the technical solution is as follows.
  • a method for constructing a visual view comprising: receiving a construction request, the construction request instructing to construct a visual view of a first chart, the icon bound to the first chart includes a second chart; and according to the first chart
  • the coordinate axis property of obtains the first layout parameter of the second chart; according to the first layout parameter, obtains the visual view of the first chart, the visual view includes the first chart and the second chart, and the second chart in the visual view is laid out according to the first layout Arrangement of parameters; provides a visual view.
  • the child chart when constructing the visual view of the nested chart, the child chart is regarded as the icon bound to the parent chart, and the coordinate axis property of the parent chart is used to control the layout of the child chart, so as to logically disassemble the complex chart. It is divided into nested combinations of simple charts, which makes the logical structure of complex charts clear. Especially, in the scenario where the parent chart contains a large number of sub-charts, using the axis properties of the parent chart helps to obtain the layout of all the sub-charts in batches without the need for developers to individually calculate and configure each sub-chart, thus significantly The visualization construction process is simplified, the visualization construction efficiency is improved, and the usage threshold is lowered.
  • further tuning is supported on the basis of the position corresponding to the coordinate axis attribute of the parent chart, so as to obtain a more accurate position of the sub-graph, that is, the above-mentioned first layout parameter corresponds to the coordinate axis attribute
  • the layout parameters are adjusted based on the benchmark. Specifically, in the process of obtaining the first layout parameter, the reference layout parameter of the second graph is obtained according to the coordinate axis attribute of the first graph; the reference layout parameter is adjusted to obtain the first layout parameter.
  • How to adjust based on the reference position defined by the coordinate axis property of the parent chart includes multiple implementations. The following is an example of two implementations.
  • Implementation mode 1 Adjust the reference layout parameters according to the position coordinates, displacement or angle of the second chart to obtain the first layout parameters.
  • the user is allowed to adjust the reference layout by changing the properties of the icon (the second chart, that is, the sub-chart) whose type is a chart, which helps the layout of each sub-chart to be more accurate.
  • Implementation Mode 2 Adjust the reference layout parameters according to the force guiding attribute of the first graph to obtain the first layout parameters.
  • the reference position calculated according to the coordinate axis attribute may cause the sub-charts to overlap.
  • the second method is to additionally set the force-guided layout property, so that each sub-chart can be tangent, so as to achieve the effect that different sub-charts do not overlap each other.
  • a calculation rule for adjusting the position is preset, and for a more complex adjustment scene, a preset calculation rule is provided to the user to assist the user to adjust the position.
  • the position of the icon in the sub-diagram is obtained according to the position of the icon in the sub-diagram and the position of the sub-diagram in the parent diagram.
  • the icon bound to the second chart includes a third chart
  • obtaining a visual view of the first chart according to the first layout parameter includes: according to the position of the third chart in the second chart and the position of the second chart in the first chart to get the position of the third chart in the visualization.
  • the layout of the lower-level chart can be accurately calculated, thereby supporting the visualization of complex nested charts.
  • Implementation A Modify the layout of the child chart by modifying the coordinate axis properties of the parent chart. For example, in response to the first update instruction, update the coordinate axis attribute of the first chart; obtain the second layout parameter of the second chart according to the updated coordinate axis attribute of the first chart; The layout of the second chart is updated.
  • the user can modify the layout of each sub-chart in batches by modifying the coordinate axis properties of the parent chart, avoiding the tedious operation of modifying the layout for each sub-chart separately, and significantly improving the efficiency of layout modification.
  • Implementation B Modify the layout of the sub-chart by modifying the properties of the sub-chart itself. For example, in response to the second update instruction, the updated position coordinates of the second chart are obtained; the visualization view is updated according to the updated position coordinates of the second chart.
  • the user is allowed to modify the position of the sub-chart itself to adjust the layout of the sub-chart, thereby improving the flexibility of layout adjustment and helping the layout of the sub-chart to be more accurate.
  • Implementation C Modify the chart layout by exchanging the parent-child relationship between the parent chart and the child chart.
  • the third layout parameter is obtained according to the coordinate axis attribute of the second chart, and the relationship exchange instruction instructs the parent-child relationship of the first chart and the second chart to be exchanged; according to the third layout parameter, the visualization The view is updated, and the first chart in the updated visual view is arranged according to the third layout parameter.
  • the visualization is provided through a construction interface for constructing the visualization of the diagram.
  • a construction interface for constructing the visualization of the diagram.
  • a building interface is provided, which includes a visual view.
  • 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 construction interface further includes a hierarchy view, where the hierarchy view is used to display a hierarchy diagram of the first diagram, and the second diagram in the hierarchy diagram is located at a lower level of the first diagram.
  • the logical structure of the nested chart is intuitively presented to the user, helping the user to sort out the logic of constructing the visual view, thereby reducing the learning cost for the user to construct the visual view.
  • the above-mentioned construction interface supports the function of selectively displaying and hiding other non-operated charts. For example, in response to an instruction to hide the first chart, a visual view of the first chart in a hidden state is provided; or, in response to an instruction to hide the second chart, a visual view of the second chart in a hidden state is provided.
  • this operation conforms to the logical idea of chart encapsulation, which avoids visual confusion and wrong operations caused by displaying multiple charts in the interactive area at the same time.
  • 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 an application scenario provided by an embodiment of the present application.
  • FIG. 2 is a flowchart of a method for constructing a visual view provided by an embodiment of the present application
  • FIG. 3 is a visual view of a nested chart provided by an embodiment of the present application.
  • FIG. 4 is a schematic diagram of a logical hierarchical structure for constructing a nested chart provided by an embodiment of the present application
  • FIG. 5 is a logical architecture diagram of a construction interface of a visualization component provided by an embodiment of the present application.
  • FIG. 6 is a schematic diagram of an interface for constructing a visual view provided by an embodiment of the present application.
  • FIG. 7 is a schematic diagram of selective display and concealment of a chart provided by an embodiment of the present application.
  • FIG. 8 is a schematic diagram of an interface for constructing a visual view provided by an embodiment of the present application.
  • FIG. 10 is a graph nesting effect diagram after adding sub-graphs 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 structural diagram of an apparatus for constructing a visualization view provided by an embodiment of the present application.
  • FIG. 13 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.
  • Icons are graphics used to display data. Icons are also sometimes called visual elements, graphic symbols, visual symbols, or interface elements. From the perspective of the shape of the icons, the icons include, without limitation, rectangles, circles, arcs, curves, text, paths, regions, triangles, stars, and the like. From the perspective of the attributes of the icon, various attributes such as the position of the icon (such as x-coordinate and y-coordinate), size, color, shape, texture, line width, radius, length, and width can be used to represent data. For example, the area of a circle (icon) is associated with the number of crowds (attribute of data), and the larger the area of the circle, the greater the number of crowds. Different types of icons may have the same properties or may have different properties. For example, circular icons have a radius property, and rectangular icons have a width property.
  • the visual channel refers to the visual attribute used by the icon to convey information.
  • visual channels include, without limitation, position, size, color, shape, texture, etc.
  • a chart is a graph that uses icons to represent data attributes.
  • the chart contains one or more icons. Typical charts are bar charts, line charts, pie charts, etc.
  • a chart is a visualization element with a coordinate axis attribute.
  • the chart's axis properties are used to control the layout of the icons contained in the chart.
  • the axis properties of the chart are used to control the layout of each icon in the chart.
  • 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.
  • the parent-child relationship between diagrams is a logical relationship, sometimes called a nested relationship or a subordinate relationship.
  • chart A contains chart B
  • chart A and chart B have a parent-child relationship
  • chart A is the parent chart of chart B
  • chart B is the child chart of chart A.
  • a chart type icon is an icon of type chart.
  • a chart type icon can act as a sub-chart of another chart.
  • the content of the chart type icon is the same as that of the chart, and the chart type icon contains the axis and the icon.
  • the chart type icon continues to nest icon charts, resulting in a deeper nested structure.
  • Layout parameters are parameters used to control the layout in the visualization.
  • Layout parameters include, but are not limited to, position, angle, spacing, offset, normal vector direction, tangent direction, and the like.
  • the layout parameters are the X coordinate and the Y coordinate.
  • the layout parameters of the icons in the chart are controlled based on the property of the coordinate axis of the chart.
  • the coordinate axis attribute of the chart has a mapping relationship with the layout parameters of the icon in the chart. After the coordinate axis attribute of the chart is obtained, the layout parameter of the icon in the chart can be determined based on the mapping relationship.
  • Data visualization extracts the data information contained in the data, displays the data information value in the visual channels such as graphics, size, color, etc., and expresses the original incomprehensible data content in an intuitive and easy-to-understand way, thereby improving user analysis. and the efficiency of understanding data.
  • Data visualization technology has become more and more widely used in finance, big data, smart city and other fields.
  • the style of the small chart is not necessarily a regular visual chart (such as line chart, line chart, pie chart).
  • a visualization can be constructed in the style of a calendar chart when displaying information about a user's working hours over a three-year period.
  • Each row of the calendar graph has sub-graphs for 12 months.
  • Each sub-graph uses layout, color, and circle radius to show the numerical size of the date, Sunday, and related data.
  • the layout of the small chart can also be very complex.
  • the sub-charts in a visualization may not be evenly distributed.
  • traditional visualization construction methods usually require developers to manually calculate the specific position and rotation angle of each visualization element on the canvas, and perform visual coding and visualization rendering. Concise, readable and extensible. This not only requires developers to have strong programming skills, but also needs to spend a lot of time on numerical calculations, logic construction, and code maintenance, resulting in low visualization development efficiency.
  • Some studies provide a component template construction scheme, through which the user selects a visualization template, enters data, and obtains a visualization view.
  • the embodiments of the present application provide a method for supporting the construction of a visual view of complex nested charts.
  • This method is based on the technical idea of encapsulating the construction process of multi-chart combination, regards the sub-chart as the icon contained in the parent chart, uses the coordinate axis property of the parent chart to control the layout of the sub-chart, and then realizes the construction of the visual view. Since sub-charts are treated as icons contained in parent charts, complex small multiple visualizations can be abstracted into nested combinations of multiple simple charts. From the perspective of the parent chart, the sub-chart is a child element inside the parent chart.
  • the sub-diagram can process the sub-diagram according to the rules of the icon, and there is no need to set an additional set of logic for the sub-diagram. It can be seen that the embodiment of the present application simplifies, clarifies, and clarifies the visualization construction logic of complex charts, reduces the implementation complexity, significantly simplifies the visualization construction process, improves the visualization construction efficiency, and reduces the learning and use cost of users. .
  • FIG. 1 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. 1 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 (eg, an input box, a selection box), and the user triggers an input operation on the input component 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 terminal 10 and the server 11 interact with each other shown in FIG. 1 is optional.
  • the terminal 10 locally executes the following method embodiments.
  • FIG. 2 is a flowchart of a method for constructing a visualization view provided by an embodiment of the present application.
  • the method shown in FIG. 2 includes the following steps S201 to S204.
  • the network deployment scenario on which the method shown in FIG. 2 is based is optionally as shown in FIG. 1 above.
  • the computing device in the method shown in FIG. 2 is the server 11 or the terminal 10 in FIG. 1 .
  • the method shown in FIG. 2 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.
  • the method shown in FIG. 2 is executed by the server 11 and the terminal 10 in cooperation.
  • the server 11 undertakes the main processing work, and the terminal 10 undertakes the secondary processing work; in other embodiments, the server 11 undertakes the secondary processing work, and the terminal 10 undertakes the main processing work; or, the server 11 or the terminal 10 undertakes the main processing work To undertake the processing work separately.
  • the terminal 10 acts as the initiator of the visualization view construction request, and requests the server 11 to construct the visualization view of the chart; the server 11 acts as the responder of the visualization view request, constructs the visualization view and returns the constructed visualization view to the Terminal 10, the terminal 10 displays a visual view.
  • the method shown in FIG. 2 involves building a visualization that includes multiple charts.
  • “first graph”, “second graph”, and “third graph” are used to distinguish and describe a plurality of different graphs.
  • the method shown in FIG. 2 is optionally used to construct a visual view of a graph with more than two levels of nested relationships.
  • the method shown in FIG. 2 focuses on describing the process of constructing a chart with two layers of nested relationship, that is, how to construct a visual view of the two charts as a whole in a scenario where the first chart includes the second chart.
  • the processing method of other charts between different levels may refer to the processing method of the second chart based on the first chart.
  • the icon of the first chart contains the second chart
  • the icon of the second chart contains the third chart.
  • the coordinates of the second chart can be used based on the coordinates of the second chart. Axis properties to lay out the third chart.
  • the method shown in FIG. 2 is optionally used to construct a scene with a parent chart containing two or more child charts.
  • the method shown in FIG. 2 takes how to process one of the sub-diagrams (the second diagram) of the parent diagram as an example to illustrate.
  • the processing method of other sub-charts can refer to the processing method of the second chart.
  • Step S201 the computing device receives a construction request.
  • the build request instructs to build the visualization of the first chart.
  • the build request is triggered by a user's operation on the build interface.
  • the icon bound to the first chart includes the second chart.
  • the first chart and the second chart have a parent-child relationship, the first chart is a parent chart, and the second chart is a child chart.
  • the first chart is the parent chart 40 of FIG. 3 .
  • the second graph is the rectangular icon (sub graph) 403 in FIG. 3 .
  • the first chart is the parent chart 6051 in FIG. 9 .
  • the second graph is sub-graph 60511 in FIG. 9 .
  • Step S202 the computing device acquires the first layout parameter of the second chart according to the coordinate axis attribute of the first chart.
  • the computing device pre-establishes a mapping relationship between coordinate axis attributes and layout parameters.
  • the computing device takes the coordinate axis attribute of the first chart as an input parameter, and performs calculation by using a pre-established mapping relationship, thereby obtaining the first layout parameter.
  • the above-mentioned mapping relationship specifically includes the mapping relationship between the coordinate axis definition domain, the coordinate axis value domain, the data value and the pixel position (layout parameter) in the canvas.
  • the computing device takes the coordinate axis definition domain of the first chart, the coordinate axis value domain of the first chart, and the data bound to the second chart as input parameters, and uses the pre-established mapping relationship to calculate, thereby obtaining The first layout parameter.
  • the pixel position (layout parameter) of the second chart in the canvas is specifically determined according to the ratio of the data value bound to the second chart in the definition domain.
  • the definition domain of the X-coordinate axis of the first chart (parent chart) is set to [0, 2], which means that the user can simply specify the x-coordinate of the chart as three integers 0, 1, and 2.
  • the three charts are evenly distributed; the value range of the X-coordinate axis of the first chart (parent chart) is [0,600], indicating that the pixel position range of the first chart in the X direction of the canvas is [0,600].
  • the pixel position corresponding to the second chart is 0; if the data value bound to the second chart is 1, the pixel position corresponding to the second chart is 300; If the bound data value is 2, the pixel position corresponding to the second chart is 600.
  • further tuning is supported on the basis of the position corresponding to the coordinate axis property of the parent chart, so as to obtain a more accurate position of the sub-chart.
  • the computing device obtains the reference layout parameters of the second chart according to the coordinate axis attributes of the first chart; and adjusts the reference layout parameters to obtain the first layout parameters.
  • the layout process is not only simplified by relying on the coordinate axis, but also not limited to the layout method based on the coordinate axis.
  • the layout process is not only simplified by relying on the coordinate axis, but also not limited to the layout method based on the coordinate axis.
  • a more refined layout can be achieved, thereby improving the visualization construction effect.
  • the complexity of calculating the layout is reduced.
  • how to adjust based on the reference position defined by the coordinate axis attribute of the parent chart includes various implementations.
  • the following is an example of the two implementations, referring to the following implementations 1 and 2.
  • Implementation mode 1 Adjust the reference position by changing the properties of the icon graph (the second graph) itself.
  • the computing device adjusts the reference layout parameters according to the position coordinates, displacement or angle of the second chart to obtain the first layout parameters.
  • the second implementation method is to adjust the reference position through the force guidance property of the chart.
  • the force-directed attribute is a graph layout attribute based on a force-directed algorithm. For example, the user sets the force guiding attribute of the first graph to true (true, indicating that the force guiding attribute is on), and the computing device adjusts the reference layout parameters according to the force guiding attribute of the first graph to obtain the first layout parameter.
  • the reference position calculated according to the coordinate axis attribute may cause the sub-charts to overlap.
  • the second method is to additionally set the force-guided layout property, so that each sub-chart can be tangent, so as to achieve the effect that different sub-charts do not overlap each other.
  • a calculation rule for adjusting the position is preset, and for a more complex adjustment scene, the computing device provides the user with the preset calculation rule to assist the user to adjust the position.
  • Step S203 The computing device acquires a visual view of the first chart according to the first layout parameter.
  • the visual view includes a first chart and a second chart, and the second chart in the visual view is arranged according to the first layout parameter.
  • the first layout parameter is position
  • the second chart in the visualization view is located at the position specified by the first layout parameter.
  • the computing device draws the second chart at the position corresponding to the first layout parameter of the canvas to obtain a visual view.
  • the position of the icon in the sub-diagram is set according to the position of the icon in the sub-diagram and the position of the sub-diagram in the parent diagram, and the solution for an icon in the canvas The global position in as the final position of the icon.
  • the icons bound to the second chart include the third chart (icons in the sub-chart).
  • the computing device may The position of the second chart in the first chart, get the position of the third chart in the visualization view.
  • Step S204 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 this construction interface, the construction results of nested charts can be displayed intuitively in the process of visual construction.
  • 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.
  • the child chart when constructing the visual view of the nested chart, the child chart is regarded as the icon bound to the parent chart, and the coordinate axis property of the parent chart is used to control the layout of the child chart, so that the complex chart can be placed in the Logically split into nested combinations of simple charts, making the logical structure of complex charts clear.
  • using the axis properties of the parent chart helps to obtain the layout of all the sub-charts in batches without the need for developers to individually calculate and configure each sub-chart, thus significantly
  • the visualization construction process is simplified, the visualization construction efficiency is improved, and the usage threshold is lowered.
  • Some embodiments of the present application support a variety of ways to modify the layout of a chart in a visualization.
  • some possible implementation manners for realizing the modification of the chart layout are illustrated by example, please refer to the following implementation manners 1 to 3.
  • first layout parameter “first layout parameter”, “second layout parameter” and “third layout parameter” are used to distinguish and describe a plurality of different layout parameters.
  • first update instruction and “second update instruction” are used to distinguish and describe a plurality of different update instructions.
  • Implementation method 1 Modify the layout of the sub-chart by modifying the axis properties of the parent chart.
  • the axis properties of the parent chart include type, value range, range (domain), etc. These axis properties of the parent chart can be used to modify the layout of the child chart.
  • the computing device updates the coordinate axis attribute of the first chart in response to the first update instruction; the computing device obtains the second layout parameter of the second chart according to the updated coordinate axis attribute of the first chart; according to the second layout parameter , to update the layout of the second chart in the visualization.
  • the first update instruction instructs to update the coordinate axis attribute of the parent chart (the first chart).
  • the first update instruction includes the updated coordinate axis properties of the parent chart (the first chart).
  • the first update instruction is optionally triggered by an operation on the build interface. For example, when the interactive construction method is adopted, the first update instruction is triggered by the property update operation of the coordinate axis of the parent chart. The updated coordinate axis properties of the chart, thereby triggering the first update command. For another example, when the code construction method is adopted, the first update instruction is triggered by inputting the program code in the construction interface for updating the coordinate axis attribute of the parent chart.
  • the second implementation method is to modify the layout of the sub-chart by modifying the properties of the sub-chart itself.
  • the computing device obtains the updated position coordinates of the second chart; and updates the visual view according to the updated position coordinates of the second chart.
  • the second update instruction instructs to update the position coordinates of the sub-graph (the second graph), and the second update instruction includes the updated position coordinates of the sub-graph (the second graph).
  • the third implementation method is to modify the chart layout by exchanging the parent-child relationship between the parent chart and the child chart.
  • the computing device obtains the third layout parameter according to the coordinate axis attribute of the second chart; updates the visual view according to the third layout parameter, and the first chart in the updated visual view is laid out according to the third layout Arrangement of parameters.
  • the relationship exchange instruction instructs to exchange the parent-child relationship between the first chart and the second chart, that is, update the role of the first chart from the parent chart of the second chart to the child chart of the second chart, and change the role of the second chart to the child chart of the second chart.
  • the role is updated from the child chart of the first chart to the parent chart of the first chart.
  • the relational swap instruction is triggered on an operation performed on the build interface.
  • the relationship exchange instruction is triggered by a drag and drop exchange operation on the parent chart (the first chart) and the child chart (the second chart).
  • the user triggers a drag operation in the construction interface to exchange the positional relationship between the parent chart (the first chart) and the child chart (the second chart) in the construction interface, thereby triggering the relationship exchange instruction.
  • the relationship swapping instruction is triggered by program code entered on the construction interface declaring that the roles of the parent chart (the first chart) and the child chart (the second chart) are reversed.
  • the embodiments of the present application provide a more reasonable construction process for declaring nested class diagrams with visual graphics syntax, thereby simplifying the construction process for nested class diagrams.
  • the graphics grammar provided by the embodiments of the present application abstracts a complex small multiple visualization view into a nested combination of multiple simple charts, and helps users to define nested relationships between simple charts.
  • the parent chart can be used to control the layout structure of the child chart. Users can modify the layout structure of the child chart by modifying the properties such as the type, value range, and range of the parent chart’s coordinate axis; while the child chart is used as the parent chart’s "Icons", used to draw specific visual elements, or to further support the layout of lower-level visual views.
  • the graphic grammar provided by the embodiment of the present application abstracts the content of the visual view into four types of elements, namely canvas, chart, coordinate axis, and icon, and defines the overall structure of the visual chart by arranging and combining the four types of elements. Below, these four types of elements are introduced in detail.
  • a canvas is a container bound to an HTML element to hold other elements.
  • the canvas provided by the embodiment of the present application supports canvas (an element in HTML, which is a resolution-dependent bitmap canvas, and can draw any graphics on the canvas, and even load photos), scalable vector graphics (Scalable Vector Graphics, SVG). ), Web Graphics Library (Web Graphics Library, WebGL, a format specified by a 3D drawing protocol) and other formats, allowing users to customize attributes such as width, height, background color, and margin.
  • An abstract visualization chart includes a coordinate system consisting of an X-axis, a Y-axis, and visualization elements consisting of different icons.
  • the chart-bound coordinate system is used to control the layout of the icons contained in the chart.
  • the coordinate system includes an X-axis and a Y-axis.
  • This embodiment provides various types of coordinate axes for the coordinate system.
  • the X coordinate axis or the Y coordinate axis in the coordinate system includes, but is not limited to, a linear coordinate axis, a polar coordinate axis, a circular coordinate axis, an exponential function coordinate axis, a quadratic function coordinate axis, a category coordinate axis, and the like.
  • the type of the coordinate axis in the coordinate system is set by the user; alternatively, the coordinate axis in the coordinate system is the coordinate axis of the default type.
  • Axes in a coordinate system have an axis property.
  • the axis properties include general properties as well as specific properties. Common properties include domain and value domain.
  • the exclusive attribute is the attribute corresponding to the type of the coordinate axis. For example, the exclusive attribute of the polar coordinate axis includes the starting angle.
  • Icons are shaped visual elements used to display data.
  • the icons in the embodiments of the present application include, but are not limited to, 7 types such as rectangles, circles, arcs, curves, characters, paths, and regions.
  • Icons contain one or more visual channels.
  • the visual channels included in the icon include, but are not limited to, color, area, height, width, and the like.
  • the visual channel included in the icon can be bound with the properties of the data, and the properties of the data can be displayed intuitively through the visual channel.
  • the embodiment of the present application designs a visual construction interface for nested charts based on the above-mentioned graphic grammar.
  • the construction interface is based on low-code construction as a technical concept, allowing users to build a complete nested class diagram from scratch through drag-and-drop, selection, and input interaction.
  • the interface includes a code interface and a graphical grammar parser.
  • the code directly input by the user can be parsed by the parser and fed back to the interactive construction process, thereby allowing the user to input the constructed code and conduct secondary development through interaction. In this way, it gets rid of the construction limitation of writing code, uses a more intuitive interactive way to build nested class charts, and visually displays the results of nested class charts and the changes corresponding to user operations during the construction process.
  • FIG. 5 shows the logical architecture of the construction interface of the visualization component.
  • the framework for constructing the interface includes an interaction module 501 , a code module 502 and a drawing module 503 , which are described in detail below.
  • the interaction module 501 provides the user with the ability to drag and drop to define the visual chart structure by establishing the mapping relationship between the components and the graphic elements in the construction interface.
  • the interaction module 501 includes the interaction construction view described below and the property view described below.
  • the code module 502 is used to display the generated code of the chart.
  • This embodiment of the present application predefines a general generated code template based on graphic syntax for each visual element (such as charts, icons, etc.), and the computing device generates corresponding codes according to the user's operation in the interaction module 501 and displays them in the code synchronously.
  • code export and secondary development are facilitated.
  • the code module 502 includes a graphic syntax parser, and the code module 502 can extract the code structure from the generated code through the graphic syntax parser, so as to synchronously feed back the element structure of the interactive construction view.
  • the existence of the graphical syntax parser opens up the channel between the interaction module 501 and the code module 502, and provides the user with the ability to freely use the interactive mode and the code mode to build charts.
  • the drawing module 503 is configured to output the visualization component construction interface provided by the embodiment of the present application.
  • the drawing module 503 is specifically configured to display the actual rendering effect after the generated code of the visual view is executed.
  • the drawing module 503 is linked with the code module 502. When the user modifies the code, the drawing module 503 will redraw and display the chart according to the modified code, so that the modification of the code is synchronously reflected on the chart style of the drawing module in real time, It is convenient for users to adjust chart parameters and nested logic interactively.
  • FIG. 9 is a schematic diagram of an interface 60 for constructing a visualization view provided by an embodiment of the present application.
  • the construction interface 60 includes a data view 601 , an interactive construction view 602 , a hierarchy view 603 , a property view 604 , a construction result display area 605 and a code area 606 .
  • the function of each component in the construction interface 60 and how the user applies each component of the construction interface will be illustrated by way of example.
  • 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.
  • the user imports the urban weather data into the computing device, and the computing device displays the urban weather data in the data view 601 .
  • the urban weather data includes five attributes of date, location, temperature, rainfall, and wind speed.
  • the value of the attribute date in the urban weather data of city A is May 1, and the value of the attribute temperature is 28 degrees.
  • 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 FIG. 9 contains a set of rectangular icons created
  • the interactive construction view 602 in FIG. 11 contains two sets of rectangular icons and a set of circular icons created.
  • 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 hierarchy view 603 is used to display the hierarchy diagram of the first diagram, and the second diagram in the hierarchy diagram is located at the lower level of the first diagram.
  • the construction interface allows the user to drag and drop the subordinate relationships of similar elements to change the structure of the chart.
  • FIG. 6 shows a schematic diagram of exchanging the relationship between parent charts and child charts.
  • the user uses mouse drag in the hierarchical view 603 to swap the positional relationship of the two charts.
  • the computing device receives the user's drag-and-drop exchange operation, and the internal object used to store the chart structure will change accordingly, and then the code module will regenerate the corresponding code, use the original nested chart as the layout of the sub-chart, and fill it with
  • the parent diagram serves as the content, while swapping the parent-child relationship between diagrams. In this way, to a large extent, the user's work of repeatedly modifying the code due to modifying the top-level structure is avoided, and the efficiency of modifying the chart structure is greatly improved.
  • 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.
  • Properties view 604 includes various input components. For example, referring to FIG. 9, the property view 604 includes a component 6041 for inputting a chart name, a component 6042 for inputting an icon type, a component 6043 for inputting X-axis data, and a component 6044 for inputting Y-axis data .
  • properties view 604 in properties view 604, the following input components (a) through (f) are provided for different types of parameters.
  • Component (b) Digital input box: used for inputting digital parameters such as height, width, font size, and line width.
  • 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 computing device when the computing device receives an input operation to the numeric input box or color selection box of the property view 604, it will The type of content is judged. If the content entered into the number input box is a valid number, the format of the entered content will be used as the configuration result; if the content entered into the number input box is not a valid number, the string format will be used; if the content entered into the color selection box If the color is a valid color, the format of the input content is used as the configuration result; if the content input to the color selection box is not a valid color, the string format is used; thus ensuring that the user can freely define the input content.
  • 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 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 to the target location in the form of pictures, files 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 build the chart structure shown in Figure 3, and the user can complete the steps of object creation and parameter configuration by dragging and dropping, which further simplifies the construction process.
  • the above-mentioned construction interface supports the function of selectively displaying and hiding other non-operated charts.
  • the computing device in response to the hiding instruction for the first chart, provides a visual view in which the first chart is in a hidden state; or, in response to the hiding instruction for the second chart, provides the second chart A visualization with the chart hidden.
  • FIG. 7 shows an interface in which the parent chart is hidden and the child chart is displayed, and (b) of FIG. 7 shows that both the parent chart and the child chart are displayed.
  • the interface in the displayed state.
  • the parent chart is not hidden, as shown in (b) in Figure 7, not only the parent chart (coordinate axis, icon), but also the child chart (coordinate axis, icon) will be displayed in the interface.
  • the parent chart is hidden, as shown in (a) of FIG. 7 , the parent chart (coordinate axis, icon) will be hidden in the interface, and the child chart (coordinate axis, icon) will be displayed.
  • this operation conforms to the logical idea of chart encapsulation, which avoids visual confusion and wrong operations caused by displaying multiple charts in the interactive area at the same time.
  • 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.
  • the computing device displays the generated code of the visualization 6051 in the code area 606 while displaying the visualization 6051 in the construction interface 60 . 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 operations on the interface components in the process of constructing the visual view in an interactive way.
  • 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 (not shown in FIG. 9 ) 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.
  • 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 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 6051.
  • 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 606 in the build interface 60 described above contains an input component capable of receiving user input.
  • the user inputs the second code in the code area 606 of the construction interface 60 to trigger the code running instruction.
  • the computing device adjusts the visual view by executing the second code entered in the code area 606 in the construction interface in response to the code running instruction, and provides the adjusted visual view in the construction interface 60 .
  • the code running instruction instructs to run the code input in the construction interface.
  • the code area 606 in the construction interface 60 includes a running control 6061 , and the code running instruction is triggered by an operation on the running control 6061 . 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 in the construction interface.
  • the property setting operation is a property setting operation on the first chart (parent chart), and the third code represents configuring the property of the first chart (parent chart) as a set value.
  • the property setting operation is a property setting operation for the second chart (sub-chart), and the third code represents configuring the property of the second chart (sub-chart) as a set value.
  • 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 parent chart presented below is the first chart in the method shown in FIG. 2 .
  • the sub-diagram introduced below is the second diagram in the method shown in FIG. 2 .
  • the chart icon in the sub-diagram described below is the third chart in the method shown in FIG. 2 .
  • FIG. 3 shows a nested chart provided by this embodiment.
  • Fig. 4 shows the logical hierarchical structure of the chart of Fig. 3 constructed based on the graphics syntax provided by this embodiment.
  • the complex nested chart is disassembled into a combination of multiple charts such as chart 40 and chart 4032 .
  • the coordinate axes of the graph 40 include an X coordinate axis 401 whose category is a linear coordinate axis, and a Y coordinate axis 402 whose category is a linear coordinate axis.
  • Graph 40 is bound to icon 403 .
  • the icon 403 is an object of type chart, and the icon 403 includes text 4031 and chart 4032 .
  • the graph 4032 includes an X-axis 40321 whose category is a polar axis, a Y-axis 40322 whose category is a category axis, and an icon 40323 .
  • Icon 40323 contains rectangle 403231.
  • Step (a) Create a canvas object, bind existing HTML elements, and set parameters such as canvas type, width, height, and margin.
  • Step (b) call the add chart method of the canvas object to create the chart object, and use the bind data method to bind the data.
  • Step (c) Create the X coordinate axis object and the Y coordinate axis object respectively, and call the binding method provided by the chart to bind with the chart, and set the parameters such as the type, definition domain, and value range of the coordinate axis.
  • Step (d) Create an icon object and bind it to the chart, and set relevant parameters according to the type of the icon; when adding a nested chart, set the type of the icon to "chart".
  • Step (e) In the code block corresponding to the chart icon object, follow steps (c) to (e) to add coordinate axes, icons or deeper chart nesting.
  • Example 1 includes steps (a) through (c).
  • Step (a) In the visualization component construction interface provided by the embodiment of the present application, the user drags the canvas and the chart into the construction interface as the parent chart by dragging with the mouse, and adds a coordinate axis to the parent chart.
  • the computing device After the user modifies attributes such as the coordinate axis type, value range, and range of the parent chart, the computing device automatically solves the layout position of the icon according to the coordinate axis attributes through the underlying syntax provided by the embodiments of the present application, without additional calculation work.
  • the user sets the definition domain of the X coordinate axis of the parent chart to [0,2], and sets the definition domain of the Y coordinate axis of the parent chart to [3,0].
  • the user can set the xy coordinates of the chart to integers in the domain to achieve a 4*3 layout.
  • the computer determines that the icons in the entire drawing space are laid out according to a 4*3 grid.
  • the user performs the operation of adding a binding icon to the parent chart, adding a text-type icon to display the month name.
  • the computing device arranges the months in the interface according to a defined 4*3 grid. In FIG. 8, Jan (January), Feb (February)...Dec (December) are 12 text (text) type icons representing month names.
  • Step (b) The user adds a chart icon (child chart) to the parent chart.
  • the computing device adds the chart icon to the layout position solved in step (a) in the interface.
  • each subgraph is a separate graph and is arranged according to the layout defined in step (a).
  • the computing device will re-determine the position of each sub-chart according to the modified properties of the parent chart, and update the position of each sub-chart in the interface, so that all sub-charts can maintain Update the position without changing the relative position of the chart.
  • FIG. 9 shows the effect of chart nesting after adding sub-charts
  • FIG. 9 shows the effect of nesting 12 sub-charts.
  • FIG. 10 for the specific structure of each sub-diagram in FIG. 9 .
  • Each circle in FIG. 9 is a chart icon
  • the chart icon 60511 represented by the circle includes a group of rectangular icons 605111 .
  • Each rectangle in the set of rectangle icons 605111 is the icon to which the chart 60511 is bound.
  • the chart 60511 represented by each circle is the icon to which the chart 6051 is bound.
  • the style shown in FIG. 9 or FIG. 10 is generated by setting the chart icon coordinate axis as the circular category coordinate axis and the linear coordinate axis.
  • the X-axis data represents the x-coordinate of the icon position
  • the Y-axis data in the interface shown in Figure 9 represents the y-coordinate of the icon's position.
  • the X-axis data and the Y-axis data are generally bound by data. specified. For example, the user sets a certain field of the data to the attribute of x or y data as the x-coordinate or y-coordinate of the icon, thereby realizing the setting of the X-axis data and the Y-axis data.
  • Step (c) The user fills the sub-diagram content according to actual business requirements.
  • the user can add icons such as rectangles and circles to the sub-chart through the interactive view or code view and set the color map, and the computing device can generate the final effect of the nested chart shown in FIG. 11 .
  • FIG. 11 is a grayscale image, and different grayscales in FIG. 11 represent different values of data.
  • the embodiments of the present application encapsulate the process of constructing a combination of multiple charts.
  • the embodiment of the present application adopts a more interpretable expression, that is, the sub-chart is applied as a "icon" to the structure of "chart nesting".
  • the original complex visual view can be constructed by the nested combination of simple charts, which is more conducive to users to sort out the logic of the chart structure and lower the threshold for use.
  • the embodiment of the present application also builds a visual construction interface for interactive construction of nested charts.
  • the visual construction interface is designed with the concept of low code, and integrates a graphical parser, allowing users to develop and construct nested class diagrams in a unified way of code interaction.
  • the interface predefines the corresponding code templates. Users only need to simply drag and drop to interact to generate basic charts, which greatly simplifies the tedious process of building from scratch.
  • the embodiment of the present application defines the coordinate axis by defining the data coordinate to the canvas position. Mapping rules, so that based on the data bound to each chart, the position of each chart can be derived in batches without needing to calculate the position separately for each chart, which solves this problem.
  • the embodiments of the present application predefine a variety of coordinate axis types, which can cover many common chart layouts. This problem is solved by requiring additional definition by the user.
  • the embodiment of the present application abstracts elements, such as coordinate axes, icons, etc., so after each icon is added, it is added to the chart as a whole.
  • the computing device can display the nested chart on the canvas.
  • the computing device will act on the graph of the display module synchronously, which more intuitively displays the influence of each step of the operation on the graph.
  • FIG. 12 is a schematic structural diagram of an apparatus for constructing a visualization view provided by an embodiment of the present application, and the apparatus 900 for constructing a visualization view shown in FIG.
  • the apparatus 900 for constructing a visual view shown in FIG. 12 is the terminal 10 or the server 11 in FIG. 1 .
  • the apparatus 900 for constructing a visualization view shown in FIG. 12 is a computing device in the method flow shown in FIG. 2 .
  • the visual view constructing apparatus 900 includes a communication module 901 , a layout calculation module 902 and a view generation module 903 .
  • the communication module 901 is used to support the construction apparatus 900 of the visual view to execute S201 and S204.
  • the layout calculation module 902 is configured to support the construction apparatus 900 of the visual view to execute S202.
  • the view generating module 903 is configured to support the visualization view constructing apparatus 900 to execute S203.
  • the communication module 901 in the apparatus 900 for constructing a visual view shown in FIG. 12 includes the interaction module 501 in FIG. 5 , and the layout in the apparatus 900 for constructing a visual view shown in FIG. 12
  • the calculation module 902 includes the code module 502 in FIG. 5
  • the view generation module 903 in the apparatus 900 for constructing a visual view shown in FIG. 12 includes the drawing module 503 in FIG. 5 .
  • the visual view construction apparatus 900 further includes a code acquisition module, and the code acquisition module is configured to support the visual view construction apparatus 900 to acquire codes corresponding to the attribute setting operation.
  • the code acquisition module includes the code module 502 in FIG. 5 .
  • the apparatus embodiment described in FIG. 12 is only schematic.
  • the above-mentioned division of functional modules is only a logical function division.
  • multiple functional modules or components may be combined. Either it can be integrated into another system, or some features can be omitted, or not implemented.
  • Each functional module in each embodiment of the present application may be integrated into one processing functional module, or each functional module may exist physically alone, or two or more functional modules may be integrated into one functional module.
  • All or part of each functional module in the apparatus 900 for constructing a visual view is implemented by software, hardware, firmware or any combination thereof.
  • the above-mentioned layout calculation module 902 and view generation module 903 are implemented by software function modules generated after at least one processor 801 in FIG. 13 reads the program code stored in the memory 802 .
  • the layout calculation module 902 is implemented by a portion of the processing resources (eg, one core or two cores in a multi-core processor) in the at least one processor 801 in FIG. 13
  • the view generation module 903 is implemented by the at least one processor in FIG. 13 .
  • the rest of the processing resources in the 801 for example, other cores in a multi-core processor, or a field-programmable gate array (FPGA), or a programmable device such as a coprocessor is used to complete.
  • the communication module 901 in FIG. 12 is implemented by a hardware programmable device, while the layout calculation module 902 in FIG. 12 is the program code stored in the memory read by the CPU After that, the generated software function module.
  • the basic hardware structure of the computing device is exemplified below.
  • FIG. 13 is a schematic structural diagram of a computing device provided by an embodiment of the present application.
  • the computing device 800 shown in FIG. 13 is used to implement the method for constructing a visualization view provided by the above method embodiments.
  • the computing device 800 shown in FIG. 13 is the terminal 10 or the server 11 in FIG. 1 .
  • the computing device 800 shown in FIG. 13 is the computing device in the method flow shown in FIG. 2 .
  • the computing device 800 shown in FIG. 13 includes the interaction module 501 , the code module 502 and the drawing module 503 shown in FIG. 5 .
  • 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. 13 .
  • computing device 800 optionally includes multiple processors, such as processor 801 and processor 805 shown in FIG. 13 .
  • 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 involved in the above-mentioned method shown in FIG. 2 inputted by the user through the input device, such as a construction request, coordinate axis attributes, for generating a visual view , the nested relationship between charts, the type of icon, the parameters of the chart or the icon.
  • Input devices include, but are not limited to, keyboards, touch screens, microphones, mice, or sensing devices.
  • the input-output interface 806 is also used to interface with output devices.
  • the input-output interface 806 outputs the intermediate results and/or final results generated by the processor 301 executing the method shown in FIG. 2 above through the output device, such as the visual view, the code for generating the visual view, and the output generated according to the configuration operation on the visual view. code, build interface.
  • Output devices include, but are not limited to, displays, printers, projectors, and the like.
  • the input-output interface 806 outputs the visualization to a display, which displays the visualization.
  • 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 chart and the second chart are used to distinguish different charts, not to describe a specific order of the charts, nor should it be understood that the first chart is more important than the second chart.
  • 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 available 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)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • General Engineering & Computer Science (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请提供了一种可视化视图的构建方法及装置，属于计算机技术领域。本申请在构建嵌套图表的可视化视图时，将子图表视为父图表绑定的图符，使用父图表的坐标轴属性来控制子图表的布局，从而将复杂图表在逻辑上拆分为简单图表的嵌套组合，使得复杂图表的逻辑结构清晰化。尤其是，在父图表包含大量子图表的场景下，利用父图表的坐标轴属性有助于批量化地获得所有子图表的布局，而无需开发者为每个子图表单个计算和配置，因此显著地简化了可视化构建流程，提高了可视化构建效率，降低使用门槛。

Description

可视化视图的构建方法及装置
本申请要求于2021年04月26日提交的申请号为202110455319.3、发明名称为“可视化视图的构建方法及装置”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本申请涉及计算机技术领域，特别涉及一种可视化视图的构建方法及装置。
背景技术
嵌套图表是指不同图表相互嵌套而成的图表。嵌套图表的形式是，一个大图表里包含至少一个相同或相关类型的小图表，这些小图表在大图表中按照某种布局参数进行排列展示。例如，日历图是一个典型的嵌套图表，表示一年的日历图包含12个月份的第二图表，每个第二图表展示一个月中各个日期的数据。
为了构建嵌套图表的可视化视图，相关技术中，开发人员要为嵌套图表中每个小图表手动地计算位置、旋转角度等布局参数相关的参数。并且，开发者要为每个小图表分别编写用于配置计算出的布局参数相关的参数的代码，在计算机上输入编写的代码。计算机根据开发者编写的代码进行绘制、渲染等操作，从而显示嵌套图表。
上述方法依赖的代码量巨大，导致效率低下。尤其是，在构建small multiple(小而多)形式的嵌套图表的场景下，嵌套图表中包含众多小图表，开发者需要为众多小图表的布局参数分别进行计算和配置，造成过程繁琐复杂，效率低下的问题更是十分严重。
发明内容
本申请实施例提供了一种可视化视图的构建方法及装置，有助于提高对复杂嵌套图表进行可视化的效率。所述技术方案如下。
第一方面，提供了一种可视化视图的构建方法，该方法包括：接收构建请求，构建请求指示构建第一图表的可视化视图，第一图表绑定的图符包括第二图表；根据第一图表的坐标轴属性，获取第二图表的第一布局参数；根据第一布局参数，获取第一图表的可视化视图，可视化视图包括第一图表和第二图表，可视化视图中第二图表按照第一布局参数排列；提供可视化视图。
上述方法中，通过在构建嵌套图表的可视化视图时，将子图表视为父图表绑定的图符，使用父图表的坐标轴属性来控制子图表的布局，从而将复杂图表在逻辑上拆分为简单图表的嵌套组合，使得复杂图表的逻辑结构清晰化。尤其是，在父图表包含大量子图表的场景下，利用父图表的坐标轴属性有助于批量化地获得所有子图表的布局，而无需开发者为每个子图表单个计算和配置，因此显著地简化了可视化构建流程，提高了可视化构建效率，降低使用门槛。
在一些实施例中，支持在父图表的坐标轴属性对应的位置的基础上进一步调优，从而得到更加精确的子图表的位置，也即是，上述第一布局参数是以坐标轴属性对应的布局参数为 基准调整得到的。具体来说，在获取第一布局参数的过程中，根据第一图表的坐标轴属性，获取第二图表的基准布局参数；对基准布局参数进行调整，得到第一布局参数。
通过这种方式，不仅依靠坐标轴简化了布局流程，而且不局限于基于坐标轴的布局方式。具体来说，一方面，通过对基准位置进行调整能实现更加精细的布局，从而提升可视化的构建效果。另一方面，相比于从零开始计算布局来说，由于基准位置为布局的计算提供了参考量，降低了计算布局的复杂度。
如何基于父图表的坐标轴属性所定义的基准位置做调整包括多种实现方式，下面结合两种实现方式举例说明。
实现方式一、根据第二图表的位置坐标、位移或角度，对基准布局参数进行调整，得到第一布局参数。
通过实现方式一，允许用户通过改变类型为图表的图符(第二图表，即子图表)自身的属性来调整基准布局，有助于各个子图表的布局更加精确。
实现方式二、根据第一图表的力引导属性，对基准布局参数进行调整，得到第一布局参数。
通过实现方式二，对于气泡图(bubble chart)，或者其他包含大量子图表或者不同子图表分布密集的图表来说，根据坐标轴属性计算出的基准位置可能造成子图表重叠，此时通过上述实现方式二，额外设置力引导布局属性，能让每个子图表相切，从而达到不同子图表互不重叠的效果。
以上通过两种方式介绍了如何对基准位置做调整。可替代地，采用其他方式进行位置调整。例如，预先设定用于调整位置的计算规则，对更加复杂的调整场景时，向用户提供预先设定的计算规则从而辅助用户调整位置。
在一些实施例中，在子图表中包含图符的情况下，根据图符在子图表中的位置和子图表在父图表中的位置，获取子图表中图符的位置。例如，第二图表绑定的图符包括第三图表，根据第一布局参数，获取第一图表的可视化视图，包括：根据第三图表在第二图表中的位置和第二图表在第一图表中的位置，获取第三图表在可视化视图中的位置。
通过上述方式，在嵌套图表包含两层以上嵌套关系的情况下，能够准确计算出更底层图表的布局，从而支持复杂嵌套图表的可视化效果。
在一些实施例中，支持采用多种方式修改可视化视图中图表的布局。下面，对实现图表布局修改的一些可能实现方式举例说明，请见下述实现方式A至实现方式C。
实现方式A、通过修改父图表的坐标轴属性来修改子图表的布局。例如，响应于第一更新指令，对第一图表的坐标轴属性进行更新；根据第一图表更新后的坐标轴属性，获取第二图表的第二布局参数；根据第二布局参数，对可视化视图中第二图表的布局进行更新。
通过实现方式A，用户通过修改父图表的坐标轴属性，即可批量的修改每个子图表的布局，避免为每个子图表分别修改布局带来的繁琐操作，显著提升了布局修改效率。
实现方式B、通过修改子图表本身的属性来修改子图表的布局。例如，响应于第二更新指令，获取第二图表更新后的位置坐标；根据第二图表更新后的位置坐标，对可视化视图进行更新。
通过实现方式B，允许用户修改子图表自身的位置来调整子图表的布局，从而提升布局调整灵活性，有助于子图表布局更加精确。
实现方式C、通过交换父图表和子图表的父子关系来修改图表布局。例如，响应于关系互换指令，根据第二图表的坐标轴属性，获取第三布局参数，关系互换指令指示对第一图表与第二图表的父子关系互换；根据第三布局参数对可视化视图进行更新，更新后的可视化视图中第一图表按照第三布局参数排列。
通过实现方式C，允许用户拖拽交换同类元素从属关系，进而改变图表的结构，很大程度上避免了用户因修改顶层结构导致了重复改代码的工作，极大的提高了图表结构修改的效率。
在一些实施例中，可视化视图是通过构建界面提供的，构建界面用于构建图表的可视化视图。具体来说，提供构建界面，构建界面包括可视化视图。
在一些实施例中，构建界面包括可视化视图和代码区域。
在一些实施例中，构建界面中代码区域用于对生成可视化视图的第一代码进行展示。
通过这种方式，将构建好的可视化视图以及可视化视图的生成代码通过同一个界面返回给用户，方便用户同步查看可视化视图的效果以及代码。
在一些实施例中，方法还包括：响应于代码导出指令，将代码区域中第一代码输出至目标位置。
通过导出代码的功能，方便用户修改代码进行二次开发，也支持用户将代码拷贝到其他项目中来部署复杂可视化视图。
在一些实施例中，方法还包括：响应于代码运行指令，通过运行在代码区域中输入的第二代码，对可视化视图进行调整。
通过这种方式，用户输入的代码能反馈到交互构建过程中，可视化视图随着用户输入的代码而同步更新，从而支持用户通过输入代码来调整可视化视图，如此，支持灵活使用代码构建和交互构建这两种构建方式搭建图表，解决了相关技术中代码构建和交互构建只能选择一项使用的技术问题。
在一些实施例中，方法还包括：响应于构建界面上触发的对可视化视图的属性设定操作，获取属性设定操作对应的第三代码；将第三代码增加至构建界面中的代码区域。
通过这种方式，在用户交互构建可视化视图的场景下，每当用户执行一次操作时，界面中展示的代码能够跟随用户的操作而实时更新，从而将用户本次操作产生的代码更及时地反馈给用户，便于用户交互式的调整图表参数和嵌套逻辑，进一步提高可视化视图的构建效率。
在一些实施例中，构建界面还包括层次视图，层次视图用于展示第一图表的层次结构图，层次结构图中第二图表位于第一图表的下层。
通过这种方式，将嵌套图表的逻辑结构直观地呈现给用户，帮助用户梳理构建可视化视图的逻辑，从而降低用户构建可视化视图的学习成本。
在一些实施例中，上述构建界面支持选择性显隐其他未操作的图表的功能。例如，响应于对第一图表的隐藏指令，提供第一图表处于隐藏状态的可视化视图；或者，响应于对第二图表的隐藏指令，提供第二图表处于隐藏状态的可视化视图。
通过这种方式，有助于节省界面展示空间，在有限的空间内更加高效的搭建嵌套类图表。同时，这种操作符合图表封装的逻辑思想，避免了多个图表同时展示在交互区域所带来的视觉混乱和错误操作。
在一些实施例中，构建好的可视化视图能通过多种方式提供给用户。
例如，由云端设备来构建可视化视图时，云端设备向构建请求的发起方发送可视化视图的内容。通过这种方式，支持将可视化视图的构建流程封装为云服务提供给客户。
又如，由终端设备来构建可视化视图时，终端设备在构建界面中显示可视化视图。
第二方面，提供了一种可视化视图的构建装置，该可视化视图的构建装置具有实现上述第一方面或第一方面任一种可选方式的功能。该可视化视图的构建装置包括至少一个功能模块，至少一个功能模块用于实现上述第一方面或第一方面任一种可选方式所提供的方法。
在一些实施例中，可视化视图的构建装置中的功能模块通过软件实现，可视化视图的构建装置中的功能模块是程序模块。在另一些实施例中，可视化视图的构建装置中的功能模块通过硬件或固件实现。
可视化视图的构建装置可选地运行在云计算系统(包括多个云计算设备，如服务器)，用于向客户提供构建可视化视图的云服务。可替代地，可视化视图的构建装置运行在边缘计算系统(包括多个边缘计算设备，如服务器、台式电脑等)；可替代地，可视化视图的构建装置运行在终端设备上(如笔记本电脑、个人台式电脑等)。
第二方面提供的可视化视图的构建装置的具体细节可参见上述第一方面或第一方面任一种可选方式，此处不再赘述。
第三方面，提供了一种计算设备，该计算设备包括处理器和存储器，其中存储器中存储有计算机指令，处理器执行计算机指令，以实现第一方面及其可能的实现方式的方法。在一些实施例中，该计算设备还包括网络接口，用于通过网络发送构建好的可视化视图。在一些实施例中，该计算设备还包括屏幕，用于显示构建好的可视化视图。
第四方面，提供了一种(非瞬态的)计算机可读存储介质。该(非瞬态的)计算机可读存储介质中存储有至少一条指令，该指令在计算机上运行时，使得计算机执行上述第一方面或第一方面任一种可选方式所提供的方法。该存储介质的类型包括但不限于易失性存储器，例如随机访问存储器，非易失性存储器，例如快闪存储器、硬盘(hard disk drive，HDD)、固态硬盘(solid state drive，SSD)。
第五方面，提供了一种计算机程序产品，所述计算机程序产品包括一个或多个计算机程序指令，当所述计算机程序指令被计算机加载并运行时，使得所述计算机执行上述第一方面或第一方面任一种可选方式所提供的方法。该计算机程序产品可选地为软件安装包，在需要使用上述第一方面提供的方法的情况下，下载该计算机程序产品并在计算设备上执行该计算机程序产品。
第六方面，提供了一种芯片，包括存储器和处理器，存储器用于存储计算机指令，处理器用于从存储器中调用并运行该计算机指令，以执行上述第一方面及其第一方面任意可能的实现方式中的方法。
第七方面，提供了一种计算设备集群，该计算设备集群包括至少一个计算设备。上述第二方面中计算设备的不同单元分布在计算设备集群中的不同的计算设备上运行。可选地，该计算设备集群为云计算系统(包括多个云计算设备，如服务器)。可替代地，该计算设备集群为边缘计算系统(包括多个边缘计算设备，如服务器、台式电脑)；可替代地，该计算设备集群为终端设备集群(包括多个终端，如笔记本电脑、个人台式电脑等)。
附图说明
图1是本申请实施例提供的一种应用场景的示意图；
图2是本申请实施例提供的一种可视化视图的构建方法的流程图；
图3是本申请实施例提供的一种嵌套图表的可视化视图；
图4是本申请实施例提供的一种构建嵌套图表的逻辑层级结构的示意图；
图5是本申请实施例提供的一种可视化组件的构建界面的逻辑架构图；
图6是本申请实施例提供的一种可视化视图的构建界面的示意图；
图7是本申请实施例提供的一种对图表选择性显隐的示意图；
图8是本申请实施例提供的一种可视化视图的构建界面的示意图；
图9是本申请实施例提供的一种添加子图表后图表嵌套效果图；
图10是本申请实施例提供的一种添加子图表后图表嵌套效果图；
图11是本申请实施例提供的一种可视化视图的构建界面的示意图；
图12是本申请实施例提供的一种可视化视图的构建装置的结构示意图；
图13是本申请实施例提供的一种计算设备的结构示意图。
附图标记：
10-终端
11-服务器
40-图表
401-X坐标轴
402-Y坐标轴
403-图符
4031-文本
4032-图表
40321-X坐标轴
40322-Y坐标轴
40323-图符
403231-矩形
501-交互模块
502-代码模块
503-绘制模块
60-构建界面
601-数据视图
602-交互构建视图
603-层次视图
6031-图符
604-属性视图(也称参数配置视图)
6041-输入组件
6042-输入组件
6043-输入组件
6044-输入组件
605-构建结果展示区域(也称可视化效果展示区)
6051-可视化视图(父图表)
60511-父图表的图表类型图符(即子图表)
605111-子图表的矩形图符
60512-父图表的文本图符
6052-用于触发导出可视化视图的导出控件
606-代码区域
6061-用于触发运行代码的运行控件
6062-用于触发导出代码的导出控件
具体实施方式
为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。
下面对本申请实施例涉及的一些术语概念做解释说明。
(1)数据可视化(data visualization)
数据可视化是指将数据的属性编码为图形的属性以展示数据的技术。数据可视化用于向用户更清晰有效地传达数据包含的信息。例如，将人群的数量编码为圆形的尺寸，圆形尺寸越大，表示人群数量越多，从而通过圆形的尺寸大小直观有效地传达人群数量的多少；又如，将日期编码为点的颜色，将工作日编码为颜色1，将节假日编码为颜色2，从而通过不同的颜色直观地区分出节假日和工作日。
(2)图符
图符是用来展示数据的图形。图符有时也称为可视化元素、图形符号、视觉符号或界面元素。从图符的形状的角度来看，图符包括而不限于矩形、圆形、弧、曲线、文字、路径、区域、三角形、星型等等。从图符的属性的角度来看，图符的位置(如x坐标和y坐标)、尺寸、颜色、形状、纹理、线宽、半径、长度、宽度等各种属性都能够用来表示数据。例如，将圆形(图符)的面积与人群的数量(数据的属性)关联，圆形的面积越大表示人群数量越多。不同类型的图符可能具有相同的属性，也可能具有不同的属性。例如，圆形图符具有半径属性，矩形图符具有宽度属性。
(3)视觉通道
视觉通道是指图符用来传递信息的视觉属性。例如，视觉通道包括而不限于位置，大小，颜色，形状，纹理等。
(4)图表
图表是一种通过图符来表示数据属性的图形。图表中包含一种或多种图符。典型的图表例如柱状图、折线图、饼图等。本申请实施例提供的可视化视图中，图表是具有坐标轴属性的可视化元素。图表的坐标轴属性用于控制图表中包含的图符的布局。在图表包含多个图符的情况下，图表的坐标轴属性用于控制图表中每一个图符的布局。
(5)坐标轴属性
坐标轴属性用于指示数据的值与画布像素范围(即可视化视图中位置)之间的映射关系。 坐标轴属性有时也称为坐标轴参数。坐标轴属性包括而不限于坐标轴的类型、坐标轴的定义域、坐标轴的值域等。
坐标轴类型包括而不限于线性坐标轴、类别坐标轴、圆形坐标轴、二次函数坐标轴、指数函数坐标轴、极坐标轴等。
坐标轴的定义域(domain)表示待进行可视化的数据的取值范围。例如，坐标轴的定义域为[0,100]，表示待进行可视化的数据的取值范围为[0,100]。
坐标轴的值域(range)也称坐标轴的范围，坐标轴的值域用于指示坐标轴在画布中分布的范围。坐标轴的值域用来确定在构建可视化视图时，在定义域范围内的数据应当绘制在画布中多大的区域内。例如，如果坐标轴的值域为[0,600]、[0,800]，表示在画布中长为600、宽为800的矩形中绘制坐标轴。
(6)图表之间的父子关系
图表之间的父子关系是一种逻辑关系，有时也称为嵌套关系或者说从属关系。例如，一个可视化视图中，如果图表A包含图表B，图表A和图表B具有父子关系，图表A为图表B的父图表，图表B为图表A的子图表。
(7)图表类型图符
图表类型图符是指类型为图表的图符。图表类型图符能够充当另一个图表的子图表。图表类型图符的内容与图表一样，图表类型图符包含坐标轴以及图符。可选地，图表类型图符内部继续嵌套图符图表，从而产生更深层次的嵌套结构。
(8)布局参数
布局参数是指用于控制可视化视图中布局的参数。布局参数包括而不限于位置、角度、间距、偏移、法向量方向、切线方向等。例如，布局参数为X坐标和Y坐标。本申请的一些实施例中，基于图表的坐标轴属性来控制图表中图符的布局参数。具体来说，图表的坐标轴属性与图表中图符的布局参数具有映射关系，当获得图表的坐标轴属性后，能够基于该映射关系确定图表中图符的布局参数。
数据可视化通过提取数据中所包含的数据信息，在以图形、尺寸、颜色等视觉通道对数据信息值进行展示，将原本难以理解的数据内容以直观、易于理解的方式进行表达，从而提升用户分析和理解数据的效率。数据可视化技术在财务金融、大数据、智慧城市等领域有了越来越广泛的应用。
面对日益复杂的数据信息，传统的可视化图表往往难以完成复杂的可视分析任务，尤其是需要对比同一结构的数据时，常常需要将多个相同或相关类型的子图表按某种布局进行排列展示，形成small multiple的可视化视图，方便用户横向对比。例如，在对多个国家中感染传染病的情况进行可视化时，可以将各个国家的感染人群数量与时间的折线图排列在同一个视图中，方便用户对比不同国家的感染情况和发展趋势。
小图表的样式不一定是规则的可视化图表(如折线图、折线图、饼图)。例如，在展示了三年内用户的工作时间信息时，可以采用日历图的样式构建可视化视图。日历图每一行都有12个月份的子图表，每个子图表都使用布局、颜色、和圆形半径展示了包含日期，礼拜日以及相关数据的数值大小情况。
除了小图表自身的可视化形式，小图表的布局形式也可能十分复杂。例如，一个可视化 图表中各个子图表可能不是均匀分布的。为了实现复杂的可视化视图，传统的可视化构建方法通常需要开发人员手动计算每个可视化元素在画布上的具体位置和旋转角度等，进行视觉编码和可视化渲染，同时，需要在实现过程中保证代码的简洁、易读和可扩展性。这不仅要求开发人员具备很强的编程能力，还需要花费大量时间进行数值计算、逻辑构建和代码维护，从而导致了可视化开发效率的低下。
一些研究提供了组件模板构建方案，通过用户选择可视化模板，输入数据，获取可视化视图。
然而在研究过程中发现，有限的图表类型只能满足某些预定义的可视分析需求，无法让用户根据自己的分析任务定制可视化视图样式。可视化编程语言虽然可以帮助用户高度定制可视化视图，然而，如上文所述，用户需要直接编写程序实现可视化视图的逻辑关系构建，位置计算和视觉编码任务，有很高的学习成本，搭建成本，可视化视图的开发效率高度依赖用户的编码能力和对应用程序接口(Application Programming Interface，API)的熟悉程度。尽管近年来不少工作致力于研究交互式可视化构建界面，通过提供拖拽输入等简单交互的方式构建图表，但是它们更多地关注于帮助用户实现将数据属性映射到颜色、尺寸等视觉通道的任务，没有从宏观结构上把控复杂图表的图表逻辑构建，交互式地完成如small multiple或嵌套类可视化视图构建任务。因此亟需一种针对复杂嵌套类图表的构建方法来改进低效率开发方案。
有鉴于此，本申请实施例提供了一种支持构建复杂嵌套图表的可视化视图的方法。该方法基于对多图表组合的构建过程做封装的技术构思，将子图表视为父图表包含的图符，使用父图表的坐标轴属性来控制子图表的布局，进而实现可视化视图的构建。由于将子图表视为父图表包含的图符，能够将复杂的small multiple可视化视图抽象成多个简单图表的嵌套组合。从父图表的角度来看，子图表是父图表内部的一个子元素，在通过父图表坐标轴来指定子图表的位置时，无需过多考虑子图表的详细内容；从子图表的角度来看，子图表的样式可以单独定义，用户在构建子图表的详细内容时，无需过多考虑子图表在整体画布上的布局等计算过程。并且，子图表作为图符，能够按照图符的规则处理子图表，不必再为子图表设定一套额外的逻辑。由此可见，本申请实施例使得复杂图表的可视化构建逻辑简单化、清晰化、明确化，降低了实现复杂度，显著地简化了可视化构建流程，提高了可视化构建效率，降低用户的学习使用成本。
下面对本申请实施例的应用场景举例说明。
附图1是本申请实施例提供的一种应用场景的示意图。如附图1所示，该应用场景包括终端10和服务器11，终端10和服务器11通过有线网络或无线网络相连。下面对附图1中各个设备的作用、典型产品形态、部署位置和交互方式举例说明。
(1)终端10
终端10用于接收用户的操作以及向用户展示可视化图表。在本申请的一些实施例中，终端10具体用于在屏幕中显示针对嵌套图表的可视化构建界面以及接收用户对可视化构建界面的输入。
在本申请的一些实施例中，终端10用于为用户提供交互和输入代码这两种方式来构建可视化图表的渠道，从而保证可视化构建的灵活性和正确性。在采用交互的方式构建的过程中， 终端10显示的上述可视化构建界面包括输入组件(如输入框、选择框)，用户对输入组件触发输入操作，输入图表的属性。终端10接收用户在输入组件上输入的图表的属性，基于用户配置图表的属性获取构建的可视化视图，将构建好的可视化视图显示在构建界面中。在采用代码的方式构建的过程中，用户在可视化构建界面输入程序代码。终端10接收用户在可视化构建界面输入的程序代码，基于用户输入的程序代码获取构建的可视化视图，将构建好的可视化视图显示在构建界面中。
终端10存在多种可能产品形态。终端10包括而不限于个人计算机、移动电话、笔记本电脑、IP电话、摄像头、平板电脑、可穿戴设备等。
终端10部署在终端10环境中或边缘环境中。在一些实施例中，终端10部署在局域网中。
(2)服务器11
服务器11用于提供可视化视图的构建服务。在本申请的一些实施例中，服务器11具体用于根据父图表的坐标轴属性计算子图表的布局参数，如子图表在界面的画布区域中位置坐标。可选地，服务器11还用于承担可视化视图构建时其他占用较大算力的任务。
服务器11可选地是独立的硬件设备、或者是包含多个硬件设备的集群或者分布式系统，或者是基于云计算以及网络功能虚拟化(network functions virtualization，NFV)技术所实现的虚拟化设备。虚拟化设备包括而不限于虚拟机或容器。
服务器11部署在云环境中。在一些实施例中，终端10部署在互联网中。
在一些实施例中，终端10和服务器11通过交互来实施下述方法实施例。例如，终端10响应于用户的操作，向服务器11发送可视化请求，访问服务器11提供的可视化构建服务。可视化请求中携带了构建图表所需的信息，如通过构建界面的输入组件配置的参数或者通过构建界面输入的代码。服务器11响应于可视化请求，根据可视化请求携带的信息构建可视化图表，将可视化图表返回给终端10。
终端10和服务器11的交互方式包括而不限于通过浏览器软件或者业务客户端软件交互的方式。在采用浏览器软件的方式交互时，上述服务器11例如是网站服务器11，终端10通过浏览器软件访问指定网页从而触发上述可视化请求，服务器11将构建的可视化视图携带在HTML文件中返回给终端10。在采用业务客户端软件的方式交互时，上述服务器11例如是业务客户端软件关联的后台服务器11，终端10通过业务客户端软件访问上述服务器11，从而获得可视化视图。
上述附图1所示的终端10和服务器11交互的场景是可选地。可替代地，终端10本地执行下述方法实施例。
下面对本申请实施例的方法流程举例说明。
附图2是本申请实施例提供的一种可视化视图的构建方法的流程图。附图2所示方法包括以下步骤S201至步骤S204。
附图2所示方法所基于的网络部署场景可选地如上述附图1所示。例如，结合附图1来看，附图2所示方法中的计算设备为附图1中的服务器11或者终端10。
附图2所示方法以一个计算设备执行步骤S201至步骤S204为例进行说明。在另一些实施例中，步骤S201至步骤S204由多台设备协作执行。例如，结合附图1来看，附图2所示方法由服务器11和终端10协作执行。在一些实施例中，服务器11承担主要处理工作，终端 10承担次要处理工作；在另一些实施例中，服务器11承担次要处理工作，终端10承担主要处理工作；或者，服务器11或终端10分别单独承担处理工作。在一种可能的实现中，终端10充当可视化视图构建请求的发起方，请求服务器11构建图表的可视化视图；服务器11充当可视化视图请求的响应方，构建可视化视图并将构建好的可视化视图返回给终端10，由终端10展示可视化视图。
附图2所示方法涉及构建包含多个图表的可视化视图。为了区分不同的图表，用“第一图表”、“第二图表”、“第三图表”区分描述多个不同的图表。
附图2所示方法可选地用于构建两层以上嵌套关系的图表的可视化视图。为了描述简洁，附图2所示方法侧重描述构建两层嵌套关系的图表的流程，即，在第一图表包含第二图表的场景下，如何构建这2个图表整体的可视化视图。在图表包含更深层次嵌套结构的场景下，其他不同层次之间的图表的处理方式可参考基于第一图表对第二图表的处理方式。例如，在图表包含三层嵌套结构的场景下，第一图表的图符包含第二图表，第二图表的图符包含第三图表，在处理第三图表时，可以基于第二图表的坐标轴属性来布局第三图表。
附图2所示方法可选地用于构建具有父图表包含两个或两个以上的子图表的场景。为了描述简洁，附图2所示方法以如何对父图表的其中一个子图表(第二图表)处理为例进行说明。在父图表包含更多子图表的情况下，其他子图表的处理方式可参考对第二图表的处理方式。
步骤S201、计算设备接收构建请求。
构建请求指示构建第一图表的可视化视图。可选地，构建请求通过用户对构建界面上的操作触发。
第一图表绑定的图符包括第二图表。第一图表和第二图表具有父子关系，第一图表为父图表，第二图表为子图表。例如，结合附图3来看，第一图表是附图3中的父图表40。第二图表是附图3中的矩形图符(子图表)403。又如，结合附图9来看，第一图表是附图9中的父图表6051。第二图表是附图9中的子图表60511。
步骤S202、计算设备根据第一图表的坐标轴属性，获取第二图表的第一布局参数。
在一些实施例中，计算设备预先建立坐标轴属性与布局参数之间的映射关系。在执行本步骤时，计算设备以第一图表的坐标轴属性为输入参数，利用预先建立的映射关系进行计算，从而得到第一布局参数。
在一些实施例中，上述映射关系具体包含坐标轴定义域、坐标轴值域、数据值与画布中像素位置(布局参数)之间的映射关系。在执行本步骤时，计算设备以第一图表的坐标轴定义域、第一图表的坐标轴值域、第二图表绑定的数据值为输入参数，利用预先建立的映射关系进行计算，从而得到第一布局参数。
在一些实施例中，上述映射关系中，第二图表在画布中像素位置(布局参数)具体根据第二图表绑定的数据值在定义域中的比例确定的。在一个具体示例中，第一图表(父图表)的X坐标轴的定义域设定为[0,2]，表示用户可以简单地通过指定图表的x坐标为0、1、2三个整数来均匀的分布三个图表；第一图表(父图表)的X坐标轴的值域为[0,600]，表示第一图表在画布的X方向上所占的像素位置范围为[0,600]。如果第二图表绑定的数据值为0，则第二图表对应的像素位置就是0；如果第二图表绑定的数据值为1，则第二图表对应的像素位置是300；如果第二图表绑定的数据值为2，则第二图表对应的像素位置是600。
总结上述列举的各种根据第一图表的坐标轴属性获取第二图表的第一布局参数的方式可见，通过定义坐标轴这种比较简单的操作，即可计算出合理的图表位置，满足基本布局要求，复杂度低，运算开销小。
在一些实施例中，支持在父图表的坐标轴属性对应的位置的基础上进一步调优，从而得到更加精确的子图表的位置。例如，计算设备根据第一图表的坐标轴属性，获取第二图表的基准布局参数；对基准布局参数进行调整，得到第一布局参数。通过上述方式，不仅依靠坐标轴简化了布局流程，而且不局限于基于坐标轴的布局方式。具体来说，一方面，通过对基准位置进行调整能实现更加精细的布局，从而提升可视化的构建效果。另一方面，相比于从零开始计算布局来说，由于基准位置为布局的计算提供了参考量，降低了计算布局的复杂度。
具体如何基于父图表的坐标轴属性所定义的基准位置做调整包括多种实现方式，下面结合两种实现方式举例说明，参见下述实现方式一和实现方式二。
实现方式一、通过改变图符图表(第二图表)自身的属性来对基准位置做调整。
具体来说，计算设备根据第二图表的位置坐标、位移或角度，对基准布局参数进行调整，得到第一布局参数。
实现方式二、通过图表的力引导属性来对基准位置做调整。
力引导属性是一种基于力导向算法(force-directed algorithm)进行图布局的属性。例如，用户将第一图表的力引导属性设置为true(真，表示力引导属性处于开启状态)，计算设备根据第一图表的力引导属性，对基准布局参数进行调整，得到第一布局参数。
通过实现方式二，对于气泡图(bubble chart)，或者其他包含大量子图表或者不同子图表分布密集的图表来说，根据坐标轴属性计算出的基准位置可能造成子图表重叠，此时通过上述实现方式二，额外设置力引导布局属性，能让每个子图表相切，从而达到不同子图表互不重叠的效果。
以上通过两种方式介绍了如何对基准位置做调整。可替代地，采用其他方式进行位置调整。例如，预先设定用于调整位置的计算规则，对更加复杂的调整场景时，计算设备向用户提供预先设定的计算规则从而辅助用户调整位置。
步骤S203、计算设备根据第一布局参数，获取第一图表的可视化视图。
可视化视图包括第一图表和第二图表，可视化视图中第二图表按照第一布局参数排列。例如，第一布局参数为位置，可视化视图中第二图表位于第一布局参数所指定的位置。
获取可视化视图的具体实现方式包括很多种。举例来说，计算设备在画布的第一布局参数对应的位置绘制第二图表，得到可视化视图。
在一些实施例中，在子图表中包含图符的情况下，根据图符在子图表中的位置和子图表在父图表中的位置设定子图表中图符的位置，求解一个图符在画布中的全局位置作为图符的最终位置。例如，上述第二图表(子图表)绑定的图符包括第三图表(子图表中图符)，计算设备在构建可视化视图的过程中，根据第三图表在第二图表中的位置和第二图表在第一图表中的位置，获取第三图表在可视化视图中的位置。
步骤S204、计算设备提供可视化视图。
可选地，可视化视图通过构建界面提供给用户。构建界面是用于构建数据的可视化视图的界面。例如，计算设备提供的构建界面包括可视化结果展示区域，该可视化结果展示区域中显示有可视化视图。通过该构建界面，能够在可视化搭建过程中直观地展示嵌套图表的构 建结果。可替代地，可视化视图通过文件、构建界面之外的其他界面等其他形式提供给用户。
提供可视化视图包括多种具体方式。在一种可能的实现中，计算设备向构建请求的发起方发送可视化视图的内容。例如，计算设备提供为云端服务器11，构建请求的发起方为终端10，上述构建请求为超文本传输协议(Hyper Text Transfer Protocol，HTTP)请求，计算设备获得可视化视图后，将可视化视图的内容封装为超文本标记语言(Hyper Text Markup Language，HTML)文件，将HTML文件通过HTTP响应发送给终端10。在另一种实现中，计算设备在构建界面中显示可视化视图。
本实施例提供的方法，通过在构建嵌套图表的可视化视图时，将子图表视为父图表绑定的图符，使用父图表的坐标轴属性来控制子图表的布局，从而将复杂图表在逻辑上拆分为简单图表的嵌套组合，使得复杂图表的逻辑结构清晰化。尤其是，在父图表包含大量子图表的场景下，利用父图表的坐标轴属性有助于批量化地获得所有子图表的布局，而无需开发者为每个子图表单个计算和配置，因此显著地简化了可视化构建流程，提高了可视化构建效率，降低使用门槛。
本申请的一些实施例支持采用多种方式修改可视化视图中图表的布局。下面，对实现图表布局修改的一些可能实现方式举例说明，请见下述实现方式一至实现方式三。
下述实现方式一至实现方式三涉及修改前的图表的布局参数以及修改后图表的布局参数。为了区分不同的布局参数，用“第一布局参数”、“第二布局参数”、“第三布局参数”区分描述多个不同的布局参数。此外，为了区分描述不同方式涉及的更新布局相关的指令，用“第一更新指令”、“第二更新指令”区分描述多个不同的更新指令。
实现方式一、通过修改父图表的坐标轴属性来修改子图表的布局。
具体来说，父图表的坐标轴属性包括类型、值域、范围(定义域)等等，父图表的这些坐标轴属性能够用来修改子图表的布局。
例如，计算设备响应于第一更新指令，对第一图表的坐标轴属性进行更新；计算设备根据第一图表更新后的坐标轴属性，获取第二图表的第二布局参数；根据第二布局参数，对可视化视图中第二图表的布局进行更新。
其中，第一更新指令指示对父图表(第一图表)的坐标轴属性进行更新。第一更新指令包括父图表(第一图表)的更新后的坐标轴属性。第一更新指令可选地是通过在构建界面上的操作触发的。例如，在采用交互构建的方式时，第一更新指令是对父图表的坐标轴的属性更新操作触发的，比如，对属性面板中父图表的坐标轴选项触发操作，在坐标轴选项中输入父图表更新后的坐标轴属性，从而触发第一更新指令。又如，在采用代码构建的方式时，第一更新指令是对构建界面中输入用于更新父图表的坐标轴属性的程序代码触发的。
实现方式二、通过修改子图表本身的属性来修改子图表的布局。
例如，计算设备响应于第二更新指令，获取第二图表更新后的位置坐标；根据第二图表更新后的位置坐标，对可视化视图进行更新。其中，第二更新指令指示对子图表(第二图表)的位置坐标进行更新，第二更新指令包括对子图表(第二图表)更新后的位置坐标。第二更新指令的触发方式可参考对第一更新指令的触发方式的介绍。
实现方式三、通过交换父图表和子图表的父子关系来修改图表布局。
例如，计算设备响应于关系互换指令，根据第二图表的坐标轴属性，获取第三布局参数； 根据第三布局参数对可视化视图进行更新，更新后的可视化视图中第一图表按照第三布局参数排列。
其中，关系互换指令指示对第一图表与第二图表的父子关系互换，即，将第一图表的角色从第二图表的父图表更新为第二图表的子图表，将第二图表的角色从第一图表的子图表更新为第一图表的父图表。在一些实施例中，关系互换指令是对构建界面上执行的操作触发的。可选地，关系互换指令是对父图表(第一图表)与子图表(第二图表)的拖拽交换操作触发的。例如，用户对构建界面中触发拖拽操作，交换父图表(第一图表)与子图表(第二图表)在构建界面中的位置关系，从而触发关系互换指令。可替代地，关系互换指令是对构建界面上输入的声明父图表(第一图表)与子图表(第二图表)的角色互换的程序代码触发的。
以上介绍了一些修改布局的可能实现方式，通过上述实现方式，可视化视图中图表的布局能够随着对图表或图符属性的修改而调整，实现图表布局效果的灵活调优。
下面，对本申请实施例提供的图形语法进行介绍。
本申请实施例提供了一种更加合理的可视化图形语法声明嵌套类图表的构建流程，从而简化嵌套类图表的构建流程。具体来说，本申请实施例提供的图形语法将复杂的small multiple可视化视图抽象成多个简单图表的嵌套组合，并帮助用户定义简单图表之间的嵌套关系。在搭建过程中，父图表可以用于控制子图表的布局结构，用户可以通过修改父图表坐标轴的类型、值域、范围等属性来修改子图表的布局结构；而子图表则作为父图表的“图符”，用于绘制具体的可视化元素，或进一步支持更底层可视化视图的布局。
本申请实施例提供的图形语法将可视化视图内容抽象为画布、图表、坐标轴、图符四类元素，通过对四类元素排列组合，来定义可视化图表的整体结构。下面，对这四类元素进行具体介绍。
(1)画布
画布是与HTML元素绑定的用于容纳其他元素的容器。本申请实施例提供的画布支持canvas(HTML中的一种元素，是依赖分辨率的位图画布，可以在canvas上面绘制任何图形，甚至加载照片)、可缩放的矢量图形(Scalable Vector Graphics，SVG)、web图形库(Web Graphics Library，WebGL，一种3D绘图协议规定的格式)等格式，允许用户自定义宽、高、背景色、边距等属性。
(2)图表
抽象的可视化图表包括由X坐标轴、Y坐标轴组成的坐标系以及不同图符组成的可视化元素。
(3)坐标系
图表绑定的坐标系用于控制图表包含的图符的布局。坐标系包含X坐标轴和Y坐标轴。本实施例为坐标系提供了多种类型的坐标轴。例如，坐标系中的X坐标轴或Y坐标轴包括而不限于线性坐标轴，极坐标轴，圆形坐标轴，指数函数坐标轴，二次函数坐标轴，类别坐标轴等等。可选地，坐标系中坐标轴的种类由用户自定义设定；可替代地，坐标系中坐标轴是默认种类的坐标轴。坐标系中坐标轴具有坐标轴属性。在一些实施例中，坐标轴属性包括通用属性以及专有属性。通用属性包括定义域和值域。专有属性为坐标轴种类对应的属性，例如，极坐标轴的专有属性包括起始角度。
(4)图符
图符是用来显示数据的按形状划分的可视化元素。本申请实施例中图符包括而不限于矩形、圆、弧、曲线、文字、路径、区域等7种类型。图符包含一种或多种视觉通道。图符包含的视觉通道包括而不限于颜色、面积、高、宽等。图符包含的视觉通道能够与数据的属性进行绑定，通过视觉通道能直观地对数据的属性进行展示。
下面对本申请实施例提供的基于上述图形语法的构建界面举例说明。
本申请实施例设计了一个基于上述图形语法的针对嵌套式图表的可视化构建界面。该构建界面以低代码构建为技术构思，允许用户通过拖拽、选取、输入的交互方式从零搭建完整的嵌套类图表。同时，该界面包括代码界面和图形语法解析器，用户直接输入的代码可以通过解析器解析并反馈到交互构建过程中，从而允许用户输入构建好的代码，通过交互进行二次开发。如此，摆脱了编写代码的搭建局限，采用更加直观的交互方式构建嵌套类图表，并在搭建过程中直观展示嵌套类图表的结果及其对应用户操作的变化。
为了便于理解，首先介绍本申请实施例中构建界面整体的逻辑功能架构，再结合一个具体的界面为例说明构建界面中各个组件的功能。
请参考附图5，附图5出了可视化组件的构建界面的逻辑架构。该构建界面的架构包括交互模块501、代码模块502和绘制模块503，下面对这几个模块分别具体介绍。
(1)交互模块501
交互模块501通过建立构建界面中组件和图形元素之间的映射关系，为用户提供了拖拽定义可视化图表结构的能力。交互模块501包括下述交互构建视图和下述属性视图。
(2)代码模块502
代码模块502用于展示图表的生成代码。本申请实施例为每种可视化元素(如图表、图符等)预定义了基于图形语法的通用生成代码模板，计算设备会根据用户在交互模块501中的操作生成相应的代码并同步展示在代码模块502中，便于代码导出和二次开发。同时代码模块502包含了图形语法解析器，代码模块502能通过图形语法解析器从已生成的代码中提取代码结构，从而同步反馈到交互构建视图的元素结构中。图形语法解析器的存在打通了交互模块501和代码模块502的通道，为用户提供了自由使用交互方式和代码方式搭建图表的能力。
(3)绘制模块503
绘制模块503用于输出本申请实施例提供的可视化组件构建界面。绘制模块503具体用于展示可视化视图的生成代码运行后的实际渲染效果。绘制模块503与代码模块502是联动的，当用户对代码进行修改后，绘制模块503会根据修改后的代码重新绘制并展示图表，从而将代码的修改实时同步反映到绘制模块的图表样式上，便于用户交互式的调整图表参数和嵌套逻辑。
请参考附图9，附图9是本申请实施例提供的可视化视图的构建界面60的示意图。该构建界面60包括数据视图601、交互构建视图602、层次视图603、属性视图604、构建结果展示区域605以及代码区域606。下面，对构建界面60中各个组件的功能、使用者如何应用构建界面各个组件进行举例说明。
(1)数据视图601
数据视图601用于展示导入的待可视化的数据。数据视图601中展示的数据包括至少一个属性以及每个属性的值。例如，请参考附图9，在构建城市天气数据的可视化图表的应用场景下，用户将城市天气数据导入计算设备，计算设备在数据视图601中展示城市天气数据。其中，城市天气数据包括日期、地点、温度、降雨、风速这5个属性，城市A的城市天气数据中日期这一属性的值为5月1日，温度这一属性的值为28度。
(2)交互构建视图602
交互构建视图602用于供用户向可视化视图中创建图表。交互构建视图602允许用户指定图表中的图符种类、图表之间的嵌套关系、图表结构等。例如，附图9中交互构建视图602包含创建的一组矩形图符，附图11中交互构建视图602包含创建的两组矩形图符和一组圆形图符。
(3)层次视图603
层次视图603用于展示图表的层次结构图。层级结构图用于表示图表中包含的每个图符(子图表)。逻辑上处于不同层次的图表在层次结构图中具有不同的高度。例如，在执行附图2所示方法时，层次视图603用于展示第一图表的层次结构图，层次结构图中第二图表位于第一图表的下层。通过层次视图603的设计，能直观的展示当前构建中图表的层级结构，将图表层级结构通过界面传递给用户。
在一些实施例中，得益于图表封装的语法结构，本实施例提供的构建界面允许用户拖拽交换同类元素从属关系，进而改变图表的结构。例如参考附图6，附图6示出了交换父图表与子图表关系的示意图。用户在层次视图603中使用鼠标拖拽交换两个图表的位置关系。计算设备接收用户的拖拽交换操作，内部用于存储图表结构的对象就会相应改变，然后代码模块就会重新生成对应的代码，将原本的嵌套图表以子图表的样式作为布局，并填充父图表作为内容，同时交换图表之间的父子关系。通过这种方式，很大程度上避免了用户因修改顶层结构导致了重复改代码的工作，极大的提高了图表结构修改的效率。
(4)属性视图604
属性视图604用于供用户配置可视化元素的视觉属性(如颜色、尺寸等)，从而分割图表结构搭建和视觉内容填充，让用户的构建过程更加清晰。属性视图604包括多种输入组件。例如，请参考附图9，属性视图604包括用于输入图表名称的组件6041、用于输入图符类型的组件6042、用于输入X轴数据的组件6043和用于输入Y轴数据的组件6044。
在一些实施例中，属性视图604中，针对不同类型的参数提供了以下输入组件(a)至(f)。
组件(a)文本输入框：用于名称、等文本类型参数输入。
组件(b)数字输入框：用于高度、宽度、字号、线宽等数字类型参数输入。
组件(c)下拉框：用于枚举类型参数输入。
组件(d)颜色选择框：用于颜色输入。
组件(e)单选框：用于可选参数输入。
组件(f)组合式文本输入框：用于范围、边距等包含多个值的参数输入。
同时，考虑到颜色、尺寸等参数可能为非固定值的场景，当计算设备接收到对属性视图604数字输入框或颜色选择框的输入操作时，会根据向数字输入框或颜色选择框输入的内容的类型进行判断。如果向数字输入框输入的内容为有效数字，则使用输入的内容的格式作为配置结果；如果向数字输入框输入的内容不为有效数字，则使用字符串格式；如果向颜色选 择框输入的内容为有效颜色，则使用输入的内容的格式作为配置结果；如果向颜色选择框输入的内容不为有效颜色，则使用字符串格式；由此保证用户能够自由定义输入内容。
(5)构建结果展示区域605
构建结果展示区域605用于呈现可视化视图的构建结果。绘制模块503绘制的可视化视图6051会在构建结果展示区域605中展示。在一些实施例中，构建结果展示区域605包括导出控件6052，当用户对导出控件6052触发操作时，计算设备将构建的可视化视图以图片、文件或者其他形式输出至目标位置。
(6)代码区域606
代码区域606用于对生成可视化视图的代码进行展示。在一些实施例中，代码区域606包括导出控件6062和运行控件6061。导出控件6062用于触发代码导出指令。当用户对导出控件6062触发操作时，计算设备响应于代码导出指令，将代码区域606中的代码输出至目标位置。运行控件6061用于触发代码运行指令。当用户对运行控件6061触发操作时，计算设备响应于代码运行指令，运行在代码区域606中输入的代码。
通过可视化组件构建界面，用户在搭建附图3所示图表结构时，便能够通过交互的方式进行，用户通过拖拽即可完成对象创建以及参数配置的步骤，进一步简化了搭建流程。
在一些实施例中，上述构建界面支持选择性显隐其他未操作的图表的功能。在构建包含多个图表的视图时，界面中可以只显示正在编辑中的图表。例如，在执行附图2所示方法时，计算设备响应于对第一图表的隐藏指令，提供第一图表处于隐藏状态的可视化视图；或者，响应于对第二图表的隐藏指令，提供第二图表处于隐藏状态的可视化视图。
例如，请参考附图7，附图7中的(a)示出了父图表处于隐藏状态、子图表处于显示状态下的界面，附图7中的(b)示出了父图表和子图表均处于显示状态下的界面。在父图表没有处于隐藏状态的情况下，如附图7中的(b)所示，界面中不仅会展示父图表(坐标轴、图符)，又会展示子图表(坐标轴、图符)。在父图表处于隐藏状态的情况下，如附图7中的(a)所示，界面中会隐藏父图表(坐标轴、图符)，展示子图表(坐标轴、图符)。
通过这种方式，有助于节省界面展示空间，在有限的空间内更加高效的搭建嵌套类图表。同时，这种操作符合图表封装的逻辑思想，避免了多个图表同时展示在交互区域所带来的视觉混乱和错误操作。
在一些实施例中，本申请实施例支持在一个统一的构建界面中，灵活使用代码构建和交互构建这两种构建方式搭建图表，从而解决了相关技术中代码构建和交互构建只能选择一项使用的技术问题，下面对代码构建相关的实现方式举例说明。
在一些实施例中，计算设备会在构建界面中展示用于生成可视化视图的程序代码。例如，请参考附图9，构建界面60包括代码区域606，代码区域606用于对生成可视化视图的第一代码进行展示。计算设备在构建界面60中展示可视化视图6051的同时，在代码区域606中展示可视化视图6051的生成代码。通过这种方式，将构建好的可视化视图以及可视化视图的生成代码通过同一个界面返回给用户，方便用户同步查看可视化视图的效果以及代码。
构建界面中展示的第一代码的来源包括很多种情况，下面结合两种情况举例说明。
情况一、构建界面中展示的第一代码是采用交互的方式构建可视化视图的过程中，根据 用户对界面组件的操作生成的代码。
例如，请参考附图9，第一代码是基于交互构建视图602或者属性视图604上触发的、对元素属性的设定操作而生成的代码。第一代码表示为可视化元素设定的视觉编码。例如，用户在属性视图604中字体输入框(附图9未示出)中选择宋体作为文本图符的字体，第一代码表示将文本图符的字体设定为宋体。
情况二、构建界面中展示的第一代码是采用代码的方式构建可视化视图的过程中，用户输入的代码。例如，请参考附图9，第一代码是对构建界面中代码区域606中输入的代码。
在一些实施例中，上述构建界面支持导出可视化视图的生成代码的功能。例如，请参考附图9，上述构建界面中的代码区域606包括导出控件6062，用户对导出控件6062进行点击或其他操作，触发代码导出指令。计算设备响应于代码导出指令，将代码区域606中第一代码输出至目标位置。代码导出指令用于指示导出代码区域606中的第一代码。该目标位置用于保存导出的可视化视图6051的生成代码。该目标位置包括而不限于默认位置或者用户设定的位置。该目标位置包括而不限于计算设备本地的存储位置或者为云端的存储位置。通过导出代码的功能，方便用户修改代码进行二次开发，也支持用户将代码拷贝到其他项目中来部署复杂可视化视图。
在一些实施例中，上述构建界面支持输入可视化视图的生成代码的功能。例如，上述构建界面60中的代码区域606包含输入组件，能够接收用户的输入。用户在构建界面60中代码区域606输入第二代码，触发代码运行指令。计算设备响应于代码运行指令，通过运行在构建界面中代码区域606中输入的第二代码，对可视化视图进行调整，在构建界面60中提供调整后的可视化视图。其中，代码运行指令指示运行构建界面中输入的代码。示例性地，请参考附图9，构建界面60中代码区域606包括运行控件6061，代码运行指令通过对运行控件6061的操作触发。通过这种方式，用户输入的代码能反馈到交互构建过程中，从而支持用户通过输入代码来调整可视化视图。
在一些实施例中，计算设备会随着用户对可视化元素的属性设定操作，同步更新构建界面中展示的代码。例如，计算设备响应于构建界面上触发的对可视化视图中可视化元素的属性设定操作，获取属性设定操作对应的第三代码；将第三代码增加至构建界面中的代码区域。可选地，该属性设定操作为对第一图表(父图表)的属性设定操作，第三代码表示将第一图表(父图表)的属性配置为设定值。或者，可选地，该属性设定操作为对第二图表(子图表)的属性设定操作，第三代码表示将第二图表(子图表)的属性配置为设定值。
通过这种方式，在用户交互构建可视化视图的场景下，每当用户执行一次操作时，界面中展示的代码能够跟随用户的操作而实时更新，从而将用户本次操作产生的代码更及时地反馈给用户，便于用户交互式的调整图表参数和嵌套逻辑，进一步提高可视化视图的构建效率。
下面，对本申请实施例提供的复杂嵌套类型图表搭建逻辑进行介绍。以下介绍的父图表是附图2所示方法中的第一图表。以下介绍的子图表是附图2所示方法中的第二图表。以下介绍的子图表中的图表图符是附图2所示方法中的第三图表。
附图3示出了本实施例提供的一种嵌套图表。附图4示出了基于本实施例提供的图形语 法构建的附图3的图表的逻辑层级结构。如附图3和附图4所示，将复杂的嵌套图表拆解为图表40、图表4032等多个图表的组合。图表40(父图表)的坐标轴包括类别为线性坐标轴的X坐标轴401、类别为线性坐标轴的Y坐标轴402。图表40绑定了图符403。图符403是一个类型为图表的对象，图符403包含文本4031、图表4032。图表4032包括类别是极坐标轴的X坐标轴40321、类别是类别坐标轴的Y坐标轴40322以及图符40323。图符40323包含矩形403231。
在使用代码搭建如附图3所示的嵌套图表时，按以下步骤(a)至步骤(e)自顶向下进行。
步骤(a)创建画布对象，绑定现有HTML元素，设定画布类型、宽度、高度、边距等参数。
步骤(b)调用画布对象的添加图表方法创建图表对象，使用绑定数据方法绑定数据。
步骤(c)分别创建X坐标轴对象和Y坐标轴对象，并调用图表提供的绑定方法与图表绑定，设定坐标轴的类型、定义域、值域等参数。
步骤(d)创建图符对象并与图表绑定，按照图符类型设定相关参数；添加嵌套图表时，将图符类型设为“图表”。
步骤(e)在图表图符对象对应的代码块内，按步骤(c)至步骤(e)添加坐标轴、图符或更深层图表嵌套。
在处理图表嵌套关系时，如附图4所示，复杂的图表拆解成简单图表的嵌套组合，再通过将子图表视为父图表的一种特殊图符，进行子图表的布局计算。子图表的样式则单独定义，用户在构建子图表的详细内容时不需要关心子图表在整体画布上的布局、旋转等计算过程，从而能够有更明确的结构逻辑关系。
下面结合一个实例，对应用上述构建界面对图表可视化的方法举例说明。
实例1
实例1包括步骤(a)至步骤(c)。
步骤(a)用户在本申请实施例提供的可视化组件构建界面中，通过鼠标拖拽将画布、图表拖入构建界面作为父图表，并为父图表添加坐标轴。用户修改父图表坐标轴类型、值域、范围等属性之后，计算设备通过本申请实施例提供的底层语法根据坐标轴属性自动求解图符的布局位置，无需额外计算工作。
如附图8所示，用户将父图表的X坐标轴的定义域设置为[0,2]，将父图表的Y坐标轴的定义域设置为[3,0]。设置定义域后，用户可以设置图表xy坐标为定义域中的整数来达到4*3的布局。计算机根据父图表的X坐标轴和Y坐标轴的定义域，确定整个绘制空间中图符按照4*3的网格进行布局。用户执行向父图表添加绑定图符的操作，添加文本类型的图符用于显示月份名称。计算设备按照定义的4*3网格，在界面中对月份进行排列。附图8中，Jan(一月)、Feb(二月)……Dec(十二月)为12个文本(text)类型、表示月份名称的图符。
步骤(b)用户为父图表添加图表图符(子图表)。计算设备将图表图符添加至界面中步骤(a)中求解的布局位置。
具体地，用户添加图表图符(子图表)后，设定图表图符的坐标轴分别为圆形类别坐标轴(圆形类别坐标轴是指将普通的类别坐标轴用以圆形排列)和线性坐标轴，然后添加矩形作为视觉通道并绑定相应数据。计算设备根据用户的设定，生成了如附图9所示的图表样式。 此时，每个子图都是一个独立的图表，并且按照步骤(a)中定义的布局进行排列。如果此时用户对父图表的坐标轴属性进行修改，计算设备会根据父图表修改后的属性重新确定每个子图表的位置，并更新界面中每个子图表的位置，使得所有的子图表能在保持图表相对位置不变的情况下更新位置。
例如，请参考附图9，附图9示出了添加子图表后图表嵌套效果，附图9展示了嵌套有12个子图表的效果。附图9中每一个子图表的具体结构请参考附图10。附图9中每个圆形是一个图表图符，圆形表示的图表图符60511中包含一组矩形图符605111。这一组矩形图符605111中的每个矩形均是图表60511绑定的图符。每个圆形表示的图表60511均是图表6051绑定的图符。
通过设置了图表图符坐标轴为圆形类别坐标轴和线性坐标轴后，从而产生附图9或附图10所示的样式。附图9所示的界面中X轴数据表示图符位置的x坐标，附图9所示的界面中Y轴数据表示图符位置的y坐标，X轴数据和Y轴数据一般通过绑定数据指定。例如，用户将数据的某个字段设置给x或者y数据这个属性，作为图符x坐标或y坐标，从而实现X轴数据和Y轴数据的设定。
步骤(c)用户根据实际业务要求填充子图表内容。用户通过交互视图或代码视图为子图表添加矩形、圆等图符并设定颜色映射，计算设备即可生成附图11展示嵌套图表的最终效果。其中，附图11为灰度图，附图11中不同灰度表示数据的不同值。
总结上述实施例来看，本申请实施例对构建多图表组合的过程做了封装。不同于简单的API叠加，本申请实施例采用了一种更加可解释的表达方式，即将子图表作为“图符”应用到“图表嵌套”的结构中。借助这种方式，原本复杂的可视化视图能以简单图表的嵌套组合构建得到，更加有利于用户梳理图表结构逻辑，降低使用门槛。
除此之外，本申请实施例还搭建了一个可视化构建界面用于交互式搭建嵌套式图表。可视化构建界面以低代码为理念进行设计，同时整合图形语法解析器，从而允许用户使用代码交互合一的方式进行嵌套类图表的开发搭建工作。针对每种图表搭建的通用流程步骤，该界面预定义了相应的代码模板，用户只需要通过简单的拖拽交互，即可生成基本图表，大大简化了从零搭建的繁琐流程。
下面，对本申请实施例解决技术问题的一些原理进行具体分析。
针对每个图表都要单独计算位置，并手动叠加到每个可视化元素与位置相关的属性上，过程繁琐复杂的技术问题来说，本申请实施例通过定义坐标轴定义了数据坐标到画布位置的映射规则，这样根据每个图表绑定的数据，就可以批量得出每个图表的位置，而不需要为每个图表单独计算位置，从而解决了这一问题。
针对开发复杂图表的效率高度依赖用户对可视化设计的理解、对API的熟悉程度和编码能力的问题来说，本申请实施例预先定义了多种坐标轴类型，能涵盖很多常见图表布局，所以不需要用户额外定义，从而解决了这一问题。
针对不易于代码开发和调试的技术问题来说，本申请实施例由于对元素做了抽象，比如坐标轴、图符等，所以各个图符添加后就作为一个整体加到图表上，用户只要把相关属性指定好，计算设备就能在画布上显示嵌套图表。同时，通过本申请实施例的可视构建界面，每当用户修改一个参数，计算设备就会同步作用于显示模块的图表上，这样更加直观显示了每 一步操作对图表的影响。
附图12是本申请实施例提供的一种可视化视图的构建装置的结构示意图，附图12所示的可视化视图的构建装置900用于实施上述各个方法实施例提供的可视化视图的构建方法。
可选地，结合附图1所示的应用场景来看，附图12所示的可视化视图的构建装置900是附图1中的终端10或服务器11。
可选地，结合附图2来看，附图12所示的可视化视图的构建装置900是附图2所示方法流程中的计算设备。
可视化视图的构建装置900包括通信模块901、布局计算模块902和视图生成模块903。通信模块901用于支持可视化视图的构建装置900执行S201和S204。布局计算模块902用于支持可视化视图的构建装置900执行S202。视图生成模块903用于支持可视化视图的构建装置900执行S203。
可选地，结合附图5来看，附图12所示的可视化视图的构建装置900中通信模块901包括附图5中交互模块501，附图12所示的可视化视图的构建装置900中布局计算模块902包括附图5中代码模块502，附图12所示的可视化视图的构建装置900中视图生成模块903包括附图5中绘制模块503。
可选地，可视化视图的构建装置900还包括代码获取模块，代码获取模块用于支持可视化视图的构建装置900获取属性设定操作对应的代码。可选地，代码获取模块包括附图5中代码模块502。
附图12所描述的装置实施例仅仅是示意性的，例如，上述功能模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个功能模块或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。在本申请各个实施例中的各功能模块可以集成在一个处理功能模块中，也可以是各个功能模块单独物理存在，也可以两个或两个以上功能模块集成在一个功能模块中。
可视化视图的构建装置900中的各个功能模块全部或部分地通过软件、硬件、固件或者其任意组合来实现。
在采用软件实现的情况下，例如，上述布局计算模块902和视图生成模块903是由附图13中的至少一个处理器801读取存储器802中存储的程序代码后，生成的软件功能模块来实现。
在采用硬件实现的情况下，例如，附图12中上述各个功能模块由计算设备中的不同硬件分别实现，例如，通信模块901例如由附图13中的网络接口803或输入输出接口806中至少一项实现。布局计算模块902由附图13中的至少一个处理器801中的一部分处理资源(例如多核处理器中的一个核或两个核)实现，而视图生成模块903由附图13中至少一个处理器801中的其余部分处理资源(例如多核处理器中的其他核)，或者采用现场可编程门阵列(field－programmable gate array，FPGA)、或协处理器等可编程器件来完成。
在采用软件硬件相结合的方式来实现的情况下，例如，附图12中通信模块901由硬件可编程器件实现，而附图12中布局计算模块902是由CPU读取存储器中存储的程序代码后，生成的软件功能模块。
下面对计算设备的基本硬件结构举例说明。
附图13是本申请实施例提供的一种计算设备的结构示意图，附图13所示的计算设备800用于实施上述各个方法实施例提供的可视化视图的构建方法。
可选地，结合附图1所示的应用场景来看，附图13所示的计算设备800是附图1中的终端10或服务器11。
可选地，结合附图2来看，附图13所示的计算设备800是附图2所示方法流程中的计算设备。
可选地，结合附图5来看，附图13所示的计算设备800包括附图5所示的交互模块501、代码模块502和绘制模块503。
计算设备800包括至少一个处理器801、存储器802以及至少一个网络接口803。
处理器801例如是通用中央处理器(central processing unit，CPU)、网络处理器(network processer，NP)、图形处理器(graphics processing unit，GPU)、神经网络处理器(neural-network processing units，NPU)、数据处理单元(data processing unit，DPU)、微处理器或者一个或多个用于实现本申请方案的集成电路。例如，处理器801包括专用集成电路(application-specific integrated circuit，ASIC)，可编程逻辑器件(programmable logic device，PLD)或其组合。PLD例如是复杂可编程逻辑器件(complex programmable logic device，CPLD)、现场可编程逻辑门阵列(field-programmable gate array，FPGA)、通用阵列逻辑(generic array logic，GAL)或其任意组合。
存储器802例如是只读存储器(read-only memory，ROM)或可存储静态信息和指令的其它类型的静态存储设备，又如是随机存取存储器(random access memory，RAM)或者可存储信息和指令的其它类型的动态存储设备，又如是电可擦可编程只读存储器(electrically erasable programmable read-only Memory，EEPROM)、只读光盘(compact disc read-only memory，CD-ROM)或其它光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其它磁存储设备，或者是能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其它介质，但不限于此。可选地，存储器802独立存在，并通过内部连接804与处理器801相连接。或者，可选地存储器802和处理器801集成在一起。
网络接口803使用任何收发器一类的装置，用于与其它设备或通信网络通信。网络接口803例如包括有线网络接口或者无线网络接口中的至少一项。其中，有线网络接口例如为以太网接口。以太网接口例如是光接口，电接口或其组合。无线网络接口例如为无线局域网(wireless local area networks，WLAN)接口，蜂窝网络网络接口或其组合等。
在一些实施例中，处理器801包括一个或多个CPU，如附图13中所示的CPU0和CPU1。
在一些实施例中，计算设备800可选地包括多个处理器，如附图13中所示的处理器801和处理器805。这些处理器中的每一个例如是一个单核处理器(single-CPU)，又如是一个多核处理器(multi-CPU)。这里的处理器可选地指一个或多个设备、电路、和/或用于处理数据(如计算机程序指令)的处理核。
在一些实施例中，计算设备800还包括内部连接804。处理器801、存储器802以及至少一个网络接口803通过内部连接804连接。内部连接804包括通路，在上述组件之间传送信 息。可选地，内部连接804是单板或总线。可选地，内部连接804分为地址总线、数据总线、控制总线等。
在一些实施例中，计算设备800还包括输入输出接口806。输入输出接口806连接到内部连接804上。
在一些实施例中，输入输出接口806用于与输入设备连接，接收用户通过输入设备输入的上述附图2所示方法涉及的命令或数据，例如构建请求、坐标轴属性、用于生成可视化视图的代码、图表之间的嵌套关系、图符种类、图表或图符的参数。输入设备包括但不限于键盘、触摸屏、麦克风、鼠标或传感设备等。
在一些实施例中，输入输出接口806还用于与输出设备连接。输入输出接口806通过输出设备输出处理器301执行上述附图2所示方法产生的中间结果和/或最终结果，例如可视化视图、用于生成可视化视图的代码、根据对可视化视图的配置操作产生的代码、构建界面。输出设备包括但不限于显示器、打印机、投影仪等等。在一个可选地实施例中，输入输出接口806将可视化视图输出至显示器，显示器显示可视化视图。
可选地，处理器801通过读取存储器802中保存的程序代码810实现上述实施例中的方法，或者，处理器801通过内部存储的程序代码实现上述实施例中的方法。在处理器801通过读取存储器802中保存的程序代码810实现上述实施例中的方法的情况下，存储器802中保存实现本申请实施例提供的可视化视图的构建方法的程序代码。
处理器801实现上述功能的更多细节请参考前面各个方法实施例中的描述，在这里不再重复。
本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分可互相参考，每个实施例重点说明的都是与其他实施例的不同之处。
A参考B，指的是A与B相同或者A为B的简单变形。
本申请实施例的说明书和权利要求书中的术语“第一”和“第二”等是用于区别不同的对象，而不是用于描述对象的特定顺序，也不能理解为指示或暗示相对重要性。例如，第一图表和第二图表用于区别不同的图表，而不是用于描述图表的特定顺序，也不能理解为第一图表比第二图表更重要。
本申请实施例，除非另有说明，“至少一个”的含义是指一个或多个，“多个”的含义是指两个或两个以上。例如，多个图表是指两个或两个以上的图表。
上述实施例可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本申请实施例描述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如， 软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘Solid State Disk(SSD))等。
以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。

Claims (27)

  1. 一种可视化视图的构建方法，其特征在于，所述方法包括：
    接收构建请求，所述构建请求指示构建第一图表的可视化视图，所述第一图表绑定的图符包括第二图表；
    根据所述第一图表的坐标轴属性，获取所述第二图表的第一布局参数；
    根据所述第一布局参数，获取所述第一图表的可视化视图，所述可视化视图包括所述第一图表和所述第二图表，所述可视化视图中所述第二图表按照所述第一布局参数排列；
    提供所述可视化视图。
  2. 根据权利要求1所述的方法，其特征在于，所述根据所述第一图表的坐标轴属性，获取所述第二图表的第一布局参数，包括：
    根据所述第一图表的坐标轴属性，获取所述第二图表的基准布局参数；
    对所述基准布局参数进行调整，得到所述第一布局参数。
  3. 根据权利要求2所述的方法，其特征在于，所述对所述基准布局参数进行调整，得到所述第一布局参数，包括：
    根据所述第二图表的位置坐标、位移或角度，对所述基准布局参数进行调整，得到所述第一布局参数；或者，
    根据所述第一图表的力引导属性，对所述基准布局参数进行调整，得到所述第一布局参数。
  4. 根据权利要求1至3中任一项所述的方法，其特征在于，所述第二图表绑定的图符包括第三图表，所述根据所述第一布局参数，获取所述第一图表的可视化视图，包括：
    根据所述第三图表在所述第二图表中的位置和所述第二图表在所述第一图表中的位置，获取所述第三图表在所述可视化视图中的位置。
  5. 根据权利要求1至4中任一项所述的方法，其特征在于，所述方法还包括：
    响应于第一更新指令，对所述第一图表的坐标轴属性进行更新；
    根据所述第一图表更新后的坐标轴属性，获取所述第二图表的第二布局参数；
    根据所述第二布局参数，对所述可视化视图中所述第二图表的布局进行更新。
  6. 根据权利要求1至5中任一项所述的方法，其特征在于，所述方法还包括：
    响应于关系互换指令，根据所述第二图表的坐标轴属性，获取第三布局参数，所述关系互换指令指示对所述第一图表与所述第二图表的父子关系互换；
    根据所述第三布局参数对所述可视化视图进行更新，更新后的可视化视图中所述第一图表按照所述第三布局参数排列。
  7. 根据权利要求1至6中任一项所述的方法，其特征在于，所述方法还包括：
    响应于第二更新指令，获取所述第二图表更新后的位置坐标；
    根据所述第二图表更新后的位置坐标，对所述可视化视图进行更新。
  8. 根据权利要求1至7中任一项所述的方法，其特征在于，所述提供所述可视化视图，包括：
    提供构建界面，所述构建界面包括所述可视化视图和代码区域，所述代码区域用于对生成所述可视化视图的第一代码进行展示。
  9. 根据权利要求8所述的方法，其特征在于，所述方法还包括：
    响应于代码导出指令，将所述代码区域中所述第一代码输出至目标位置。
  10. 根据权利要求8或9所述的方法，其特征在于，所述方法还包括：
    响应于代码运行指令，通过运行在所述代码区域中输入的第二代码，对所述可视化视图进行调整。
  11. 根据权利要求8至10中任一项所述的方法，其特征在于，所述方法还包括：
    响应于所述构建界面上触发的对所述可视化视图的属性设定操作，获取所述属性设定操作对应的第三代码；
    将所述第三代码增加至所述构建界面中的所述代码区域。
  12. 根据权利要求8至11中任一项所述的方法，其特征在于，所述构建界面还包括层次视图，所述层次视图用于展示所述第一图表的层次结构图，所述层次结构图中所述第二图表位于所述第一图表的下层。
  13. 根据权利要求1至12中任一项所述的方法，其特征在于，所述提供所述可视化视图，包括：
    响应于对所述第一图表的隐藏指令，提供所述第一图表处于隐藏状态的可视化视图；或者，
    响应于对所述第二图表的隐藏指令，提供所述第二图表处于隐藏状态的可视化视图。
  14. 根据权利要求1至13中任一项所述的方法，其特征在于，所述提供所述可视化视图，包括：
    向所述构建请求的发起方发送所述可视化视图的内容；或者，
    在构建界面中显示所述可视化视图。
  15. 一种可视化视图的构建装置，其特征在于，所述可视化视图的构建装置包括：
    通信模块，用于接收构建请求，所述构建请求指示构建第一图表的可视化视图，所述第 一图表绑定的图符包括第二图表；
    布局计算模块，用于根据所述第一图表的坐标轴属性，获取所述第二图表的第一布局参数；
    视图生成模块，用于根据所述第一布局参数，获取所述第一图表的可视化视图，所述可视化视图包括所述第一图表和所述第二图表，所述可视化视图中所述第二图表按照所述第一布局参数排列；
    所述通信模块，还用于提供所述可视化视图。
  16. 根据权利要求15所述的可视化视图的构建装置，其特征在于，所述布局计算模块，用于根据所述第一图表的坐标轴属性，获取所述第二图表的基准布局参数；对所述基准布局参数进行调整，得到所述第一布局参数。
  17. 根据权利要求16所述的可视化视图的构建装置，其特征在于，所述布局计算模块，用于根据所述第二图表的位置坐标、位移或角度，对所述基准布局参数进行调整，得到所述第一布局参数；或者，根据所述第一图表的力引导属性，对所述基准布局参数进行调整，得到所述第一布局参数。
  18. 根据权利要求15至17中任一项所述的可视化视图的构建装置，其特征在于，所述第二图表绑定的图符包括第三图表，所述布局计算模块，用于根据所述第三图表在所述第二图表中的位置和所述第二图表在所述第一图表中的位置，获取所述第三图表在所述可视化视图中的位置。
  19. 根据权利要求15至18中任一项所述的可视化视图的构建装置，其特征在于，所述布局计算模块，还用于响应于所述通信模块接收的第一更新指令，对所述第一图表的坐标轴属性进行更新；根据所述第一图表更新后的坐标轴属性，获取所述第二图表的第二布局参数；所述视图生成模块，还用于根据所述第二布局参数，对所述可视化视图中所述第二图表的布局进行更新。
  20. 根据权利要求15至19中任一项所述的可视化视图的构建装置，其特征在于，
    所述布局计算模块，还用于响应于所述通信模块接收的关系互换指令，根据所述第二图表的坐标轴属性，获取第三布局参数，所述关系互换指令指示对所述第一图表与所述第二图表的父子关系互换；
    所述视图生成模块还用于根据所述第三布局参数对所述可视化视图进行更新，更新后的可视化视图中所述第一图表按照所述第三布局参数排列。
  21. 根据权利要求15至20中任一项所述的可视化视图的构建装置，其特征在于，
    所述布局计算模块，还用于响应于所述通信模块接收的第二更新指令，获取所述第二图表更新后的位置坐标；
    所述视图生成模块还用于根据所述第二图表更新后的位置坐标，对所述可视化视图进行 更新。
  22. 根据权利要求15至21中任一项所述的可视化视图的构建装置，其特征在于，所述通信模块，用于提供所述视图生成模块生成的构建界面，所述构建界面包括所述可视化视图和代码区域，所述代码区域用于对生成所述可视化视图的第一代码进行展示。
  23. 根据权利要求22所述的可视化视图的构建装置，其特征在于，所述通信模块还用于响应于所述通信模块接收的代码导出指令，将所述代码区域中所述第一代码输出至目标位置。
  24. 根据权利要求22或23所述的可视化视图的构建装置，其特征在于，所述视图生成模块还用于响应于所述通信模块接收的代码运行指令，通过运行在所述代码区域中输入的第二代码，对所述可视化视图进行调整。
  25. 根据权利要求22至24中任一项所述的可视化视图的构建装置，其特征在于，所述装置还包括：代码获取模块，用于响应于所述构建界面上触发的对所述可视化视图的属性设定操作，获取所述属性设定操作对应的第三代码；
    所述视图生成模块还用于将所述第三代码增加至所述构建界面中的所述代码区域。
  26. 一种计算设备，其特征在于，所述计算设备包括处理器和存储器，其中：
    所述存储器中存储有计算机指令；
    所述处理器执行所述计算机指令，以实现所述权利要求1至14中任一项权利要求所述的方法。
  27. 一种计算机可读存储介质，其特征在于，所述存储介质中存储有至少一条指令，所述指令在计算机上运行时，使得计算机执行如权利要求1至权利要求14中任一项所述的方法。
PCT/CN2022/087676 2021-04-26 2022-04-19 可视化视图的构建方法及装置 WO2022228209A1 (zh)

Applications Claiming Priority (2)

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

Publications (1)

Publication Number Publication Date
WO2022228209A1 true WO2022228209A1 (zh) 2022-11-03

Family

ID=83696911

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2022/087676 WO2022228209A1 (zh) 2021-04-26 2022-04-19 可视化视图的构建方法及装置

Country Status (2)

Country Link
CN (1) CN115249285A (zh)
WO (1) WO2022228209A1 (zh)

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20150161079A1 (en) * 2013-01-30 2015-06-11 David GROSFELD File formats and methods for representing documents
US20170132814A1 (en) * 2015-11-10 2017-05-11 Adobe Systems Incorporated Interactive Scene Graph Manipulation For Visualization Authoring
US20190004675A1 (en) * 2017-06-29 2019-01-03 Microsoft Technology Licensing, Llc Flexible layout for calendars
CN110853117A (zh) * 2019-11-20 2020-02-28 深圳前海微众银行股份有限公司 图表绘制方法、装置、设备及存储介质
CN111914017A (zh) * 2020-08-13 2020-11-10 闻泰通讯股份有限公司 可视化图表操作方法、装置、电子设备和存储介质

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20150161079A1 (en) * 2013-01-30 2015-06-11 David GROSFELD File formats and methods for representing documents
US20170132814A1 (en) * 2015-11-10 2017-05-11 Adobe Systems Incorporated Interactive Scene Graph Manipulation For Visualization Authoring
US20190004675A1 (en) * 2017-06-29 2019-01-03 Microsoft Technology Licensing, Llc Flexible layout for calendars
CN110853117A (zh) * 2019-11-20 2020-02-28 深圳前海微众银行股份有限公司 图表绘制方法、装置、设备及存储介质
CN111914017A (zh) * 2020-08-13 2020-11-10 闻泰通讯股份有限公司 可视化图表操作方法、装置、电子设备和存储介质

Also Published As

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

Similar Documents

Publication Publication Date Title
US11640492B2 (en) System and method providing responsive editing and viewing, integrating hierarchical fluid components and dynamic layout
US10254848B2 (en) Cross-platform data visualizations using common descriptions
US10706599B2 (en) Recursive cell-based hierarchy for data visualizations
US7463263B2 (en) Declarative specification of model visualizations
CN111475163A (zh) 视图模板的代码文件生成方法、装置、设备及存储介质
US11327926B2 (en) Effective deployment of spreadsheets in browser environments
US9905034B2 (en) Secure isolation of scripting from native graphic rendering of animated data visualizations
US11194450B2 (en) Definition of a graphical user interface dashboard created with manually input code and user selections
JP7203767B2 (ja) ウェブサイトコンポーネント相互間におけるスマートインタラクションのためのシステム及び方法
US11645229B2 (en) Mapping tests of spreadsheets in server-browser environments
WO2022228211A1 (zh) 可视化视图的构建方法及装置
WO2022228209A1 (zh) 可视化视图的构建方法及装置
US10529100B2 (en) Interaction-driven format for graph visualization
CN114548056A (zh) 富文本编辑方法、装置及设备
KR101456507B1 (ko) Ｎ-스크린 적용을 위한 웹 어플리케이션 ｕｉ 저작 장치 및 그 저작 방법
KR102646777B1 (ko) 멀티 기기용 반응형 페이지를 위한 그리드 레이아웃 설정 방법 및 이를 수행하는 프로그램
CN114860223B (zh) 交互编辑框架、交互对象的生成方法和电子设备
Hynek et al. Towards Interactive Geovisualization Authoring Toolkit for Industry Use Cases
CN115730113A (zh) 图表显示方法、装置、设备及介质
Yao et al. PowerHierarchy: visualization approach of hierarchical data via power diagram
CN117539483A (zh) 界面布局方法、装置、电子设备和计算机可读存储介质
CN113778411A (zh) 图形化编程方法及应用设备
CN117724715A (zh) 数据动态效果的实现方法、装置、电子设备及存储介质
CN115686692A (zh) 桌面组件的渲染方法及系统、电子设备及存储介质
CN117539575A (zh) 一种扩展展示资产视图的方法及系统

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: 22794680

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: 22794680

Country of ref document: EP

Kind code of ref document: A1