CN114692044A - Chart processing method and device - Google Patents

Chart processing method and device Download PDF

Info

Publication number
CN114692044A
CN114692044A CN202011563846.8A CN202011563846A CN114692044A CN 114692044 A CN114692044 A CN 114692044A CN 202011563846 A CN202011563846 A CN 202011563846A CN 114692044 A CN114692044 A CN 114692044A
Authority
CN
China
Prior art keywords
chart
displayed
basic
graph
page
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
Application number
CN202011563846.8A
Other languages
Chinese (zh)
Inventor
段宝丹
刘小娟
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Jingdong Technology Holding Co Ltd
Original Assignee
Jingdong Technology Holding Co Ltd
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 Jingdong Technology Holding Co Ltd filed Critical Jingdong Technology Holding Co Ltd
Priority to CN202011563846.8A priority Critical patent/CN114692044A/en
Publication of CN114692044A publication Critical patent/CN114692044A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/002D [Two Dimensional] image generation
    • G06T11/20Drawing from basic elements, e.g. lines or circles
    • G06T11/206Drawing of charts or graphs

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

The invention provides a chart processing method and a device, wherein the method comprises the following steps: obtaining chart service data corresponding to a page to be displayed and a plurality of basic chart parameters corresponding to the page to be displayed; obtaining a basic chart corresponding to each basic chart parameter according to a preset common component and the plurality of basic chart parameters; and rendering and displaying the page to be displayed according to the chart service data and the basic chart so as to enable the page to be displayed to display the corresponding chart to be displayed, wherein the chart to be displayed is the rendered basic chart, and the chart is rapidly configured, so that the configuration efficiency of the chart is improved.

Description

Chart processing method and device
Technical Field
The embodiment of the invention relates to the technical field of computers, in particular to a chart processing method and device.
Background
The visual chart is used as a tool for people to know the trend of data more intuitively and quickly, and is widely applied to the field of finance.
At present, in order to enable a webpage to display a chart, a configuration of the chart needs to be performed first, that is, configuration information corresponding to the chart and a component corresponding to the chart are obtained first, the configuration information is transmitted to the component corresponding to the chart to obtain a basic chart, the configuration of the chart is realized, that is, the setting of a chart style is realized, and then, the configured basic chart is rendered by using specific chart service data so as to display the chart on the webpage.
However, since each graph configuration needs to transmit corresponding configuration information into a corresponding component, when the number of graphs to be displayed on the web page is large, it takes much time to configure the graphs, which results in inefficient graph configuration.
Disclosure of Invention
The embodiment of the invention provides a chart processing method and device, and aims to solve the problem of low chart configuration efficiency in the prior art.
In a first aspect, an embodiment of the present invention provides a graph processing method, including:
obtaining chart business data corresponding to a page to be displayed and a plurality of basic chart parameters corresponding to the page to be displayed;
obtaining a basic chart corresponding to each basic chart parameter according to a preset common component and the plurality of basic chart parameters;
and rendering and displaying the page to be displayed according to the chart service data and the basic chart so as to enable the page to be displayed to display the corresponding chart to be displayed, wherein the chart to be displayed is the rendered basic chart.
In one possible design, the obtaining a basic diagram corresponding to each basic diagram parameter according to a preset common component and the plurality of basic diagram parameters includes:
and inputting the plurality of basic configuration parameters into the preset common component, so that the preset common component obtains target chart configuration information corresponding to the basic chart parameters for each basic chart parameter, and generates a basic chart corresponding to the basic chart parameters according to the target chart configuration information.
In one possible design, the obtaining multiple basic chart parameters corresponding to a page to be displayed includes:
and acquiring basic configuration parameters corresponding to the page to be displayed according to a preset parameter acquisition mode, wherein the preset parameter acquisition mode comprises a file acquisition mode and/or a code acquisition mode.
In one possible design, the obtaining multiple basic chart parameters corresponding to a page to be displayed includes:
acquiring a chart type corresponding to a page to be displayed;
and for each chart type, acquiring a target parameter acquisition mode corresponding to the chart type, and acquiring basic configuration parameters corresponding to the page to be displayed and the chart type according to the target parameter acquisition mode.
In one possible design, the base icon configuration parameters include one or more of chart identification, chart color type, and chart coordinate axis information.
In one possible design, the target icon configuration information includes one or more of chart color sequence information, prompt box style information for a chart, handle configuration information, first axis information for a chart, and legend information.
In one possible design, the method further includes:
acquiring the size information of the chart to be displayed and acquiring the size information of a display area corresponding to the chart to be displayed;
and if the size information of the chart to be displayed is smaller than the size information of the display area corresponding to the chart to be displayed, performing scroll display on the chart to be displayed based on the size information of the display area corresponding to the chart to be displayed.
In one possible design, the method further includes:
acquiring graph display information input by a user, wherein the graph display information comprises a first target graph identifier and a corresponding time period to be displayed;
and determining the data to be displayed of the graph to be displayed corresponding to the first target graph identification according to the time period to be displayed, and displaying the data to be displayed.
In one possible design, the method further includes:
obtaining a chart element selected by a user, and displaying the chart element according to a preset style.
In one possible design, the method further includes:
obtaining diagram operation information input by a user, wherein the diagram operation information comprises an operation type and a second target diagram identifier; wherein the operation type comprises an amplification type and/or a download type;
and executing the operation corresponding to the operation type on the target graph to be displayed corresponding to the second target graph identification.
In a second aspect, an embodiment of the present invention provides a graph processing apparatus, including:
the information acquisition module is used for acquiring chart service data corresponding to a page to be displayed and a plurality of basic chart parameters corresponding to the page to be displayed;
the processing module is used for obtaining a basic chart corresponding to each basic chart parameter according to a preset common component and the plurality of basic chart parameters;
the processing module is further configured to render and display the page to be displayed according to the graph service data and the basic graph, so that the page to be displayed displays a corresponding graph to be displayed, where the graph to be displayed is a rendered basic graph.
In one possible design, the processing module is further to:
and inputting the plurality of basic configuration parameters into the preset common component, so that the preset common component obtains target chart configuration information corresponding to the basic chart parameters for each basic chart parameter, and generates a basic chart corresponding to the basic chart parameters according to the target chart configuration information.
In one possible design, the information obtaining module is further configured to:
and acquiring basic configuration parameters corresponding to the page to be displayed according to a preset parameter acquisition mode, wherein the preset parameter acquisition mode comprises a file acquisition mode and/or a code acquisition mode.
In one possible design, the information obtaining module is further configured to:
acquiring a chart type corresponding to a page to be displayed;
and for each chart type, acquiring a target parameter acquisition mode corresponding to the chart type, and acquiring basic configuration parameters corresponding to the page to be displayed and the chart type according to the target parameter acquisition mode.
In one possible design, the base icon configuration parameters include one or more of chart identification, chart color type, and chart coordinate axis information.
In one possible design, the target icon configuration information includes one or more of chart color sequence information, prompt box style information for a chart, handle configuration information, first axis information for a chart, and legend information.
In one possible design, the processing module is further configured to:
acquiring the size information of the chart to be displayed and acquiring the size information of a display area corresponding to the chart to be displayed;
and if the size information of the chart to be displayed is smaller than the size information of the display area corresponding to the chart to be displayed, performing scroll display on the chart to be displayed based on the size information of the display area corresponding to the chart to be displayed.
In one possible design, the processing module is further configured to:
acquiring graph display information input by a user, wherein the graph display information comprises a first target graph identifier and a corresponding time period to be displayed;
and determining the data to be displayed of the graph to be displayed corresponding to the first target graph identification according to the time period to be displayed, and displaying the data to be displayed.
In one possible design, the processing module is further configured to:
obtaining a chart element selected by a user, and displaying the chart element according to a preset style.
In one possible design, the processing module is further configured to:
obtaining diagram operation information input by a user, wherein the diagram operation information comprises an operation type and a second target diagram identifier; wherein the operation type comprises an amplification type and/or a download type;
and executing the operation corresponding to the operation type on the target graph to be displayed corresponding to the second target graph identification.
In a third aspect, an embodiment of the present invention provides an electronic device, including: at least one processor and memory;
the memory stores computer-executable instructions;
the at least one processor executes computer-executable instructions stored by the memory to cause the at least one processor to perform the graph processing method as set forth above in the first aspect and various possible designs of the first aspect.
In a fourth aspect, an embodiment of the present invention provides a computer-readable storage medium, where computer-executable instructions are stored, and when a processor executes the computer-executable instructions, the graph processing method according to the first aspect and various possible designs of the first aspect is implemented.
In a fifth aspect, an embodiment of the present invention provides a computer program product, which includes a computer program, and when the computer program is executed by a processor, the computer program implements the graph processing method according to the first aspect and various possible designs of the first aspect.
The invention provides a chart processing method and device, which are used for directly obtaining a basic chart corresponding to each basic chart parameter by using a preset common component and each basic chart parameter after acquiring a plurality of basic chart parameters corresponding to a page to be displayed, namely the basic chart parameters of a chart to be displayed corresponding to the page to be displayed, so that the basic chart corresponding to each chart to be displayed is obtained, and the configuration of each chart to be displayed is realized, namely the setting of the style of each image to be displayed is realized. And after the basic diagram is obtained, rendering the page to be displayed according to the diagram service data and the basic diagram, namely, rendering the basic diagram by using the diagram service data to obtain the diagram to be displayed, namely obtaining the diagram to be displayed, and displaying the diagram to be displayed on the page to be displayed to realize the display of the diagram. When the diagram is configured, the configuration information and the components corresponding to each diagram are not required to be obtained, but only one common component and the basic diagram parameters of the diagram are utilized to obtain the basic diagram corresponding to each diagram to be displayed corresponding to the page to be displayed, so that the rapid configuration of the diagram is realized, and the configuration efficiency of the diagram is improved.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings needed to be used in the description of the embodiments or the prior art will be briefly introduced below, and it is obvious that the drawings in the following description are some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to these drawings without creative efforts.
FIG. 1 is a first diagram of a chart provided in accordance with an embodiment of the present invention;
FIG. 2 is a first flowchart illustrating a chart processing method according to an embodiment of the present invention;
FIG. 3 is a second diagram of a chart provided in accordance with an embodiment of the present invention;
FIG. 4 is a second flowchart illustrating a chart processing method according to an embodiment of the present invention;
FIG. 5 is a schematic diagram of common components provided by an embodiment of the present invention;
FIG. 6 is a schematic structural diagram of a graph processing apparatus according to an embodiment of the present invention;
fig. 7 is a schematic diagram of a hardware structure of an electronic device according to an embodiment of the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are some, but not all, embodiments of the present invention. All other embodiments, which can be obtained by a person skilled in the art without inventive step based on the embodiments of the present invention, are within the scope of protection of the present invention.
In the prior art, in order to enable a web page to display a graph, the graph needs to be configured first, that is, configuration information corresponding to the graph and a component corresponding to the graph are obtained first, the configuration information is transmitted to the component corresponding to the graph to obtain a basic graph, the configuration of the graph is realized, that is, the setting of a graph style is realized, and then the configured basic graph is rendered by using specific graph service data, so that the graph is displayed on the web page (as shown in fig. 1, a graph of subway passenger flow of a region 1 is displayed on a currently displayed page of an electronic device). However, since each graph configuration needs to transmit corresponding configuration information into a corresponding component, when the number of graphs to be displayed on the web page is large, it takes much time to configure the graphs, which results in inefficient graph configuration.
Therefore, aiming at the problems, the technical idea of the invention is that when determining the basic diagram of the diagram to be displayed corresponding to the webpage to be displayed, the basic diagram parameters corresponding to each diagram to be displayed are obtained, and all the basic diagram parameters are transmitted to the public component, so that the basic diagram corresponding to each basic diagram parameter is obtained by using the public component, that is, the basic diagram corresponding to each diagram to be displayed is obtained, the quick construction of the basic diagram is realized, that is, the configuration of the diagram is realized, the component corresponding to each diagram to be displayed and the specific configuration information are not required to be searched, and the configuration efficiency of the diagram is improved.
The following describes the technical solutions of the present disclosure and how to solve the above technical problems in detail by specific examples. Several of these specific examples may be combined with each other below, and some of the same or similar concepts or processes may not be repeated in some examples. Examples of the present disclosure will now be described with reference to the accompanying drawings.
Fig. 2 is a schematic flowchart of a chart processing method according to an embodiment of the present invention, where an execution main body of the embodiment may be an electronic device such as a computer, a server, a mobile terminal, and the like. As shown in fig. 2, the method includes:
s201, obtaining chart service data corresponding to a page to be displayed and a plurality of basic chart parameters corresponding to the page to be displayed.
In this embodiment, the user often opens a web page to learn about related information during the use of the electronic device. When a user opens a webpage, if the content of the webpage has an icon, the electronic device needs to perform page initialization to display a relevant graph on the webpage, and then the webpage is used as a page to be displayed, and graph service data corresponding to the page to be displayed, namely data required to be displayed by utilizing the graph, such as passenger flow of region 1 in 2019 and 2020, is acquired.
In this embodiment, in order to enable the page to be displayed to display the chart to be displayed, that is, to display the chart to be displayed, the basic chart parameters corresponding to each chart to be displayed on the page to be displayed need to be obtained, so as to determine the specific configuration condition of the chart corresponding to the page to be displayed, that is, the style of each part of the chart, by using the basic chart parameters, thereby displaying the corresponding chart based on the style, so that the user can quickly obtain the required information from the chart.
Optionally, the basic icon configuration parameters include one or more of a chart identifier, a chart color type, and chart coordinate axis information.
The chart identifier is an identifier corresponding to the chart, and the specific configuration information corresponding to the chart can be acquired through the identifier, that is, the chart configuration information corresponding to the chart identifier can be acquired from the public component. The labels for different types of charts are different, for example, the chart label for a pie chart is 0, and the chart label for a bar chart is 1.
Wherein, the chart color type is the theme color of the chart, i.e. the main style of the chart, for example, the black theme color, and the background color of the chart is black. Since there may be a plurality of theme styles in a chart, when obtaining the chart configuration information corresponding to a chart, only the chart configuration information corresponding to the chart color type may be obtained, and specifically, the chart configuration information corresponding to the chart identifier and the chart color type may be obtained. For example, the histogram corresponds to a graph with a black theme and a graph with a blue theme, and when the graph color type is the black theme, the graph configuration information corresponding to the black theme of the histogram is used as the target graph configuration information.
The chart coordinate axis information is coordinate axis information included in the chart, for example, a coordinate axis title.
S202, obtaining a basic chart corresponding to each basic chart parameter according to the preset common component and the plurality of basic chart parameters.
In this embodiment, after obtaining the basic chart parameters of the chart to be displayed on the page to be displayed, the basic chart corresponding to the basic icon configuration parameters is determined by using the preset common component and the basic icon configuration parameters, that is, the basic chart corresponding to the chart to be displayed is obtained, the basic chart is a specific configuration style of the chart to be displayed, the basic chart already has specific styles, such as a color legend, a style, a prompt box style and the like, to be displayed by the corresponding chart to be displayed, and the specific styles are equivalent to an empty table with the configured styles, that is, a chart without specific data.
And S203, rendering and displaying the page to be displayed according to the chart service data and the basic chart so that the page to be displayed displays the corresponding chart to be displayed, wherein the chart to be displayed is the rendered basic chart.
In this embodiment, after obtaining a basic diagram corresponding to a page to be displayed, rendering the page to be displayed is required to enable a user to see specific content of the page to be displayed, and in the process of rendering the page to be displayed, specific diagram service data is combined with the basic diagram to obtain a diagram including specific data, that is, the basic diagram is filled with specific icon service data to obtain the diagram to be displayed, and the diagram to be displayed is the rendered basic diagram, that is, the diagram including specific data and styles (for example, a subway flow diagram of a region 1 shown in fig. 3). And displaying the chart on the webpage to be displayed to realize the display of the chart to be displayed.
Specifically, when rendering is performed based on the chart service data and the basic chart, each part of the chart is rendered according to the style corresponding to the basic chart, so that each part of the obtained chart to be displayed is displayed according to the style corresponding to the corresponding basic chart.
As can be seen from the above description, after a plurality of basic chart parameters corresponding to a page to be displayed are obtained, that is, after basic chart parameters of a chart to be displayed corresponding to the page to be displayed are obtained, a preset common component and the basic chart parameters are directly used to obtain a basic chart corresponding to each basic chart parameter, that is, a basic chart corresponding to each chart to be displayed is obtained, configuration of each chart to be displayed is realized, that is, setting of a style of each image to be displayed is realized, after the basic chart is obtained, a page to be displayed is rendered according to chart service data and the basic chart, that is, the basic chart is rendered by using the chart service data to obtain the chart to be displayed, that is, the chart to be displayed is obtained, and the chart to be displayed is displayed on the page to be displayed, so that the chart is displayed. When the diagram is configured, the configuration information and the components corresponding to each diagram are not required to be obtained, but only one common component and the basic diagram parameters of the diagram are utilized to obtain the basic diagram corresponding to each diagram to be displayed corresponding to the page to be displayed, so that the rapid configuration of the diagram is realized, and the configuration efficiency of the diagram is improved.
Fig. 4 is a second schematic flow chart diagram of the page display method according to the embodiment of the present invention, where on the basis of the embodiment of fig. 2, when a specific configuration item corresponding to a graph to be displayed on a web page to be displayed is determined, a basic graph parameter corresponding to each graph is transmitted to a preset common component, so that the preset common component is used to process the basic graph parameter to obtain a configuration item, i.e., a basic graph, corresponding to each graph, and this process will be described below with reference to a specific embodiment. As shown in fig. 4, the method includes:
s401, obtaining chart service data corresponding to the page to be displayed and a plurality of basic chart parameters corresponding to the page to be displayed.
In this embodiment, when the user opens the page to be displayed, the electronic device needs to perform page initialization, that is, needs to load the content (for example, a chart) that needs to be displayed by the page to be displayed. In the process of page initialization, the electronic device needs to acquire basic chart parameters corresponding to a page to be displayed, so as to configure a chart by using the basic chart parameters, thereby realizing the initialization of the chart.
When acquiring the basic chart parameters corresponding to the page to be displayed, that is, when determining the basic chart parameters of the chart to be displayed of the page to be displayed, the basic chart parameters can be acquired in the following two ways.
One mode is to acquire the basic configuration parameters corresponding to the page to be displayed according to a preset parameter acquisition mode, wherein the preset parameter acquisition mode comprises a file acquisition mode and/or a code acquisition mode.
In this embodiment, when obtaining the basic chart parameters corresponding to the charts to be displayed of the page to be displayed, the basic chart parameters corresponding to each chart to be displayed may be obtained according to a file obtaining manner or a code obtaining manner, that is, all the basic chart parameters are obtained.
Specifically, when all basic chart parameters are acquired according to a file acquisition mode, a chart file corresponding to a page to be displayed can be acquired from a first preset position, so as to extract the basic chart parameters from the chart file. The chart file comprises basic chart parameters of a chart required to be displayed by a page to be displayed.
The first preset position may be a position such as a hard disk, a database, or other storage positions, and is not limited herein.
Specifically, when all the basic chart parameters are acquired according to the code acquisition mode, the chart code corresponding to the page to be displayed can be acquired from the second preset position to extract the basic chart parameters from the chart code, and the chart code includes the basic chart parameters of the chart to be displayed.
The second preset position may be a page code corresponding to the display page, or may be another position, where the second preset position is not limited.
The other mode is to obtain the chart type corresponding to the page to be displayed. And for each chart type, acquiring a target parameter acquisition mode corresponding to the chart type, and acquiring basic configuration parameters corresponding to the page to be displayed and the chart type according to the target parameter acquisition mode.
In this embodiment, the different types of graphs correspond to different parameter obtaining manners, so that the corresponding parameter obtaining manner may be determined according to the type of the graph, that is, the graph type corresponding to the page to be displayed is obtained, that is, the type of the graph to be displayed of the page to be displayed is determined, then, for each graph type, the parameter obtaining manner corresponding to the graph type is searched from the third preset position and determined as the target parameter obtaining manner, and then, based on the target parameter obtaining manner, the basic configuration parameters corresponding to the page to be displayed and the graph type are searched.
Specifically, when the target parameter obtaining manner is a file obtaining manner, and the basic configuration parameter is searched based on the file obtaining manner, a graph file corresponding to the page to be displayed may be obtained from the third preset position, so as to extract the basic graph parameter from the graph file. The chart file comprises basic chart parameters of a chart required to be displayed by a page to be displayed.
The third preset position may be a position such as a hard disk, a database, or other storage positions, and is not limited herein.
Specifically, when the target parameter obtaining manner is a code obtaining manner, and when the basic configuration parameter is searched based on the code obtaining manner, the graph code corresponding to the page to be displayed may be obtained from the fourth preset position, so as to extract the basic graph parameter from the graph code, where the graph code includes the basic graph parameter of the graph to be displayed.
The fourth preset position may be a page code corresponding to the display page, or may be another position, where the fourth preset position is not limited.
S402, inputting the basic configuration parameters into a preset common component, so that the preset common component obtains target chart configuration information corresponding to the basic chart parameters for each basic chart parameter, and generates a basic chart corresponding to the basic chart parameters according to the target chart configuration information.
In this embodiment, when determining a basic chart corresponding to a chart to be displayed by using basic configuration parameters corresponding to the chart to be displayed of a page to be displayed, each basic configuration parameter is sequentially transmitted to a preset common component, the preset common component obtains target chart configuration information corresponding to each basic chart parameter, that is, for each basic chart parameter corresponding to the chart to be displayed, and the target chart configuration information indicates specific configuration information corresponding to the chart to be displayed, that is, style setting information of the chart. And then combining the target chart configuration information, and realizing the chart configuration by using the basic chart corresponding to the basic chart parameters. For example, the configuration information about the chart titles in the target chart configuration information is combined to obtain the specific style corresponding to the chart title.
Optionally, the basic chart has a color, a legend style, and a prompt box style to be displayed on the corresponding chart to be displayed, and the chart that can be displayed to the user can be obtained after the basic chart is combined with the specific chart service data.
Specifically, the basic chart is a configuration tree, and when the configuration information about the chart titles in the target chart configuration information is combined, the configuration items are actually combined to obtain the corresponding configuration tree.
The target icon configuration information comprises one or more of chart color sequence information, prompt box style information of the chart, handle configuration information, first coordinate axis information of the chart and legend information.
Specifically, the chart color sequence information indicates the colors corresponding to the respective parts in the chart, i.e., the colors corresponding to the different elements, for example, the colors of the data lines. The box style information of the chart indicates the style of the box of the chart, for example, the color of the font in the box, and the content included in the box.
Specifically, the legend information is legend information corresponding to the chart, and is used for explaining the meaning represented by each color in the chart, for example, yellow represents the passenger flow in 2020. The handle configuration information is actually mouse configuration information, for example, a shape of the mouse when it is moved onto a chart. The first coordinate axis information of the chart is the X-axis type and date format of the chart, or other coordinate axis types of the chart.
In this embodiment, the preset common component is a basic component module written for related personnel, and includes configuration information corresponding to different types of charts, as shown in fig. 5, the basic component module includes chart color sequence information corresponding to different types of charts, prompt box style information of charts, handle configuration information, first coordinate axis information of charts, and legend information, and after receiving basic configuration parameters of charts, the basic component module may parse the basic configuration parameters to find configuration information corresponding to the basic configuration, so as to generate corresponding basic charts.
And S403, rendering and displaying the page to be displayed according to the chart service data and the basic chart so that the page to be displayed displays the corresponding chart to be displayed, wherein the chart to be displayed is the rendered basic chart.
In any embodiment, optionally, when displaying the graphs to be displayed on the web page to be displayed, that is, when displaying the graphs to be displayed, each graph to be displayed has a corresponding display area, that is, only the corresponding graph to be displayed can be displayed in the display area, and when the size of the graph to be displayed is larger than that of the graph to be displayed, it indicates that the graph to be displayed cannot be completely displayed in the display area, so that the graph to be displayed needs to be displayed in the display area in a sliding manner, and the specific process is as follows: the method comprises the steps of obtaining size information of a chart to be displayed and obtaining size information of a display area corresponding to the chart to be displayed. And if the size information of the chart to be displayed is smaller than the size information of the display area corresponding to the chart to be displayed, performing scroll display on the chart to be displayed based on the size information of the display area corresponding to the chart to be displayed.
Optionally, when implementing the scrolling display of the chart to be displayed, the scrolling display is implemented by using two containers, that is, a first container defines the size of the display area, and the attribute of the container is scrollable, and a second container defines the size of the chart, and then the second container is scrollable in the first container.
In addition, optionally, when the graph to be displayed is scrolled and displayed, the scrolling may also be implemented in other manners, and details of the scrolling are not described herein again.
The size information of the display area includes the height and width of the display area, that is, the height and width of the container corresponding to the display area. The size information of the chart to be displayed includes the height and width of the chart to be displayed, i.e., the height and width of the second container corresponding to the chart to be displayed.
In any embodiment, optionally, after the graph is displayed on the webpage to be displayed, the user may further select a time period for which the graph is displayed, and the specific process is as follows: and acquiring graph display information input by a user, wherein the graph display information comprises a first target graph identifier and a time period to be displayed corresponding to the first target graph identifier. And determining the data to be displayed of the graph to be displayed corresponding to the first target graph identification according to the time period to be displayed, and displaying the data to be displayed.
Specifically, when a user views a to-be-displayed graph on a to-be-displayed page, when the user only wants to view the situation of the to-be-displayed graph within a certain period, the user drags the handle to select a displayed time period on the to-be-displayed graph, that is, to input corresponding graph display information, where the icon display information includes an identifier of the to-be-displayed graph operated by the user, that is, a first target graph identifier, and a time period selected by the user, that is, a to-be-displayed time period, and then, based on the to-be-displayed time period, content displayed by the to-be-displayed graph corresponding to the identifier is adjusted, so that the adjusted to-be-displayed graph only displays graph service data corresponding to the to-be-displayed time period, for example, the to-be-displayed graph shows a subway passenger flow rate of region 1 in each month of 2019, and the to-be-displayed time period selected by the user is 10 months to 12 months, then, subway passenger flow rates corresponding to 10 months to 12 months are screened, and adjusting the graph to be displayed so that the adjusted graph to be displayed only displays the corresponding subway passenger flow of 10-12 months.
In this embodiment, optionally, a chart element selected by a user is obtained, and the chart element is displayed according to a preset style.
Specifically, when the user places the mouse on a chart element (e.g., a particular data point or data line in the chart) on the chart to be displayed, it indicates that the user selects the chart element and needs to change the style of the chart element, i.e., the chart element is displayed according to a preset style to highlight the chart element.
Optionally, the preset pattern includes a highlight pattern and/or a bold pattern.
Further, when the style of the chart element is changed, the configuration information of the chart element selected by the user, that is, the color attribute information and/or the thickness attribute information in the attribute information is obtained, and then the color attribute information and/or the thickness attribute information is changed to adjust the color corresponding to the chart element to be a highlight color and/or to thicken the chart element.
Specifically, when the configuration information of the chart element selected by the user is obtained, the configuration information can be obtained by calling a getOption method in Echarts, and the method can obtain the configuration information corresponding to the data point or line in the chart.
The EChats are open source visualization libraries realized by JavaScript, are compatible with most of current browsers, and can provide visual, interactive and highly personalized customized data visualization charts.
In any embodiment, optionally, chart operation information input by the user is obtained, where the chart operation information includes an operation type and a second target chart identifier. Wherein the operation type includes an enlargement type and/or a download type. And executing the operation corresponding to the operation type on the target graph to be displayed corresponding to the second target graph identification.
Specifically, when a user clicks an enlargement key (for example, enlargement key 10 in fig. 3) or a download key (for example, enlargement key 20 in fig. 3) corresponding to a chart to be displayed, it indicates that the user inputs chart operation information, where the chart operation information includes an operation type and a second target chart identifier, and when the user clicks the enlargement key, the operation type is an enlargement type; when the user clicks the download button, the operation type is the download type. The second target chart identification is the identification of the chart to be displayed corresponding to the key selected by the user. For example, if the user selects to enlarge chart 1, and clicks on the enlargement button corresponding to chart 1, the operation type is the enlargement type, and the second target chart identifier is the identifier corresponding to chart 1.
After the chart operation information input by the user is acquired, the operation corresponding to the operation type is executed on the second target chart to be displayed, so that the user can amplify or download the corresponding chart, the change of data in the chart can be more conveniently and visually sensed, and the chart which can be interested by the user can be stored locally.
In addition, optionally, the user may also collect the chart to be displayed, that is, when the user clicks a collection key (e.g., collection key 30 in fig. 3) corresponding to a certain chart to be displayed, indicating that the user wants to collect the chart, the chart to be displayed is stored in the collection folder corresponding to the user, and when the user wants to view the chart next time, the user may directly search the chart from the collection folder, so as to realize quick search of the chart.
In the embodiment, the public component pre-packaged by the relevant person is obtained, namely the preset public component, and then the basic chart parameters corresponding to each chart are transmitted into the preset public component, so that the creation of a single visual chart can be quickly realized, individual parameters do not need to be configured for each chart individually, and the labor cost and the time cost are reduced.
In this embodiment, when the graphs to be displayed on the page to be displayed are configured, that is, when the basic graphs corresponding to the graphs to be displayed are determined, only the basic graph parameters of each graph to be displayed need to be acquired, and then the basic graph parameters are transmitted to the preset common component, the preset common component automatically determines the graph configuration information corresponding to each graph to be displayed from the configuration information included in the preset common component, that is, the target graph configuration information corresponding to each basic graph parameter is determined, and after the target graph configuration information corresponding to each basic graph parameter is obtained, the corresponding basic graph is generated according to the target graph configuration information, that is, the basic graph corresponding to each graph to be displayed is obtained, so that the basic graph is rapidly generated, the common component corresponding to each graph to be displayed does not need to be searched again, so that the graph configuration information corresponding to the graph to be displayed is transmitted to the corresponding common component, the efficiency of chart configuration is improved.
Fig. 6 is a schematic structural diagram of a chart processing apparatus according to an embodiment of the present invention, and as shown in fig. 6, the chart processing apparatus 600 includes: an information acquisition module 601 and a processing module 602.
The information obtaining module 601 is configured to obtain chart service data corresponding to a page to be displayed and a plurality of basic chart parameters corresponding to the page to be displayed.
The processing module 602 is configured to obtain a basic chart corresponding to each basic chart parameter according to a preset common component and a plurality of basic chart parameters.
The processing module 602 is further configured to render and display the page to be displayed according to the graph service data and the basic graph, so that the page to be displayed displays the corresponding graph to be displayed, where the graph to be displayed is the rendered basic graph.
In one possible design, the processing module 602 is further configured to:
and inputting the plurality of basic configuration parameters into a preset common component, so that the preset common component obtains target chart configuration information corresponding to the basic chart parameters for each basic chart parameter, and generates a basic chart corresponding to the basic chart parameters according to the target chart configuration information.
In one possible design, the information obtaining module 601 is further configured to:
and acquiring basic configuration parameters corresponding to the page to be displayed according to a preset parameter acquisition mode, wherein the preset parameter acquisition mode comprises a file acquisition mode and/or a code acquisition mode.
In one possible design, the information obtaining module 601 is further configured to:
and acquiring the chart type corresponding to the page to be displayed.
And for each chart type, acquiring a target parameter acquisition mode corresponding to the chart type, and acquiring basic configuration parameters corresponding to the page to be displayed and the chart type according to the target parameter acquisition mode.
In one possible design, the base icon configuration parameters include one or more of chart identification, chart color type, and chart coordinate axis information.
In one possible design, the target icon configuration information includes one or more of chart color sequence information, prompt box style information for a chart, handle configuration information, first axis information for a chart, and legend information.
In one possible design, the processing module 602 is further configured to:
the method comprises the steps of obtaining size information of a chart to be displayed and obtaining size information of a display area corresponding to the chart to be displayed.
And if the size information of the chart to be displayed is smaller than the size information of the display area corresponding to the chart to be displayed, performing scroll display on the chart to be displayed based on the size information of the display area corresponding to the chart to be displayed.
In one possible design, the processing module 602 is further configured to:
and acquiring graph display information input by a user, wherein the graph display information comprises a first target graph identifier and a time period to be displayed corresponding to the first target graph identifier.
And determining the data to be displayed of the graph to be displayed corresponding to the first target graph identification according to the time period to be displayed, and displaying the data to be displayed.
In one possible design, the processing module 602 is further configured to:
and acquiring the chart elements selected by the user, and displaying the chart elements according to a preset style.
In one possible design, the processing module 602 is further configured to:
and acquiring the chart operation information input by the user, wherein the chart operation information comprises an operation type and a second target chart identification. Wherein the operation type includes an enlargement type and/or a download type.
And executing the operation corresponding to the operation type on the target graph to be displayed corresponding to the second target graph identification.
The graph processing device provided by the embodiment of the present invention can implement the graph processing method of the above embodiment, and the implementation principle and the technical effect are similar, which are not described herein again.
Fig. 7 is a schematic diagram of a hardware structure of an electronic device according to an embodiment of the present invention. As shown in fig. 7, the electronic device 700 of the present embodiment includes: a processor 701 and a memory 702; wherein
A memory 702 for storing computer-executable instructions;
the processor 701 is configured to execute the computer-executable instructions stored in the memory to implement the steps performed by the receiving device in the above embodiments. Reference may be made in particular to the description relating to the method embodiments described above.
Alternatively, the memory 702 may be separate or integrated with the processor 701.
When the memory 702 is provided separately, the electronic device further includes a bus 703 for connecting the memory 702 and the processor 701.
The embodiment of the present invention further provides a computer-readable storage medium, where a computer executing instruction is stored in the computer-readable storage medium, and when a processor executes the computer executing instruction, the graph processing method as described above is implemented.
An embodiment of the present invention further provides a computer program product, which includes a computer program, and when the computer program is executed by a processor, the graph processing method described above is implemented.
In the embodiments provided in the present invention, it should be understood that the disclosed apparatus and method may be implemented in other ways. For example, the above-described device embodiments are merely illustrative, and for example, the division of the modules is only one logical division, and other divisions may be realized in practice, for example, a plurality of modules may be combined or integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection through some interfaces, devices or modules, and may be in an electrical, mechanical or other form.
The modules described as separate parts may or may not be physically separate, and parts displayed as modules may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of the present embodiment.
In addition, functional modules in the embodiments of the present invention may be integrated into one processing unit, or each module may exist alone physically, or two or more modules are integrated into one unit. The unit formed by the modules can be realized in a hardware form, and can also be realized in a form of hardware and a software functional unit.
The integrated module implemented in the form of a software functional module may be stored in a computer-readable storage medium. The software functional module is stored in a storage medium and includes several instructions for enabling a computer device (which may be a personal computer, a server, or a network device) or a processor (processor) to execute some steps of the methods according to the embodiments of the present application.
It should be understood that the Processor may be a Central Processing Unit (CPU), other general purpose Processor, a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), etc. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like. The steps of a method disclosed in connection with the present invention may be embodied directly in a hardware processor, or in a combination of the hardware and software modules within the processor.
The memory may comprise a high-speed RAM memory, and may further comprise a non-volatile storage NVM, such as at least one disk memory, and may also be a usb disk, a removable hard disk, a read-only memory, a magnetic or optical disk, etc.
The bus may be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, an Extended ISA (EISA) bus, or the like. The bus may be divided into an address bus, a data bus, a control bus, etc. For ease of illustration, the buses in the figures of the present application are not limited to only one bus or one type of bus.
The storage medium may be implemented by any type or combination of volatile or non-volatile memory devices, such as Static Random Access Memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic or optical disks. A storage media may be any available media that can be accessed by a general purpose or special purpose computer.
An exemplary storage medium is coupled to the processor such the processor can read information from, and write information to, the storage medium. Of course, the storage medium may also be integral to the processor. The processor and the storage medium may reside in an Application Specific Integrated Circuits (ASIC). Of course, the processor and the storage medium may reside as discrete components in an electronic device or host device.
Those of ordinary skill in the art will understand that: all or a portion of the steps of implementing the above-described method embodiments may be performed by hardware associated with program instructions. The foregoing program may be stored in a computer-readable storage medium. When executed, the program performs steps comprising the method embodiments described above; and the aforementioned storage medium includes: various media that can store program codes, such as ROM, RAM, magnetic or optical disks.
Finally, it should be noted that: the above embodiments are only used to illustrate the technical solution of the present invention, and not to limit the same; while the invention has been described in detail and with reference to the foregoing embodiments, it will be understood by those skilled in the art that: the technical solutions described in the foregoing embodiments may still be modified, or some or all of the technical features may be equivalently replaced; and the modifications or the substitutions do not make the essence of the corresponding technical solutions depart from the scope of the technical solutions of the embodiments of the present invention.

Claims (15)

1. A chart processing method, comprising:
obtaining chart business data corresponding to a page to be displayed and a plurality of basic chart parameters corresponding to the page to be displayed;
obtaining a basic chart corresponding to each basic chart parameter according to a preset common component and the plurality of basic chart parameters;
and rendering and displaying the page to be displayed according to the chart service data and the basic chart so as to enable the page to be displayed to display the corresponding chart to be displayed, wherein the chart to be displayed is the rendered basic chart.
2. The method of claim 1, wherein obtaining a base chart corresponding to each base chart parameter according to a preset common component and the plurality of base chart parameters comprises:
and inputting the plurality of basic configuration parameters into the preset common component, so that the preset common component obtains target chart configuration information corresponding to the basic chart parameters for each basic chart parameter, and generates a basic chart corresponding to the basic chart parameters according to the target chart configuration information.
3. The method according to claim 1, wherein the obtaining of the plurality of basic chart parameters corresponding to the page to be displayed comprises:
and acquiring basic configuration parameters corresponding to the page to be displayed according to a preset parameter acquisition mode, wherein the preset parameter acquisition mode comprises a file acquisition mode and/or a code acquisition mode.
4. The method according to claim 3, wherein the obtaining of the plurality of basic chart parameters corresponding to the page to be displayed comprises:
acquiring a chart type corresponding to a page to be displayed;
and for each chart type, acquiring a target parameter acquisition mode corresponding to the chart type, and acquiring basic configuration parameters corresponding to the page to be displayed and the chart type according to the target parameter acquisition mode.
5. The method of claim 1, wherein the base icon configuration parameters include one or more of chart identification, chart color type, and chart coordinate axis information.
6. The method of claim 2, wherein the target icon configuration information includes one or more of chart color sequence information, prompt box style information for a chart, handle configuration information, first axis information for a chart, and legend information.
7. The method of claim 1, further comprising:
acquiring the size information of the chart to be displayed and acquiring the size information of a display area corresponding to the chart to be displayed;
and if the size information of the chart to be displayed is smaller than the size information of the display area corresponding to the chart to be displayed, performing scroll display on the chart to be displayed based on the size information of the display area corresponding to the chart to be displayed.
8. The method of claim 1, further comprising:
acquiring graph display information input by a user, wherein the graph display information comprises a first target graph identifier and a corresponding time period to be displayed;
and determining the data to be displayed of the graph to be displayed corresponding to the first target graph identification according to the time period to be displayed, and displaying the data to be displayed.
9. The method of claim 1, further comprising:
and acquiring the chart elements selected by the user, and displaying the chart elements according to a preset style.
10. The method according to any one of claims 1 to 9, further comprising:
obtaining diagram operation information input by a user, wherein the diagram operation information comprises an operation type and a second target diagram identifier; wherein the operation type comprises an amplification type and/or a download type;
and executing the operation corresponding to the operation type on the target graph to be displayed corresponding to the second target graph identification.
11. A chart processing apparatus, comprising:
the information acquisition module is used for acquiring chart service data corresponding to a page to be displayed and a plurality of basic chart parameters corresponding to the page to be displayed;
the processing module is used for obtaining a basic chart corresponding to each basic chart parameter according to a preset common component and the plurality of basic chart parameters;
the processing module is further configured to render and display the page to be displayed according to the graph service data and the basic graph, so that the page to be displayed displays a corresponding graph to be displayed, where the graph to be displayed is a rendered basic graph.
12. The device of claim 11, wherein the processing module is further configured to:
and inputting the plurality of basic configuration parameters into the preset common component, so that the preset common component obtains target chart configuration information corresponding to the basic chart parameters for each basic chart parameter, and generates a basic chart corresponding to the basic chart parameters according to the target chart configuration information.
13. An electronic device, comprising: at least one processor and memory;
the memory stores computer-executable instructions;
the at least one processor executing the computer-executable instructions stored by the memory causes the at least one processor to perform the graph processing method of any of claims 1 to 10.
14. A computer-readable storage medium having computer-executable instructions stored therein, which when executed by a processor, implement the graph processing method according to any one of claims 1 to 10.
15. A computer program product comprising a computer program, characterized in that the computer program realizes the graph processing method of any one of claims 1 to 10 when executed by a processor.
CN202011563846.8A 2020-12-25 2020-12-25 Chart processing method and device Pending CN114692044A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011563846.8A CN114692044A (en) 2020-12-25 2020-12-25 Chart processing method and device

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011563846.8A CN114692044A (en) 2020-12-25 2020-12-25 Chart processing method and device

Publications (1)

Publication Number Publication Date
CN114692044A true CN114692044A (en) 2022-07-01

Family

ID=82129065

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011563846.8A Pending CN114692044A (en) 2020-12-25 2020-12-25 Chart processing method and device

Country Status (1)

Country Link
CN (1) CN114692044A (en)

Similar Documents

Publication Publication Date Title
US9336502B2 (en) Showing relationships between tasks in a Gantt chart
US20170102927A1 (en) Automated responsive grid-based layout design system
US8713471B1 (en) Method and system for providing an intelligent visual scrollbar position indicator
TWI539361B (en) Method and system for browsing books on a terminal computer
US8635529B2 (en) Page turning in electronic document readers
US9921719B2 (en) Touch display apparatus and wallpaper replacing method thereof
CN111259637A (en) Data processing method, data processing device, computer equipment and storage medium
CN104951477B (en) Method and apparatus for crossing filter data
CN115421691A (en) Data rolling method and device based on virtual list and computer equipment
US11157142B2 (en) Document processing apparatus and non-transitory computer readable medium
CN114692044A (en) Chart processing method and device
US20190265846A1 (en) Date entry user interface
CN114548040A (en) Note processing method, electronic device and storage medium
CN114063854A (en) File editing processing method and device and electronic equipment
CN112765946A (en) Chart display method and device and electronic equipment
KR101368610B1 (en) Method and system for selecting paragraph on electronic book environments
CN112417830A (en) Document page management method and device, electronic equipment and storage medium
CN113535162A (en) Front-end interface configuration method, display method and device
US20050128219A1 (en) Display enhancement apparatus and method
JP6081121B2 (en) Accounting processing apparatus, accounting processing system, screen switching method and screen switching program
US11908050B2 (en) Graphical user interface
US11127177B2 (en) Technology for generating product designs using multiple canvases
CN107729303A (en) A kind of chart display method and device
US11941343B2 (en) Methods for recognizing and interpreting graphical elements to create and operate a web site with input possibilities
WO2022170913A1 (en) Text content presentation method and apparatus, and computer device and storage medium

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