CN113177171A - Chart display method and device, terminal device and storage medium - Google Patents
Chart display method and device, terminal device and storage medium Download PDFInfo
- Publication number
- CN113177171A CN113177171A CN202110414142.2A CN202110414142A CN113177171A CN 113177171 A CN113177171 A CN 113177171A CN 202110414142 A CN202110414142 A CN 202110414142A CN 113177171 A CN113177171 A CN 113177171A
- Authority
- CN
- China
- Prior art keywords
- chart
- target
- information
- configuration information
- graph
- Prior art date
- Legal status (The legal status 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 status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 51
- 238000003860 storage Methods 0.000 title claims abstract description 10
- 238000009877 rendering Methods 0.000 claims abstract description 79
- 238000010586 diagram Methods 0.000 claims description 26
- 238000012800 visualization Methods 0.000 claims description 15
- 238000004590 computer program Methods 0.000 claims description 8
- 238000012986 modification Methods 0.000 claims description 6
- 230000004048 modification Effects 0.000 claims description 6
- 230000004044 response Effects 0.000 claims description 6
- 238000012790 confirmation Methods 0.000 claims description 4
- 238000011161 development Methods 0.000 abstract description 4
- 230000006870 function Effects 0.000 description 8
- 230000000007 visual effect Effects 0.000 description 7
- 238000004364 calculation method Methods 0.000 description 2
- 239000000470 constituent Substances 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000002452 interceptive effect Effects 0.000 description 2
- 230000001360 synchronised effect Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000013079 data visualisation Methods 0.000 description 1
- 230000001419 dependent effect Effects 0.000 description 1
- 238000001914 filtration Methods 0.000 description 1
- 238000009434 installation Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000003825 pressing Methods 0.000 description 1
- 230000008569 process Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 230000000644 propagated effect Effects 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Abstract
The embodiment of the application provides a graph display method and device, terminal equipment and a storage medium, and relates to the technical field of program development. The method comprises the following steps: receiving chart configuration information, wherein the chart configuration information is used for generating a target chart; generating a target chart based on chart configuration information by adopting a rendering engine in a target client of a network service platform; the network service platform corresponds to different types of clients according to different display modes, a rendering engine in the target client is matched with the type of the target client, and graphs generated based on graph configuration information are the same in the different types of clients of the network service platform; the target graph is displayed. According to the technical scheme provided by the embodiment of the application, the development cost required for displaying the same chart in different types of clients can be reduced.
Description
Technical Field
The embodiment of the application relates to the technical field of program development, in particular to a chart display method and device, a terminal device and a storage medium.
Background
With the development of computer and internet technologies, a network service platform corresponds to a plurality of types of clients for displaying information provided by the network service platform.
In the related art, in order to display the same graph in different types of clients of a network service platform, related technical personnel need to respectively develop corresponding program codes based on content information to be displayed in the graph and according to the type of each client, and respectively send different program codes to the clients of the corresponding type to operate.
In the above technology, each time the same chart needs to be displayed in different types of clients, multiple sets of program codes need to be developed according to the types of the clients, and the development cost is high.
Disclosure of Invention
The embodiment of the application provides a graph display method and device, terminal equipment and a storage medium, which can reduce the development cost required for displaying the same graph in different types of clients. The technical scheme is as follows:
according to an aspect of an embodiment of the present application, there is provided a chart display method including:
receiving chart configuration information, wherein the chart configuration information is used for generating a target chart;
generating the target diagram based on the diagram configuration information by adopting a rendering engine in a target client of a network service platform; the network service platform corresponds to different types of clients according to different display modes, a rendering engine in the target client is matched with the type of the target client, and the graphs generated based on the graph configuration information are the same in the different types of clients of the network service platform;
and displaying the target chart.
According to an aspect of an embodiment of the present application, there is provided a chart display method including:
acquiring content information, wherein the content information is used for indicating content to be displayed in a target chart;
generating chart configuration information based on the content information, the chart configuration information being used for generating the target chart;
sending the chart configuration information to a target client of a network service platform;
the network service platform corresponds to different types of clients according to different display modes, a rendering engine in the target client is matched with the type of the target client, and graphs generated based on the graph configuration information are the same in the different types of clients of the network service platform.
According to an aspect of an embodiment of the present application, there is provided a chart display apparatus including:
the information receiving module is used for receiving chart configuration information, and the chart configuration information is used for generating a target chart;
the chart generation module is used for generating the target chart based on the chart configuration information by adopting a rendering engine in a target client of a network service platform; the network service platform corresponds to different types of clients according to different display modes, a rendering engine in the target client is matched with the type of the target client, and the graphs generated based on the graph configuration information are the same in the different types of clients of the network service platform;
and the chart display module is used for displaying the target chart.
According to an aspect of an embodiment of the present application, there is provided a chart display apparatus including:
the information acquisition module is used for acquiring content information, and the content information is used for indicating the content to be displayed in the target chart;
an information generating module, configured to generate chart configuration information based on the content information, where the chart configuration information is used to generate the target chart;
the information sending module is used for sending the chart configuration information to a target client of a network service platform;
the network service platform corresponds to different types of clients according to different display modes, a rendering engine in the target client is matched with the type of the target client, and graphs generated based on the graph configuration information are the same in the different types of clients of the network service platform.
According to an aspect of the embodiments of the present application, there is provided a terminal device, the terminal device including a processor and a memory, the memory having stored therein a computer program, the computer program being loaded and executed by the processor to implement the graph display method described above.
According to an aspect of an embodiment of the present application, there is provided a computer program product loaded and executed by a processor to implement the graph display method described above.
The technical scheme provided by the embodiment of the application can have the following beneficial effects:
by arranging the rendering engines matched with the types of the clients in the different types of clients of the network service platform in advance, when the same chart needs to be displayed in the different types of clients, only one set of chart configuration information needs to be developed and sent to the different types of clients, and the clients directly display the corresponding target chart by adopting the matched rendering engines based on the chart configuration information, so that the same chart can be displayed in the different types of clients through the same chart configuration information.
It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the application.
Drawings
In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings needed to be used in the description of the embodiments are briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without creative efforts.
FIG. 1 is a schematic illustration of an implementation environment provided by one embodiment of the present application;
FIG. 2 is a flow chart of a graphical display method provided by one embodiment of the present application;
FIG. 3 is a flow chart diagram of a graphical display method provided by another embodiment of the present application;
FIG. 4 is a schematic illustration of a graphical display provided by one embodiment of the present application;
FIG. 5 is a flow chart diagram of a graphical display method provided by another embodiment of the present application;
FIG. 6 is a schematic view of a graphical display provided in accordance with one embodiment of the present application;
FIG. 7 is a flow chart diagram of a graphical display method provided by another embodiment of the present application;
FIG. 8 is a schematic diagram of an interface of a visualization engine provided by one embodiment of the present application;
FIG. 9 is a schematic diagram of an interface of a visualization engine provided in another embodiment of the present application;
FIG. 10 is a schematic diagram of an interface of a visualization engine provided in another embodiment of the present application;
FIG. 11 is a schematic view of a chart display apparatus provided in accordance with another embodiment of the present application;
FIG. 12 is a schematic view of a chart display apparatus provided in accordance with another embodiment of the present application;
FIG. 13 is a schematic view of a chart display apparatus provided in accordance with another embodiment of the present application;
fig. 14 is a schematic view of a graph display apparatus according to another embodiment of the present application.
Detailed Description
Reference will now be made in detail to the exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, like numbers in different drawings represent the same or similar elements unless otherwise indicated. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present application. Rather, they are merely examples of methods consistent with aspects of the present application, as detailed in the appended claims.
Referring to fig. 1, a schematic diagram of an implementation environment provided by an embodiment of the present application is shown, where the implementation environment may be implemented as a graphical display system. As shown in fig. 1, the system 10 may include: a first terminal 11 and a second terminal 12.
The first terminal 11 is installed and operated with a client of a target program corresponding to the network service platform. The target application may be any graphical display enabled application such as a social application, a payment application, a video application, a music application, a shopping application, a news application, a game application, and the like. In the graph display method provided in the embodiment of the application, the execution subject of each step may be the first terminal 11, such as a target client running in the first terminal 11. The second terminal 12 is used to generate and transmit chart configuration information. The terminal is an electronic device with data calculation, processing and storage capabilities. The terminal may be a smart phone, a tablet Computer, a PC (Personal Computer), a wearable device, and the like, which is not limited in this embodiment of the present application.
In some embodiments, the system 10 further includes a server 13 of the network service platform, the server 13 establishes communication connections (e.g., network connections) with the first terminal 11 and the second terminal 12, respectively, and the server 13 is configured to provide a background service for the target client. Optionally, the server 13 is configured to receive the chart configuration information sent by the second terminal 12, and send the chart configuration information to the first terminal 11. The server may be an independent physical server, a server cluster or a distributed system formed by a plurality of physical servers, or a cloud server providing cloud computing services.
The technical solution of the present application will be described below by means of several embodiments.
Referring to fig. 2, a flowchart of a chart display method according to an embodiment of the present application is shown. In the present embodiment, the method is mainly applied to the target client described above for illustration. The method comprises the following steps (201-203):
In some embodiments, the target client receives the graph configuration information from the second terminal (or a server of the network service platform). In some possible implementations, after receiving a chart display instruction (e.g., receiving a chart display operation of a user), the target client generates and sends a chart display request to a server of the network service platform, so that the server sends chart configuration information corresponding to the chart display request to the target client.
In some embodiments, this step 201 further comprises: and receiving page information, wherein the page information comprises chart configuration information and is used for generating a target page where a target chart is located. In some embodiments, the target graph needs to be displayed in, and is part of, the target page of the target client. Optionally, through the page information, the display position of the target diagram in the target page can be determined.
In some embodiments, the network service platform corresponds to different types of clients according to different display modes, a rendering engine in the target client is matched with the type of the target client, and the graphs generated based on the graph configuration information are the same in the different types of clients of the network service platform. Optionally, a rendering engine matching the type of the client exists in each type of client corresponding to the web service platform. And the rendering engine in the target client is used for rendering and generating a target chart which is correspondingly displayed in the target client by the chart configuration information.
In some embodiments, this step 202 further comprises: and displaying the target page based on the type of the target client and the page information. Optionally, a target page adapted to the type of the target client is displayed in the target client according to the page information. The target graph and other page elements (such as words and/or pictures for notational explanation of the target graph) outside the target graph are displayed in the target page.
In some embodiments, the target graph generated using step 202 above is displayed in the target client.
To sum up, in the technical solution provided in this application embodiment, by setting rendering engines matched with types of clients in different types of clients of a network service platform in advance, when the same graph needs to be displayed in the different types of clients, only one set of graph configuration information needs to be developed and sent to the different types of clients, and the clients directly display corresponding target graphs by using the matched rendering engines based on the graph configuration information, so that the same graph can be displayed in the different types of clients through the same graph configuration information.
In addition, in the embodiment of the application, because a set of chart configuration information can be synchronized to a plurality of clients by one key, the chart configuration efficiency is improved.
Referring to fig. 3, a flowchart of a chart display method according to another embodiment of the present application is shown. In the present embodiment, the method is mainly applied to the client described above for illustration. The method comprises the following steps (301-306):
in step 301, chart configuration information is received.
The content of step 301 is the same as or similar to that of step 201 in the embodiment of fig. 2, and is not described herein again.
And 302, under the condition that the target client is of the webpage type, rendering by adopting a first rendering engine matched with the webpage type based on the chart configuration information to generate a target chart.
In some embodiments, the target client is a web page type (e.g., HTML5(HyperText Markup Language5, HyperText 5.0)), and a first rendering engine matching the web page type is configured in the target client, and the first rendering engine is configured to render based on the graph configuration information to generate a target graph displayed in the web page.
In some possible implementations, the first rendering engine is configured with a first chart component library matching with the type of the web page, and the step 302 includes the following steps:
1. determining style information and content information of the target chart based on the chart configuration information, the style information including at least one of: the type of the target chart, the color information of the target chart, the size information of the target chart, the index information of the target chart, the position information of the target chart and the style information of the character content in the target chart, wherein the content information is used for indicating the content to be displayed in the target chart;
2. acquiring a chart template corresponding to the chart configuration information from a first chart library according to the style information;
3. and rendering and generating a target chart by adopting a first rendering engine based on the chart template corresponding to the chart configuration information and the content information.
In some embodiments, the graph configuration information is composed of style information and content information, the first graph component library includes various graph templates matched with the client of the webpage type, the graph template corresponding to the graph configuration information can be acquired from the first graph library according to the style information in the graph configuration information, and the graph template is rendered by using the first rendering engine based on the acquired graph template and the content information, so that the target graph for displaying in the webpage is generated.
Optionally, the style information is used to indicate a display style of the target chart; the content information may include data, text, pictures, video, etc. to be presented by the target chart. In some embodiments, the types of charts include tables, line graphs, sector graphs, stacked area graphs, bar graphs, stacked bar graphs, and the like; the color information of the chart refers to the color (such as red, yellow, blue, black, white, green, etc.) of each constituent element of the chart; the size information of the chart refers to the overall size parameters of the chart (such as the length and height of the whole chart), and the size parameters of each component element of the chart (such as the size of each dot element in the chart, the length and width of each line, the size of an arrow and the like); the index information of the chart refers to the meaning represented by each coordinate axis (such as an abscissa axis and an ordinate axis) in the chart; the position information of the chart refers to the display position of the chart in the target page; the style information of the text content in the chart includes information of color, font, size, word spacing, etc. of the position in the chart.
And 303, under the condition that the target client is the application program type, adopting a second rendering engine matched with the application program type to render based on the chart configuration information to generate the target chart.
In some embodiments, the target client is an application type, such as the target client being a client of the target application; and a second rendering engine matched with the application program type is configured in the target client, and the second rendering engine is used for rendering based on the chart configuration information to generate a target chart displayed in the target application program.
In some embodiments, the target application may be a native application or a sub-application, which is not limited in this application embodiment. A native application is an application that can run directly on the operating system, and a child application is an application that runs dependent on the parent application. The sub-application can be called as an applet, which cannot run independently but can be used without downloading and installation. The user can directly open the sub-application program by scanning the graphic code (such as two-dimensional code, bar code and the like) corresponding to the sub-application program or searching the name or related vocabulary entry of the sub-application program. The child application can be conveniently acquired and propagated in the parent application. The parent application is an application for bearing the child applications, and provides an operating environment for the child applications. Optionally, the parent application is a native application. The parent application may be a social application, a dedicated application that specifically supports the child applications, a file management application, a mail application, or a gaming application, among others. The Social application program includes an instant messaging application, an SNS (Social Network Service) application, or a live application.
In some possible implementations, the second rendering engine is configured with a second chart component library matching the application program type, and this step 303 further includes the following steps:
1. determining style information and content information of the target chart based on the chart configuration information, the style information including at least one of: the type of the target chart, the color information of the target chart, the size information of the target chart, the index information of the target chart, the position information of the target chart and the style information of the character content in the target chart, wherein the content information is used for indicating the content to be displayed in the target chart;
2. acquiring a chart template corresponding to the chart configuration information from the second chart library according to the style information;
3. and rendering and generating a target chart by adopting a second rendering engine based on the chart template corresponding to the chart configuration information and the content information.
In some embodiments, the chart configuration information is composed of style information and content information, the first chart component library includes various chart templates matched with the client of the application program type, the chart template corresponding to the chart configuration information can be obtained from the first chart library according to the style information in the chart configuration information, and the target chart for displaying in the target application program is generated by adopting the first rendering engine based on the obtained chart template and the content information.
It should be noted that, for the above steps 302 and 303, only one of the steps is executed, and there is no precedence relationship between the steps 302 and 303.
In some embodiments, the target graph generated by steps 301-303 is displayed in the target client.
In an exemplary embodiment, as shown in fig. 4, the same chart configuration information is displayed in the same manner in the web page type client 41 and the application type client 42; however, since the sizes of the display interfaces provided by the web page type client 41 and the application type client 42 are different from each other, the relative positional relationship between the partial constituent elements in the diagram may be different.
In some embodiments, after the target client displays the target graph generated based on the graph configuration information, the user may modify the target graph through the target client, and the modified target graph generates the updated graph configuration information correspondingly. The modification instruction can be gesture operations such as clicking, double clicking, triple clicking, long pressing, dragging, sliding and the like; or may be a voice command.
And step 306, sending the modified chart configuration information to other clients of the network service platform except the target client.
In some embodiments, the target client sends the modified chart configuration information to the server, and the server forwards the modified chart configuration information to other clients. And other clients of the network service platform are used for updating and displaying the chart generated based on the chart configuration information according to the updated chart configuration information.
In summary, in the technical solution provided in the embodiment of the present application, update information (i.e., modified chart configuration information) corresponding to modification of a target chart by one client is synchronized to other clients, so that multiple clients can edit the same chart at the same time, and the chart update efficiency is improved.
Referring to fig. 5, a flowchart of a chart display method according to another embodiment of the present application is shown. In the present embodiment, the method is mainly exemplified by being applied to the second terminal described above. The method comprises the following steps (501-503):
In some embodiments, the data source of the obtained content information may be one or multiple data sources, such as MySQL (My-Structured Query Language), Clickhouse (column-based storage database), Redis (REmote DIctionary Server), inpala (Query system), Presto _ Hive (an open-source distributed Query engine and a data warehouse), and the like, which is not particularly limited in this embodiment.
In some embodiments, the chart configuration information includes content information that needs to be presented in the target chart.
In one possible implementation, the step 502 further includes the following steps:
1. receiving a setting operation aiming at the chart configuration information, and determining style information of the target chart, wherein the style information comprises at least one of the following items: the type of the target chart, the color information of the target chart, the size information of the target chart, the index information of the target chart, the position information of the target chart and the style information of the character content in the target chart;
2. generating the chart configuration information based on the content information and the style information.
In some embodiments, the style information of the target chart is determined by setting a style parameter included in the chart configuration information, and the style information and the content information are combined to obtain the chart configuration information.
In some optional embodiments, the receiving the setting operation for the chart configuration information and determining the style information of the target chart includes the following steps:
(1) in response to a selection instruction for at least one candidate style element, displaying a candidate chart in accordance with the at least one candidate style element in the visualization engine;
(2) in response to a confirmation instruction for the candidate chart, the candidate chart is determined as a target chart, and at least one candidate style element is determined as style information of the target chart.
In this optional embodiment, the second terminal is installed and run in a visualization engine, the visualization engine may display a plurality of candidate style elements (e.g., types of charts, colors of charts, etc.), receive a selection instruction for at least one of the candidate style elements, display the candidate charts in accordance with the at least one candidate style element in the visualization engine (e.g., combine a line drawing element and blue to obtain a blue line drawing), and determine, after receiving a confirmation instruction for confirming that the chart configuration information has been configured, that at least one candidate style element to be configured is to be determined as the style information of the target chart.
In an exemplary embodiment, setting the chart configuration information may refer to the following table 1:
TABLE 1
Optionally, the network service platform corresponds to different types of clients according to different display modes, a rendering engine in the target client is matched with the type of the target client, and the graphs generated based on the graph configuration information are the same in the different types of clients of the network service platform. In some embodiments, the second terminal sends the graph configuration information to the server, and the server forwards the graph configuration information to the target client.
To sum up, in the technical solution provided in this application embodiment, by setting rendering engines matched with types of clients in different types of clients of a network service platform in advance, when the same graph needs to be displayed in the different types of clients, only one set of graph configuration information needs to be developed and sent to the different types of clients, and the clients directly display corresponding target graphs by using the matched rendering engines based on the graph configuration information, so that the same graph can be displayed in the different types of clients through the same graph configuration information.
Referring to fig. 6, a diagram display apparatus according to an embodiment of the present application is shown. As shown in fig. 6, the apparatus includes: a first rendering engine 61, a second rendering engine 62, a page information management library 63, a visualization page 64, and a data access layer 65. Wherein:
the first rendering engine 61 and the second rendering engine 62 are configured to invoke the data access layer 65 according to the visual element and the interactive element information provided by the page information management library 63, obtain data from the configuration data source, and finally output a visual page in combination with the component information.
A page information management library 63 for storing configuration information of the visual elements and the interactive elements, and page information data associated with the user's request; and simultaneously providing editing functions and data for the visual page.
The visualization page 64 is used for displaying the visualization elements and the interaction elements, and obtaining the output parameters of other objects through the object configuration request interface, so as to obtain actual page information (for example, data at a certain time point selected by a user, and corresponding parameter configuration displayed through a line graph).
And a data access layer 65 for connecting different data sources, including a real-time statistic data source and an offline statistic data source.
Next, a diagram display method provided in an embodiment of the present application will be described with reference to fig. 7, and the method can be applied to the diagram display apparatus shown in fig. 6. As shown in FIG. 7, the method comprises the following steps (701-706):
step 701, a target client sends a page content query request to a data access layer;
step 702, a target client sends a page style query request to a page information management library;
step 703, the data access layer queries information according to the page content query request to obtain corresponding content information;
step 704, the data access layer sends the content information to the page information management library;
step 705, the page information management library performs style query according to the page style query request to obtain corresponding style information;
step 706, the page information management library sends the content information and the style information to the target client;
and step 707, the target client renders and displays the corresponding target chart according to the content information and the style information.
In some embodiments, a visualization engine is provided in the second terminal, and is configured to simply and directly adjust the configuration information of the target chart through a visualization manner, and finally generate the chart configuration information. In an exemplary embodiment, as shown in FIG. 8, a data source selection interface 83 may be displayed for selecting a data source for content information in the chart configuration information by triggering a region distribution tile 82 in a product main interface 81 of the visualization engine. In an exemplary embodiment, as shown in fig. 9, through the chart configuration interface 91, the required data is screened from the data of the specified data source, and the style information (such as chart type, coordinate axis, label unit, color, same ring ratio calculation, etc.) in the chart configuration information is set in the style configuration board 92 to generate a chart of data visualization meeting the user's requirements. In an exemplary embodiment, as shown in fig. 10, in the visual editing interface 1001, a text editing control 1002, a template switching control 1003, and a global filtering control 1004 are displayed. The text editing control 1002 is used for editing necessary index description text or other description text; the template switching control 1003 is used to select the type of chart, such as switching the pie chart 1005 to the bar chart 1006; the global Filter control 1004 is a Filter (Filter) that can act globally on all charts below the same page (Dashboard) by associating different form fields.
In some embodiments, the second terminal requests the server to obtain the specified format information, so as to configure a universal data source link query mode, so that a unified dbConfig (reading unit) is conveniently transmitted to return unified table (chart) data.
In some embodiments, the JSON (JSON Object notification, JS Object Notation) format of the chart format return value front end specifies that the data acquisition request conforming to the example is submitted through the front end, and the data is returned to the value front end in the specified JSON format and subjected to table drawing.
In some embodiments, multiple items of form information are specified in the visual configuration via the Dashboard configuration interface to specify the relationship between different configurations of template components and the positions of the charts. Templates refer to various charts, and components are visual elements in a Dashboard such as texts, tabs (labels), global filters and the like; the diagram position refers to the position of the template and the component, respectively, relative to the display page in the client. In some embodiments, after acquiring and verifying the login authority of the client account of the web page type, the menu configuration information is synchronously forwarded and provided to the client of the application program type for data reading and chart rendering.
The following are embodiments of the apparatus of the present application that may be used to perform embodiments of the method of the present application. For details which are not disclosed in the embodiments of the apparatus of the present application, reference is made to the embodiments of the method of the present application.
Referring to fig. 11, a block diagram of a graph display apparatus according to an embodiment of the present application is shown. The device has the function of realizing the chart display method example, and the function can be realized by hardware or by hardware executing corresponding software. The apparatus may be the first terminal described above, or may be provided on the first terminal. The apparatus 1100 may include: an information receiving module 1110, a chart generating module 1120, and a chart displaying module 1130.
The information receiving module 1110 is configured to receive chart configuration information, where the chart configuration information is used to generate a target chart.
The graph generating module 1120 is configured to generate the target graph based on the graph configuration information by using a rendering engine in a target client of a network service platform; the network service platform corresponds to different types of clients according to different display modes, a rendering engine in the target client is matched with the type of the target client, and graphs generated based on the graph configuration information are the same in the different types of clients of the network service platform.
The graph display module 1130 is configured to display the target graph.
To sum up, in the technical solution provided in this application embodiment, by setting rendering engines matched with types of clients in different types of clients of a network service platform in advance, when the same graph needs to be displayed in the different types of clients, only one set of graph configuration information needs to be developed and sent to the different types of clients, and the clients directly display corresponding target graphs by using the matched rendering engines based on the graph configuration information, so that the same graph can be displayed in the different types of clients through the same graph configuration information.
In an exemplary embodiment, as shown in fig. 12, the chart generation module 1120 includes: the chart generation submodule 1121.
The graph generating sub-module 1121 is configured to, when the target client is a web page type, perform rendering based on the graph configuration information by using a first rendering engine matched with the web page type, and generate the target graph.
The graph generating sub-module 1121 is further configured to, if the target client is an application program type, adopt a second rendering engine matched with the application program type to perform rendering based on the graph configuration information, and generate the target graph.
In an exemplary embodiment, the first rendering engine is configured with a first chart component library matching the web page type. As shown in fig. 12, the chart generation sub-module 1121 is configured to:
determining style information and content information of the target chart based on the chart configuration information, the style information including at least one of: the type of the target chart, the color information of the target chart, the size information of the target chart, the index information of the target chart, the position information of the target chart and the style information of the text content in the target chart, wherein the content information is used for indicating the content to be displayed in the target chart;
acquiring a chart template corresponding to the chart configuration information from the first chart library according to the style information;
and rendering and generating the target chart by adopting the first rendering engine based on the chart template corresponding to the chart configuration information and the content information.
In an exemplary embodiment, a second chart component library matching the application type is configured in the second rendering engine. As shown in fig. 12, the chart generation sub-module 1121 is configured to:
determining style information and content information of the target chart based on the chart configuration information, the style information including at least one of: the type of the target chart, the color information of the target chart, the size information of the target chart, the index information of the target chart, the position information of the target chart and the style information of the text content in the target chart, wherein the content information is used for indicating the content to be displayed in the target chart;
acquiring a chart template corresponding to the chart configuration information from the second chart library according to the style information;
and rendering and generating the target chart by adopting the second rendering engine based on the chart template corresponding to the chart configuration information and the content information.
In an exemplary embodiment, the information receiving module 1110 is configured to:
receiving page information, wherein the page information comprises the chart configuration information and is used for generating a target page where the target chart is located;
the generating the target diagram by the rendering engine in the target client adopting the network service platform based on the diagram configuration information comprises the following steps:
and displaying the target page based on the type of the target client and the page information, wherein the target graph is displayed in the target page.
In an exemplary embodiment, as shown in fig. 12, the apparatus 1100 further comprises: an information generation module 1140 and a chart update module 1150.
The information generating module 1140 is configured to receive a modification instruction for the target chart and generate updated chart configuration information.
The chart updating module 1150 is configured to send the modified chart configuration information to other clients of the network service platform except the target client, where the other clients of the network service platform are configured to update and display a chart generated based on the chart configuration information according to the updated chart configuration information.
Referring to fig. 13, a block diagram of a graph display apparatus according to another embodiment of the present application is shown. The device has the function of realizing the chart display method example, and the function can be realized by hardware or by hardware executing corresponding software. The apparatus may be the second terminal described above, or may be provided on the second terminal. The apparatus 1300 may include: an information acquisition module 1310, an information generation module 1320, and an information transmission module 1330.
The information obtaining module 1310 is configured to obtain content information, where the content information is used to indicate content to be shown in the target chart.
The information generating module 1320 is configured to generate chart configuration information based on the content information, where the chart configuration information is used to generate the target chart.
The information sending module 1330 is configured to send the graph configuration information to a target client of a network service platform; the network service platform corresponds to different types of clients according to different display modes, a rendering engine in the target client is matched with the type of the target client, and graphs generated based on the graph configuration information are the same in the different types of clients of the network service platform.
To sum up, in the technical solution provided in this application embodiment, by setting rendering engines matched with types of clients in different types of clients of a network service platform in advance, when the same graph needs to be displayed in the different types of clients, only one set of graph configuration information needs to be developed and sent to the different types of clients, and the clients directly display corresponding target graphs by using the matched rendering engines based on the graph configuration information, so that the same graph can be displayed in the different types of clients through the same graph configuration information.
In an exemplary embodiment, as shown in fig. 14, the information generating module 1320 includes: an information determination sub-module 1321 and an information generation sub-module 1322.
The information determining sub-module 1321 is configured to receive a setting operation for the chart configuration information, and determine style information of the target chart, where the style information includes at least one of: the type of the target chart, the color information of the target chart, the size information of the target chart, the index information of the target chart, the position information of the target chart and the style information of the character content in the target chart.
The information generating sub-module 1322 is configured to generate the chart configuration information based on the content information and the style information.
In an exemplary embodiment, as shown in fig. 14, the information determination submodule 1321 is configured to:
in response to a selection instruction for at least one candidate style element, displaying a candidate chart in accordance with the at least one candidate style element in a visualization engine;
in response to a confirmation instruction for the candidate chart, determining the candidate chart as the target chart and determining the at least one candidate style element as style information of the target chart.
It should be noted that, when the apparatus provided in the foregoing embodiment implements the functions thereof, only the division of the functional modules is illustrated, and in practical applications, the functions may be distributed by different functional modules according to needs, that is, the internal structure of the apparatus may be divided into different functional modules to implement all or part of the functions described above. In addition, the apparatus and method embodiments provided by the above embodiments belong to the same concept, and specific implementation processes thereof are described in the method embodiments for details, which are not described herein again.
In an exemplary embodiment, there is also provided a terminal including a processor and a memory, the memory having stored therein a computer program that is loaded and executed by the processor to implement the above-described graph display method.
In an exemplary embodiment, there is also provided a computer-readable storage medium having stored therein a computer program which, when executed by a processor, implements the above-described graph display method.
Optionally, the computer-readable storage medium may include: ROM (Read-only memory), RAM (Random-access memory), SSD (solid state drive), or optical disc, etc. The random access memory may include a ReRAM (resistive random access memory) and a DRAM (dynamic random access memory).
In an exemplary embodiment, a computer program product for implementing the above graph display method when executed by a processor is also provided.
It should be understood that reference to "a plurality" herein means two or more. "and/or" describes the association relationship of the associated objects, meaning that there may be three relationships, e.g., a and/or B, which may mean: a exists alone, A and B exist simultaneously, and B exists alone. The character "/" generally indicates that the former and latter associated objects are in an "or" relationship.
The above description is only exemplary of the present application and should not be taken as limiting the present application, and any modifications, equivalents, improvements and the like that are made within the spirit and principle of the present application should be included in the protection scope of the present application.
Claims (13)
1. A method of displaying a chart, the method comprising:
receiving chart configuration information, wherein the chart configuration information is used for generating a target chart;
generating the target diagram based on the diagram configuration information by adopting a rendering engine in a target client of a network service platform; the network service platform corresponds to different types of clients according to different display modes, a rendering engine in the target client is matched with the type of the target client, and the graphs generated based on the graph configuration information are the same in the different types of clients of the network service platform;
and displaying the target chart.
2. The method of claim 1, wherein generating the target graph based on the graph configuration information by a rendering engine in the target client employing the web services platform comprises:
under the condition that the target client is of a webpage type, a first rendering engine matched with the webpage type is adopted to render based on the chart configuration information, and the target chart is generated;
and under the condition that the target client is the application program type, adopting a second rendering engine matched with the application program type to render based on the chart configuration information to generate the target chart.
3. The method of claim 2, wherein the first rendering engine is configured with a first gallery of chart components matching the type of the web page;
the rendering is performed by adopting a first rendering engine matched with the webpage type based on the chart configuration information, and the generation of the target chart comprises the following steps:
determining style information and content information of the target chart based on the chart configuration information, the style information including at least one of: the type of the target chart, the color information of the target chart, the size information of the target chart, the index information of the target chart, the position information of the target chart and the style information of the text content in the target chart, wherein the content information is used for indicating the content to be displayed in the target chart;
acquiring a chart template corresponding to the chart configuration information from the first chart library according to the style information;
and rendering and generating the target chart by adopting the first rendering engine based on the chart template corresponding to the chart configuration information and the content information.
4. The method of claim 2, wherein the second rendering engine is configured with a second gallery of chart components that matches the application type;
the rendering is performed by adopting a second rendering engine matched with the application program type based on the chart configuration information, and the generating of the target chart comprises the following steps:
determining style information and content information of the target chart based on the chart configuration information, the style information including at least one of: the type of the target chart, the color information of the target chart, the size information of the target chart, the index information of the target chart, the position information of the target chart and the style information of the text content in the target chart, wherein the content information is used for indicating the content to be displayed in the target chart;
acquiring a chart template corresponding to the chart configuration information from the second chart library according to the style information;
and rendering and generating the target chart by adopting the second rendering engine based on the chart template corresponding to the chart configuration information and the content information.
5. The method of claim 1, wherein receiving chart configuration information comprises:
receiving page information, wherein the page information comprises the chart configuration information and is used for generating a target page where the target chart is located;
the generating the target diagram by the rendering engine in the target client adopting the network service platform based on the diagram configuration information comprises the following steps:
and displaying the target page based on the type of the target client and the page information, wherein the target graph is displayed in the target page.
6. The method of any of claims 1 to 5, wherein after displaying the target graph, further comprising:
receiving a modification instruction aiming at the target chart, and generating updated chart configuration information;
and sending the modified chart configuration information to other clients of the network service platform except the target client, wherein the other clients of the network service platform are used for updating and displaying the chart generated based on the chart configuration information according to the updated chart configuration information.
7. A method of displaying a chart, the method comprising:
acquiring content information, wherein the content information is used for indicating content to be displayed in a target chart;
generating chart configuration information based on the content information, the chart configuration information being used for generating the target chart;
sending the chart configuration information to a target client of a network service platform;
the network service platform corresponds to different types of clients according to different display modes, a rendering engine in the target client is matched with the type of the target client, and graphs generated based on the graph configuration information are the same in the different types of clients of the network service platform.
8. The method of claim 7, wherein generating chart configuration information based on the content information comprises:
receiving a setting operation for the chart configuration information, determining style information of the target chart, wherein the style information comprises at least one of the following items: the type of the target chart, the color information of the target chart, the size information of the target chart, the index information of the target chart, the position information of the target chart and the style information of the character content in the target chart;
generating the chart configuration information based on the content information and the style information.
9. The method of claim 8, wherein receiving a set operation for the chart configuration information, determining style information for the target chart comprises:
in response to a selection instruction for at least one candidate style element, displaying a candidate chart in accordance with the at least one candidate style element in a visualization engine;
in response to a confirmation instruction for the candidate chart, determining the candidate chart as the target chart and determining the at least one candidate style element as style information of the target chart.
10. A chart display apparatus, characterized in that the apparatus comprises:
the information receiving module is used for receiving chart configuration information, and the chart configuration information is used for generating a target chart;
the chart generation module is used for generating the target chart based on the chart configuration information by adopting a rendering engine in a target client of a network service platform; the network service platform corresponds to different types of clients according to different display modes, a rendering engine in the target client is matched with the type of the target client, and the graphs generated based on the graph configuration information are the same in the different types of clients of the network service platform;
and the chart display module is used for displaying the target chart.
11. A chart display apparatus, characterized in that the apparatus comprises:
the information acquisition module is used for acquiring content information, and the content information is used for indicating the content to be displayed in the target chart;
an information generating module, configured to generate chart configuration information based on the content information, where the chart configuration information is used to generate the target chart;
the information sending module is used for sending the chart configuration information to a target client of a network service platform;
the network service platform corresponds to different types of clients according to different display modes, a rendering engine in the target client is matched with the type of the target client, and graphs generated based on the graph configuration information are the same in the different types of clients of the network service platform.
12. A terminal device, characterized in that it comprises a processor and a memory in which is stored a computer program that is loaded and executed by the processor to implement the graph display method according to any one of claims 1 to 9.
13. A computer-readable storage medium, in which a computer program is stored, which is loaded and executed by a processor to implement the graph display method according to any one of claims 1 to 9.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110414142.2A CN113177171A (en) | 2021-04-16 | 2021-04-16 | Chart display method and device, terminal device and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110414142.2A CN113177171A (en) | 2021-04-16 | 2021-04-16 | Chart display method and device, terminal device and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113177171A true CN113177171A (en) | 2021-07-27 |
Family
ID=76923481
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110414142.2A Pending CN113177171A (en) | 2021-04-16 | 2021-04-16 | Chart display method and device, terminal device and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113177171A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113641735A (en) * | 2021-08-16 | 2021-11-12 | 掌阅科技股份有限公司 | Visual display method of federal cluster data, electronic equipment and storage medium |
| CN113761304A (en) * | 2021-09-23 | 2021-12-07 | 北京航空航天大学青岛研究院 | Big data intelligent display configuration method based on dynamic parameters |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107329997A (en) * | 2017-06-08 | 2017-11-07 | 腾讯科技（深圳）有限公司 | Page display method and device, client, storage medium |
| CN108469970A (en) * | 2017-02-17 | 2018-08-31 | 阿里巴巴集团控股有限公司 | page tab information processing method and device |
| CN109460276A (en) * | 2018-10-25 | 2019-03-12 | 北京字节跳动网络技术有限公司 | The page and page configuration document generating method, device, terminal device and medium |
| CN109614545A (en) * | 2018-11-13 | 2019-04-12 | 阿里巴巴集团控股有限公司 | Page loading method, device and equipment |
| CN110400196A (en) * | 2019-06-20 | 2019-11-01 | 北京奇艺世纪科技有限公司 | A kind of page processing method, device and computer readable storage medium |
| CN111259294A (en) * | 2019-12-31 | 2020-06-09 | 万表名匠(广州)科技有限公司 | Page loading request response method, device, equipment and storage medium |
-
2021
- 2021-04-16 CN CN202110414142.2A patent/CN113177171A/en active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108469970A (en) * | 2017-02-17 | 2018-08-31 | 阿里巴巴集团控股有限公司 | page tab information processing method and device |
| CN107329997A (en) * | 2017-06-08 | 2017-11-07 | 腾讯科技（深圳）有限公司 | Page display method and device, client, storage medium |
| CN109460276A (en) * | 2018-10-25 | 2019-03-12 | 北京字节跳动网络技术有限公司 | The page and page configuration document generating method, device, terminal device and medium |
| CN109614545A (en) * | 2018-11-13 | 2019-04-12 | 阿里巴巴集团控股有限公司 | Page loading method, device and equipment |
| CN110400196A (en) * | 2019-06-20 | 2019-11-01 | 北京奇艺世纪科技有限公司 | A kind of page processing method, device and computer readable storage medium |
| CN111259294A (en) * | 2019-12-31 | 2020-06-09 | 万表名匠(广州)科技有限公司 | Page loading request response method, device, equipment and storage medium |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113641735A (en) * | 2021-08-16 | 2021-11-12 | 掌阅科技股份有限公司 | Visual display method of federal cluster data, electronic equipment and storage medium |
| CN113761304A (en) * | 2021-09-23 | 2021-12-07 | 北京航空航天大学青岛研究院 | Big data intelligent display configuration method based on dynamic parameters |
| CN113761304B (en) * | 2021-09-23 | 2023-11-24 | 北京航空航天大学青岛研究院 | Big data intelligent display configuration method based on dynamic parameters |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP6761112B2 (en) | Methods and systems for server-side rendering of native content for presentation | |
| US11288319B1 (en) | Generating trending natural language request recommendations | |
| US10678406B1 (en) | Conversational user interface design | |
| US11127223B1 (en) | Mesh updates via mesh splitting | |
| US11475053B1 (en) | Providing completion recommendations for a partial natural language request received by a natural language processing system | |
| US9418388B1 (en) | Techniques for displaying third party content | |
| US20210124541A1 (en) | Conversational Analytics with Data Visualization Snapshots | |
| US11563813B1 (en) | Presentation of collaboration environments for a networked remote collaboration session | |
| US11079987B2 (en) | Creation of component templates | |
| CN113177171A (en) | Chart display method and device, terminal device and storage medium | |
| CN115510347A (en) | Presentation file conversion method and device, electronic equipment and storage medium | |
| CN113516729A (en) | Chart drawing method and device and computer readable storage medium | |
| CN113220381A (en) | Click data display method and device | |
| CN115994517A (en) | Information processing method, apparatus, storage medium, device, and program product | |
| CN113704671A (en) | Page generation method and device | |
| CN115062084A (en) | Method and device for constructing API (application program interface) based on database metadata | |
| CN112905178A (en) | Method, device, equipment and medium for generating business function page | |
| JP2010288243A (en) | Content generation and distribution system for mobile information terminal | |
| US11734886B1 (en) | Interaction tools in networked remote collaboration | |
| US11936531B2 (en) | Transforming content in a document using chained applications in a client-server architecture | |
| US11853533B1 (en) | Data visualization workspace in an extended reality environment | |
| US11798235B1 (en) | Interactions in networked remote collaboration environments | |
| CN117251231B (en) | Animation resource processing method, device and system and electronic equipment | |
| CN112307378B (en) | Network view display method | |
| US20230059754A1 (en) | Methods, apparatuses and systems for managing a multi-tenant application system |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |