[go: up one dir, main page]
More Web Proxy on the site http://driver.im/

CN111666328A - Method and device for displaying visual chart in real time, computer equipment and storage medium - Google Patents

Method and device for displaying visual chart in real time, computer equipment and storage medium Download PDF

Info

Publication number
CN111666328A
CN111666328A CN202010355859.XA CN202010355859A CN111666328A CN 111666328 A CN111666328 A CN 111666328A CN 202010355859 A CN202010355859 A CN 202010355859A CN 111666328 A CN111666328 A CN 111666328A
Authority
CN
China
Prior art keywords
chart
page
field
data
rendering mode
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.)
Granted
Application number
CN202010355859.XA
Other languages
Chinese (zh)
Other versions
CN111666328B (en
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.)
Ping An Property and Casualty Insurance Company of China Ltd
Original Assignee
Ping An Property and Casualty Insurance Company of China 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 Ping An Property and Casualty Insurance Company of China Ltd filed Critical Ping An Property and Casualty Insurance Company of China Ltd
Priority to CN202010355859.XA priority Critical patent/CN111666328B/en
Publication of CN111666328A publication Critical patent/CN111666328A/en
Application granted granted Critical
Publication of CN111666328B publication Critical patent/CN111666328B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/26Visual data mining; Browsing structured data
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/25Integrating or interfacing systems involving database management systems
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/445Program loading or initiating
    • G06F9/44521Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Human Computer Interaction (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

The embodiment of the application belongs to the technical field of computers, and relates to a method and a device for displaying a visual chart in real time, computer equipment and a storage medium, wherein the method comprises the steps of setting a preset rendering mode in a preset interface; associating a preset interface associated with the chart page with a collection page; identifying each chart by using a first field, and mapping the first field and the mode name of the rendering mode; identifying the chart type of the chart, and packaging the chart component according to the chart type; when the situation that the user adds the chart to the collection page is detected, storing the user ID and data parameters, wherein the data parameters comprise the chart type, a first field and a mode name; when the fact that the user clicks the collection page is detected, a first field is determined according to the user ID, the chart component is loaded according to the chart type, the rendering mode is called according to the first field, and the chart is generated. The application also relates to blockchain techniques, the user ID and data parameters may be stored in blockchain nodes.

Description

Method and device for displaying visual chart in real time, computer equipment and storage medium
Technical Field
The present application relates to the field of computer technologies, and in particular, to a method and an apparatus for displaying a visual chart in real time, a computer device, and a storage medium.
Background
Data visualization, as the name implies, is to show the data relative to the obscure data in a visual and interactive chart manner, and further to visually and intuitively show the information and the law hidden behind the data. After the big data era is stepped, various industries pay more and more attention to data, and accordingly, a series of integration, mining and visual analysis are carried out on the data, infinite vitality is injected into data visualization, so that visual elements are more and more diverse, and various abundant graphs comprise bar charts, line charts, broken line charts and the like.
At present, most of data collected by the conventional user collection function is basically fixed, the chart type displayed on the data of a user collection page is unique, real-time data in a database is difficult to display on the collection page, and the real-time data is difficult to display through different chart types.
Disclosure of Invention
The embodiment of the application aims to provide a method, a device, computer equipment and a storage medium for displaying a visual chart in real time, which can display real-time data in a database through the chart on a collection page.
In order to solve the above technical problem, an embodiment of the present application provides a method for displaying a visual chart in real time, which adopts the following technical scheme:
a method for displaying a visual chart in real time, comprising the steps of:
setting a preset rendering mode in a preset interface, wherein the rendering mode is used for rendering a chart;
identifying a preset interface associated with a chart page, and associating the preset interface with a collection page to realize multiplexing of rendering modes, wherein the chart page is a page where collected charts and uncollected charts are located;
the rendering mode comprises a mode name, each chart is identified by a first field, and the first field and the mode name of the rendering mode form mapping;
identifying the chart type of each chart, and packaging different chart components according to different chart types;
when the situation that a user adds the chart to a collection page on a chart page is detected, storing and associating a current user ID and data parameters of each current chart, wherein the data parameters at least comprise a chart type, a first field, a mode name and query conditions for rendering the chart; and
when detecting that a user clicks a collection page, determining a corresponding first field according to the user ID, selecting and loading a chart component according to the chart type, selecting and calling a rendering mode according to the first field, acquiring chart data in a database according to the query condition, and generating a chart according to the called rendering mode by the chart component on the acquired chart data.
Further, the step of encapsulating different chart components according to different chart types comprises:
using echarts as a base library, and referring to corresponding components in the echarts according to chart types;
receiving a UI design draft, and configuring a chart style file according to the UI design draft;
configuring a design file according to preset logic;
and packaging the corresponding components, the chart style files and the design files in echarts to generate the chart components.
Further, the step of identifying the chart type of each chart, and packaging different chart components according to different chart types comprises:
identifying the chart type by a second field in advance;
identifying a second field of each chart, and encapsulating different chart components according to the second field;
respectively assigning component names to the different packaged chart components, and mapping the component names and the second fields;
the step of selecting and loading the chart component according to the chart type and selecting and calling the rendering mode according to the first field comprises the following steps:
and selecting and loading the chart component according to the second field, and selecting and calling the rendering mode according to the first field.
Further, according to the chart data in the database acquired by the query condition, generating a chart according to the acquired chart data in a called rendering mode through a chart component
Detecting whether the query conditions corresponding to different charts comprise storage time or not;
if the query condition comprises the storage time, acquiring the chart data in the database corresponding to the storage time according to the storage time, and generating a chart according to the acquired chart data in a called rendering mode through a chart component;
and if the query condition does not include the storage time, obtaining the chart data in the database corresponding to the current time according to the current time, and generating a chart from the obtained chart data through a chart component according to the called rendering mode.
Further, the identifying all preset interfaces associated with the chart page, after the step of associating the preset interfaces with the favorite page, further includes:
encapsulating a public ajax request in a request method for calling when a chart is rendered;
the step of selecting the loaded chart component according to the chart type and the called rendering mode according to the first field comprises the following steps:
verifying the chart in the collection page according to the stored data parameters;
if the verification is passed, selecting and loading the chart component according to the chart type, and selecting and calling the rendering mode according to the first field;
and calling a public ajax request to request the database to acquire chart data.
Further, the step of verifying the chart in the collection page according to the stored data parameters includes:
when detecting that a user opens a chart page, storing the parameters of each chart in the chart page, and respectively generating corresponding chart information;
comparing the chart information with the data parameters, wherein the chart information at least comprises a chart type, a first field and a mode name;
if the chart information is consistent with the data parameters, the verification is passed.
Further, the step of setting the preset rendering mode in the preset interface includes:
different modules are arranged in the preset interface, and preset rendering modes are arranged in the different modules.
In order to solve the above technical problem, an embodiment of the present application further provides a device for displaying a visual chart in real time, which adopts the following technical scheme:
the system comprises a preset module, a chart page processing module and a display module, wherein the preset module is used for setting a preset rendering mode in a preset interface and associating different preset interfaces with corresponding chart pages respectively, and the rendering mode is used for rendering a chart;
the system comprises an association module, a graph page and a collection page, wherein the association module is used for identifying all preset interfaces associated with the graph page and associating the preset interfaces with the collection page to realize multiplexing of a rendering mode, and the graph page is a page where collected graphs and unpopulated graphs are located;
the mapping module is used for identifying each chart by using a first field and mapping the first field and the mode name of the rendering mode;
the packaging module is used for identifying the type of each chart and packaging different chart components according to different chart types;
the detection module is used for storing and associating the current user ID and the data parameters of each current chart when the fact that the chart is added to the collection page on the chart page by the user is detected, wherein the data parameters at least comprise the chart type, the first field, the mode name and the query condition of the rendered chart; and
and the generating module is used for determining a corresponding first field according to the user ID when detecting that the user clicks the collection page, selecting and loading a chart component according to the chart type, selecting and calling a rendering mode according to the first field, acquiring chart data in the database according to the query condition, and generating a chart according to the called rendering mode through the chart component by using the acquired chart data.
In order to solve the above technical problem, an embodiment of the present application further provides a computer device, which adopts the following technical solutions:
a computer device comprising a memory in which a computer program is stored and a processor, the processor implementing the steps of the method for presenting a visual chart in real time as described above when executing the computer program.
In order to solve the above technical problem, an embodiment of the present application further provides a computer-readable storage medium, which adopts the following technical solutions:
a computer-readable storage medium, on which a computer program is stored which, when being executed by a processor, carries out the steps of the above-mentioned method of presenting visual charts in real time.
Compared with the prior art, the embodiment of the application mainly has the following beneficial effects:
the method and the device have the advantages that the preset interfaces are respectively associated with the corresponding chart page and the corresponding collection page, different rendering modes are arranged in the preset interfaces, the rendering modes are selected according to the first field, multiplexing of the rendering modes is achieved, the code error rate is reduced, and meanwhile the requirement for the diversity of the rendering modes of different charts is met. Different chart components are packaged and called according to the chart types, and the data can be displayed by setting different chart components according to requirements, namely the display form of the data is not unique. According to the method and the device, the chart component, the rendering mode and the data acquisition are separately called in a mode of the chart type, the first field and the query condition, so that the scheme has good expandability and maintainability, the chart component, the rendering mode and the like can be adjusted according to actual needs, and interference to other functions cannot be caused. Meanwhile, the required chart data in the database is selected according to the query condition, so that different chart data in the database can be flexibly displayed on the collection page according to the query condition, and the data displayed on the collection page is prevented from being fixed.
Drawings
In order to more clearly illustrate the solution of the present application, the drawings needed for describing the embodiments of the present application will be briefly described below, and it is obvious that the drawings in the following description are some embodiments of the present application, and that other drawings can be obtained by those skilled in the art without inventive effort.
FIG. 1 is an exemplary system architecture diagram in which the present application may be applied;
FIG. 2 is a flow diagram of one embodiment of a method of presenting visualization charts in real-time according to the present application;
FIG. 3 is a schematic structural diagram of one embodiment of an apparatus for displaying visual charts in real time according to the present application;
FIG. 4 is a schematic block diagram of one embodiment of a computer device according to the present application.
Reference numerals: 200. a computer device; 201. a memory; 202. a processor; 203. a network interface; 300. a device for displaying the visual chart in real time; 301. presetting a module; 302. a correlation module; 303. a mapping module; 304. packaging the module; 305. a detection module; 306. and generating a module.
Detailed Description
Unless defined otherwise, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs; the terminology used in the description of the application herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the application; the terms "including" and "having," and any variations thereof, in the description and claims of this application and the description of the above figures are intended to cover non-exclusive inclusions. The terms "first," "second," and the like in the description and claims of this application or in the above-described drawings are used for distinguishing between different objects and not for describing a particular order.
Reference herein to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment can be included in at least one embodiment of the application. The appearances of the phrase in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. It is explicitly and implicitly understood by one skilled in the art that the embodiments described herein can be combined with other embodiments.
In order to make the technical solutions better understood by those skilled in the art, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings.
As shown in fig. 1, the system architecture 100 may include terminal devices 101, 102, 103, a network 104, and a server 105. The network 104 serves as a medium for providing communication links between the terminal devices 101, 102, 103 and the server 105. Network 104 may include various connection types, such as wired, wireless communication links, or fiber optic cables, to name a few.
The user may use the terminal devices 101, 102, 103 to interact with the server 105 via the network 104 to receive or send messages or the like. The terminal devices 101, 102, 103 may have various communication client applications installed thereon, such as a web browser application, a shopping application, a search application, an instant messaging tool, a mailbox client, social platform software, and the like.
The terminal devices 101, 102, 103 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, e-book readers, MP3 players (Moving picture experts Group Audio Layer III, mpeg compression standard Audio Layer 3), MP4 players (Moving picture experts Group Audio Layer IV, mpeg compression standard Audio Layer 4), laptop portable computers, desktop computers, and the like.
The server 105 may be a server providing various services, such as a background server providing support for pages displayed on the terminal devices 101, 102, 103.
It should be noted that the method for displaying the visual chart in real time provided by the embodiment of the present application is generally executed by a server/terminal device, and accordingly, the apparatus for displaying the visual chart in real time is generally disposed in the server/terminal device.
It should be understood that the number of terminal devices, networks, and servers in fig. 1 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.
With continued reference to FIG. 2, a flow diagram of one embodiment of a method of presenting visualization charts in real-time is shown, in accordance with the present application. The method for displaying the visual chart in real time comprises the following steps:
s1: the method comprises the steps of setting a preset rendering mode in a preset interface, and associating different preset interfaces with corresponding chart pages respectively, wherein the rendering mode is used for rendering charts.
In this embodiment, the front end of the present application uses an vue framework, and Vue is a set of progressive JavaScript framework for constructing a user interface. The preset interface refers to: mixin is an interface with partial implementation, reusable codes are put into the interface, and the interface is directly referred to when the codes are used for multiple times.
In step S1, the step of setting the preset rendering mode in the preset interface includes:
different modules are arranged in the preset interface, and preset rendering modes are arranged in the different modules.
In this embodiment, the sub-modules are called and placed because most of the systems are provided with different front-end page display modules, and rendering modes set in different modules are different, so that when a diagram is displayed in a collection page of the front end, two different rendering modes can be performed on the actually same diagram in the same page according to the corresponding rendering modes in different modules, and the diagram is displayed in different display modules of the front-end page respectively and simultaneously. The preset interface can be introduced into the front-end page display module for calling, or can be directly introduced into the collection page for calling, and different front-end page display modules can introduce rendering methods in the modules of the corresponding preset interfaces, so that decoupling is convenient for modules, and reusability is better.
S2: and identifying all preset interfaces associated with the chart page, and associating the preset interfaces with the collection page to realize multiplexing of a rendering mode, wherein the chart page is a page where the collected chart and the uncollected chart are located.
In this embodiment, the chart page is a page where a chart required to be collected is located, that is, a page of a collected chart, where the chart page includes a collected chart and an uncollected chart. The graphs of the collection page are from the graphs in the page needing to be collected, and the graphs of the graph page and the collection page need to be rendered; and associating the preset interface with the collection page, and multiplexing codes in the interface.
S3: the rendering mode comprises a mode name, each chart is identified by a first field, and the first field and the mode name of the rendering mode form mapping.
In this embodiment, the first field is a cardCode; after the first field is mapped with the mode name, because the mapping can be the same name, such as: abc: therefore, the format name of the rendering format is also cardCode. The rendering mode comprises a mode name, each chart is identified by a first field, and mapping can be formed between the mode name of the rendering mode and the first field through map mapping.
S4: and identifying the chart type of each chart, and packaging different chart components according to different chart types.
In the present embodiment, the charts such as the line chart, the bar chart, the ring chart and the like are packaged into different components. And packaging different types of charts such as a line graph, a bar graph and the like into different chart components, and only exposing a data format required by the rendering chart to the outside to achieve low coupling and high cohesion. The compatibility, expandability, maintainability and richness of the chart component are fully considered in the process of packaging the chart.
Specifically, in step S4, the step of packaging different chart components according to different chart types includes:
using echarts as a base library, and referring to corresponding components in the echarts according to chart types;
receiving a UI design draft, and configuring a chart style file according to the UI design draft;
configuring a design file according to preset logic;
and packaging the corresponding components, the chart style files and the design files in echarts to generate the chart components.
In this embodiment, the ECharts (Enterprise Charts) is an open source visualization library implemented by using JavaScript, and the bottom layer relies on a lightweight appropriate graphics library ZRender, thereby providing a data visualization chart which is intuitive, rich in interaction, and highly customizable. Such as the line graph: 1. using echarts as a base library, referencing its line graph components; 2. configuring a line drawing style (such as line drawing color, line drawing frame and the like) file according to the UI design draft; 3. designing a file according to a product logic configuration broken line diagram (such as the number of broken lines, whether the broken lines have elastic frames, the virtual and real of the broken lines, the numerical value range of the y coordinate direction of the broken lines and the like); 4. and packaging the line drawing assembly, the line drawing style file and the line drawing design file to generate a chart assembly.
S5: when the situation that the user adds the chart to the collection page on the chart page is detected, saving and associating the current user ID and the data parameters of each current chart, wherein the data parameters at least comprise the chart type, the first field, the mode name and the query condition for rendering the chart.
In this embodiment, the user ID functions as: each user can collect different charts, the user can only see the charts collected by the user, and the user ID is used as an index for storage in the database. And determining a method for rendering the chart by loading data according to a rendering mode name (card code) according to the graph type (renderType). The query conditions for rendering the chart are user-selectable on the page; the collected chart is bound to have query conditions; the query conditions include secondary mechanisms, channels, calibers, time, and the like.
S6: when detecting that a user clicks a collection page, determining a corresponding first field according to the user ID, selecting and loading a chart component according to the chart type, selecting and calling a rendering mode according to the first field, acquiring chart data in a database according to the query condition, and generating a chart according to the called rendering mode by the chart component on the acquired chart data.
In this embodiment, specifically, a first field is obtained; determining a mode name mapped corresponding to the first field according to the first field; and determining a corresponding rendering mode according to the mode name. When the collection page is directly opened, the rendering mode and the chart component are called to generate the chart, and real-time checking of the chart is achieved.
Specifically, according to chart data in a database acquired by a query condition, generating a chart according to the acquired chart data in a called rendering mode through a chart component
Detecting whether the query conditions corresponding to different charts comprise storage time or not;
if the query condition comprises the storage time, acquiring the chart data in the database corresponding to the storage time according to the storage time, and generating a chart according to the acquired chart data in a called rendering mode through a chart component;
and if the query condition does not include the storage time, obtaining the chart data in the database corresponding to the current time according to the current time, and generating a chart from the obtained chart data through a chart component according to the called rendering mode.
In this embodiment, the query condition in the present application may include a time for collecting the chart, i.e., a saving time. Because some graphs do not need to display the data of the current time in the database according to the latest time on the collection page, the data in the database displayed by the graphs when the graphs are initially stored need to be displayed; therefore, when the storage time appears in the query condition, the data in the database corresponding to the storage time is acquired, so that the data in the database corresponding to the storage time is displayed. Correspondingly, the query condition may not include the storage time, and then the computer loads the data in the database according to the current time (the time when the user opens the collection page), so that the latest data in the database is displayed in real time when the collection is not performed. Therefore, the storage time is distinguished from the current time for opening the collection page, and the computer judges the data which should be obtained from the database when the user opens the collection page according to whether the storage time is carried in the query condition.
Further, after step S2, namely, the identifying all preset interfaces associated with the chart page, after the step of associating the preset interfaces with the favorite page, the method further includes:
encapsulating a public ajax request in a request method for calling when a chart is rendered;
in step S6, the step of selecting and invoking the rendering mode according to the first field for the chart component selected and loaded according to the chart type includes:
verifying the chart in the collection page according to the stored data parameters;
if the verification is passed, selecting and loading the chart component according to the chart type, and selecting and calling the rendering mode according to the first field;
and calling a public ajax request to request the database to acquire chart data.
In this embodiment, ajax (Asynchronous Javascript and XML) is a web page development technology for creating an interactive web application. ajax is a technique for creating fast dynamic web pages. It may allow the developer to only get data to the server.
Encapsulating the common ajax request into a common way. The public mode comprises a public mode name which is used as a unique identifier of a server request required to be called for rendering the chart. The reason why the common ajax request is encapsulated into a common way is: and if the repeated codes are more, packaging the Ajax request for convenient calling. When the chart is rendered, a public ajax request is called. According to the method and the device, the reuse of the rendering mode is realized, the chart rendering does not need to be tested again and joint debugging on the collection page, only verification needs to be carried out, and the efficiency is improved.
The step of verifying the chart in the collection page according to the stored data parameters comprises the following steps:
when detecting that a user opens a chart page, storing the parameters of each chart in the chart page, and respectively generating corresponding chart information;
comparing the chart information with the data parameters, wherein the chart information at least comprises a chart type, a first field, a mode name and a query condition of a rendering chart;
if the chart information is consistent with the data parameters, the verification is passed;
and if the chart information is inconsistent with the data parameters, the verification is not passed.
In this embodiment, the specific verification process is as follows:
and (3) clicking and collecting the chart of the collected page: the request interface is used for transmitting the parameters to the background database;
the parameters passed are as follows:
{ renderType: 1,// rendering graph type
renderTypeName: "+"// rendering graph type name
CardCode: "+",// render graph-wise name
cardName: ",// name of rendering graph
ModuleCode: "+",// favorite diagram from which module code
modelname: "+"// favorite diagram from which module name
routerUrl:'// page route where favorite diagram is located
dimensionCodeList: "+"// query conditions for rendering graphs
dimesionnamelist:'// name of query condition for rendering chart
…}
The chart information is a parameter for traversing the initial chart saved on the chart page when the user opens the chart page. The data parameters are parameters of the corresponding chart obtained when the user collects the chart in the chart page after browsing the chart page. The method and the device take the transmitted parameters as data parameters, and when a user opens the collection page, the collection page requests to acquire the data parameters of the collected charts. If the data parameters are consistent with the chart information, the corresponding chart in the collection page and the corresponding chart in the chart page are the same chart, normal rendering can be achieved, testing and joint debugging are not needed, and efficiency is improved.
In addition, in step S4, the step of identifying the chart type of each chart and packaging different chart components according to different chart types includes:
identifying the chart type by a second field in advance;
identifying a second field of each chart, and encapsulating different chart components according to the second field;
respectively assigning component names to the different packaged chart components, and mapping the component names and the second fields;
in step S6, the step of selecting and invoking the rendering style according to the first field, where the step of selecting and loading the chart component according to the chart type, includes:
and selecting and loading the chart component according to the second field, and selecting and calling the rendering mode according to the first field.
In the present embodiment, for example: the second field includes 1, 2, and 3. The line graph is represented by field 1, the bar graph by field 2, and the ring graph by field 3. The fields are used for identifying the type of the graph, so that the computer can conveniently identify the graph, when the graph component is called by the computer, the second fields are directly identified and determined and called according to the mapping relation, the method is convenient and quick, and the reflecting speed of the computer is effectively improved.
The method and the device have the advantages that the preset interfaces are respectively associated with the corresponding chart page and the corresponding collection page, different rendering modes are arranged in the preset interfaces, the rendering modes are selected according to the first field, multiplexing of the rendering modes is achieved, the code error rate is reduced, and meanwhile the requirement for the diversity of the rendering modes of different charts is met. Different chart components are packaged and called according to the chart types, and the data can be displayed by setting different chart components according to requirements, namely the display form of the data is not unique. According to the method and the device, the chart component, the rendering mode and the data acquisition are separately called in a mode of the chart type, the first field and the query condition, so that the scheme has good expandability and maintainability, the chart component, the rendering mode and the like can be adjusted according to actual needs, and interference to other functions cannot be caused. Meanwhile, the required chart data in the database is selected according to the query condition, so that different chart data in the database can be flexibly displayed on the collection page according to the query condition, and the data displayed on the collection page is prevented from being fixed.
It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by a computer program, which can be stored in a computer-readable storage medium, and can include the processes of the embodiments of the methods described above when the computer program is executed. The storage medium may be a non-volatile storage medium such as a magnetic disk, an optical disk, a Read-only Memory (ROM), or a Random Access Memory (RAM).
It should be understood that, although the steps in the flowcharts of the figures are shown in order as indicated by the arrows, the steps are not necessarily performed in order as indicated by the arrows. The steps are not performed in the exact order shown and may be performed in other orders unless explicitly stated herein. Moreover, at least a portion of the steps in the flow chart of the figure may include multiple sub-steps or multiple stages, which are not necessarily performed at the same time, but may be performed at different times, which are not necessarily performed in sequence, but may be performed alternately or alternately with other steps or at least a portion of the sub-steps or stages of other steps.
With further reference to fig. 3, as an implementation of the method shown in fig. 2, the present application provides an embodiment of an apparatus for displaying a visual chart in real time, where the embodiment of the apparatus corresponds to the embodiment of the method shown in fig. 2, and the apparatus may be applied to various electronic devices.
As shown in fig. 3, the apparatus 300 for displaying a visual chart in real time according to the present embodiment includes: the device comprises a presetting module 301, an association module 302, a mapping module 303, a packaging module 304, a detection module 305 and a generation module 306. Wherein: the preset module 301 is configured to set a preset rendering manner in a preset interface, and associate different preset interfaces with corresponding chart pages respectively, where the rendering manner is used for rendering a chart; the association module 302 is configured to identify all preset interfaces associated with a chart page, associate the preset interfaces with a collection page, and implement multiplexing of rendering modes, where the chart page is a page where collected charts and uncontained charts are located; the mapping module 303 is configured to identify each graph by using a first field, and form a mapping between the first field and a mode name of a rendering mode, where the rendering mode includes the mode name; the packaging module 304 is configured to identify a type of each chart, and package different chart components according to different chart types; the detection module 305 is configured to, when it is detected that the user adds the chart to the collection page on the chart page, store and associate a current user ID and data parameters of each current chart, where the data parameters at least include a chart type, a first field, a mode name, and a query condition for rendering the chart; the generating module 306 is configured to, when it is detected that the user clicks the collection page, determine a corresponding first field according to the user ID, select and load a chart component according to the chart type, select and invoke a rendering mode according to the first field, obtain chart data in the database according to the query condition, and generate a chart from the obtained chart data according to the invoked rendering mode through the chart component.
In the embodiment, the rendering modes required by the chart to be rendered on the favorite page come from different preset interfaces, namely, the requirement of diversity of rendering modes on the favorite page is met. The data in the database can be displayed on the collection page in real time. The scheme of the application has good expansibility and maintainability. The packaged chart assembly and the rendering mode can be reused, and the development efficiency is improved. The method has the advantages that different types of charts are displayed on the collection page of the user, namely the display form of data is not unique, and the types of the charts displayed after collection and the data in the charts are changeable; the data showing these charts is query conditioned, i.e., the data is not fixed.
The encapsulation module 304 includes a reference submodule, a first configuration submodule, a second configuration submodule, and an encapsulation submodule. The reference sub-module is used for using echarts as a base library and referencing a corresponding component in the echarts according to the chart type; the first configuration submodule is used for receiving a UI design draft and configuring a chart style file according to the UI design draft; the second configuration submodule is used for configuring the design file according to preset logic; and the packaging sub-module is used for packaging the corresponding components, the chart style files and the design files in echarts to generate the chart components.
The encapsulation module 304 further includes an identification submodule, a recognition submodule, and a mapping submodule. The identification submodule is used for identifying the chart type by a second field in advance; the recognition submodule is used for recognizing a second field of each chart and packaging different chart components according to the second field; the mapping submodule is used for respectively assigning component names to the different encapsulated chart components and mapping the component names and the second fields; the generating module is also used for selecting and loading the chart component according to the second field and selecting and calling the rendering mode according to the first field.
The generation module comprises: the judgment submodule, the first generation submodule and the second generation submodule; the judgment sub-module is used for detecting whether the query conditions corresponding to different charts comprise storage time or not; the first generation submodule is used for acquiring chart data in a database corresponding to the storage time according to the storage time when the query condition comprises the storage time, and generating a chart from the acquired chart data according to a called rendering mode through a chart component; and the second generation submodule is used for acquiring the chart data in the database corresponding to the current time according to the current time when the storage time is not included in the query condition, and generating the chart from the acquired chart data through the chart component according to the called rendering mode.
In some optional implementations of this embodiment, the apparatus 300 further includes: and the public module is used for encapsulating the public ajax request in a request method for calling when the chart is rendered.
The generation module also comprises a verification submodule, a selection submodule and an acquisition submodule; the verification sub-module is used for verifying the diagram in the collection page according to the stored data parameters; the selection submodule is used for selecting and loading a chart component according to the chart type and selecting and calling a rendering mode according to the first field when the verification is passed; the obtaining submodule is used for requesting the database to obtain the chart data by calling a public ajax request.
The verification submodule comprises an acquisition unit, a comparison unit and a passing unit. The acquisition unit is used for storing the parameters of each chart in the chart page and respectively generating corresponding chart information when detecting that the user opens the chart page; the comparison unit is used for comparing the chart information with the data parameters, wherein the chart information at least comprises a chart type, a first field, a mode name and a query condition for rendering a chart; the passing unit is used for passing the verification when the chart information is consistent with the data parameters, and failing the verification when the chart information is inconsistent with the data parameters.
In order to solve the technical problem, an embodiment of the present application further provides a computer device. Referring to fig. 4, fig. 4 is a block diagram of a basic structure of a computer device according to the present embodiment.
The computer device 200 comprises a memory 201, a processor 202, a network interface 203 communicatively connected to each other via a system bus. It is noted that only computer device 200 having components 201 and 203 is shown, but it is understood that not all of the illustrated components are required and that more or fewer components may alternatively be implemented. As will be understood by those skilled in the art, the computer device is a device capable of automatically performing numerical calculation and/or information processing according to a preset or stored instruction, and the hardware includes, but is not limited to, a microprocessor, an Application Specific Integrated Circuit (ASIC), a Programmable Gate Array (FPGA), a Digital Signal Processor (DSP), an embedded device, and the like.
The computer device can be a desktop computer, a notebook, a palm computer, a cloud server and other computing devices. The computer equipment can carry out man-machine interaction with a user through a keyboard, a mouse, a remote controller, a touch panel or voice control equipment and the like.
The memory 201 includes at least one type of readable storage medium including a flash memory, a hard disk, a multimedia card, a card type memory (e.g., SD or DX memory, etc.), a Random Access Memory (RAM), a Static Random Access Memory (SRAM), a Read Only Memory (ROM), an Electrically Erasable Programmable Read Only Memory (EEPROM), a Programmable Read Only Memory (PROM), a magnetic memory, a magnetic disk, an optical disk, etc. In some embodiments, the storage 201 may be an internal storage unit of the computer device 200, such as a hard disk or a memory of the computer device 200. In other embodiments, the memory 201 may also be an external storage device of the computer device 200, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), or the like, provided on the computer device 200. Of course, the memory 201 may also include both internal and external storage devices of the computer device 200. In this embodiment, the memory 201 is generally used for storing an operating system installed in the computer device 200 and various application software, such as program codes of a method for displaying a visual chart in real time. Further, the memory 201 may also be used to temporarily store various types of data that have been output or are to be output.
The processor 202 may be a Central Processing Unit (CPU), controller, microcontroller, microprocessor, or other data processing chip in some embodiments. The processor 202 is generally operative to control overall operation of the computer device 200. In this embodiment, the processor 202 is configured to execute the program code stored in the memory 201 or process data, for example, execute the program code of the method for displaying the visual chart in real time.
The network interface 203 may comprise a wireless network interface or a wired network interface, and the network interface 203 is generally used for establishing communication connection between the computer device 200 and other electronic devices.
In the embodiment, the method and the device realize that different types of charts are displayed on the collection page of the user, namely the display form of data is not unique, and the types of the charts displayed after collection and the data in the charts are convertible; therefore, the real-time data in the database can be displayed through the chart on the collection page.
The present application further provides another embodiment, which is a computer-readable storage medium storing a program for displaying a visual chart in real time, where the program for displaying a visual chart in real time is executable by at least one processor to cause the at least one processor to perform the steps of the method for displaying a visual chart in real time as described above.
In the embodiment, the method and the device realize that different types of charts are displayed on the collection page of the user, namely the display form of data is not unique, and the types of the charts displayed after collection and the data in the charts are convertible; namely, the real-time data in the database can be displayed through the chart on the collection page
Through the above description of the embodiments, those skilled in the art will clearly understand that the method of the above embodiments can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware, but in many cases, the former is a better implementation manner. Based on such understanding, the technical solutions of the present application may be embodied in the form of a software product, which is stored in a storage medium (such as ROM/RAM, magnetic disk, optical disk) and includes instructions for enabling a terminal device (such as a mobile phone, a computer, a server, an air conditioner, or a network device) to execute the method according to the embodiments of the present application.
The block chain is a novel application mode of computer technologies such as distributed data storage, point-to-point transmission, a consensus mechanism, an encryption algorithm and the like. A block chain (Blockchain), which is essentially a decentralized database, is a series of data blocks associated by using a cryptographic method, and each data block contains information of a batch of network transactions, so as to verify the validity (anti-counterfeiting) of the information and generate a next block. The blockchain may include a blockchain underlying platform, a platform product service layer, an application service layer, and the like.
It is to be understood that the above-described embodiments are merely illustrative of some, but not restrictive, of the broad invention, and that the appended drawings illustrate preferred embodiments of the invention and do not limit the scope of the invention. This application is capable of embodiments in many different forms and is provided for the purpose of enabling a thorough understanding of the disclosure of the application. Although the present application has been described in detail with reference to the foregoing embodiments, it will be apparent to one skilled in the art that the present application may be practiced without modification or with equivalents of some of the features described in the foregoing embodiments. All equivalent structures made by using the contents of the specification and the drawings of the present application are directly or indirectly applied to other related technical fields and are within the protection scope of the present application.

Claims (10)

1. A method for displaying a visual chart in real time, comprising the steps of:
setting a preset rendering mode in a preset interface, and associating different preset interfaces with corresponding chart pages respectively, wherein the rendering mode is used for rendering charts;
identifying all preset interfaces associated with a chart page, and associating the preset interfaces with a collection page to realize multiplexing of a rendering mode, wherein the chart page is a page where collected charts and uncollected charts are located;
the rendering mode comprises a mode name, each chart is identified by a first field, and the first field and the mode name of the rendering mode form mapping;
identifying the chart type of each chart, and packaging different chart components according to different chart types;
when the situation that a user adds the chart to a collection page on a chart page is detected, storing and associating a current user ID and data parameters of each current chart, wherein the data parameters at least comprise a chart type, a first field, a mode name and query conditions for rendering the chart; and
when detecting that a user clicks a collection page, determining a corresponding first field according to the user ID, selecting and loading a chart component according to the chart type, selecting and calling a rendering mode according to the first field, acquiring chart data in a database according to the query condition, and generating a chart according to the called rendering mode by the chart component on the acquired chart data.
2. A method for presenting visual charts in real time as set forth in claim 1 wherein the step of packaging different chart components according to different chart types includes:
using echarts as a base library, and referring to corresponding components in the echarts according to chart types;
receiving a UI design draft, and configuring a chart style file according to the UI design draft;
configuring a design file according to preset logic;
and packaging the corresponding components, the chart style files and the design files in echarts to generate the chart components.
3. A method for presenting visual charts in real time as recited in claim 1 wherein said step of identifying a chart type for each chart and packaging different chart components according to different said chart types comprises:
identifying the chart type by a second field in advance;
identifying a second field of each chart, and encapsulating different chart components according to the second field;
respectively assigning component names to the different packaged chart components, and mapping the component names and the second fields;
the step of selecting and loading the chart component according to the chart type and selecting and calling the rendering mode according to the first field comprises the following steps:
and selecting and loading the chart component according to the second field, and selecting and calling the rendering mode according to the first field.
4. The method for displaying visual charts in real time according to claim 1, wherein the step of generating the chart from the acquired chart data in the database by the chart component in the called rendering mode according to the chart data acquired from the query condition comprises:
detecting whether the query conditions corresponding to different charts comprise storage time or not;
if the query condition comprises the storage time, acquiring the chart data in the database corresponding to the storage time according to the storage time, and generating a chart according to the acquired chart data in a called rendering mode through a chart component;
and if the query condition does not include the storage time, obtaining the chart data in the database corresponding to the current time according to the current time, and generating a chart from the obtained chart data through a chart component according to the called rendering mode.
5. The method for displaying a visual chart in real time according to claim 1, wherein the step of identifying all preset interfaces associated with the chart page further comprises, after the step of associating the preset interfaces with the favorite page:
encapsulating a public ajax request in a request method for calling when a chart is rendered;
the step of selecting the loaded chart component according to the chart type and the called rendering mode according to the first field comprises the following steps:
verifying the chart in the collection page according to the stored data parameters;
if the verification is passed, selecting and loading the chart component according to the chart type, and selecting and calling the rendering mode according to the first field;
and calling a public ajax request to request the database to acquire chart data.
6. A method for displaying a visual chart in real time according to claim 5, wherein the step of verifying the chart in the collection page according to the saved data parameters comprises the following steps:
when detecting that a user opens a chart page, storing the parameters of each chart in the chart page, and respectively generating corresponding chart information;
comparing the chart information with the data parameters, wherein the chart information at least comprises a chart type, a first field and a mode name;
if the chart information is consistent with the data parameters, the verification is passed.
7. A method for displaying visual charts in real time according to any one of claims 1 to 6, wherein the step of setting a preset rendering mode in a preset interface includes:
different modules are arranged in the preset interface, and preset rendering modes are arranged in the different modules.
8. An apparatus for displaying a visual chart in real time, comprising:
the system comprises a preset module, a chart page processing module and a display module, wherein the preset module is used for setting a preset rendering mode in a preset interface and associating different preset interfaces with corresponding chart pages respectively, and the rendering mode is used for rendering a chart;
the system comprises an association module, a graph page and a collection page, wherein the association module is used for identifying all preset interfaces associated with the graph page and associating the preset interfaces with the collection page to realize multiplexing of a rendering mode, and the graph page is a page where collected graphs and unpopulated graphs are located;
the mapping module is used for identifying each chart by using a first field and mapping the first field and the mode name of the rendering mode;
the packaging module is used for identifying the type of each chart and packaging different chart components according to different chart types;
the detection module is used for storing and associating the current user ID and the data parameters of each current chart when the fact that the chart is added to the collection page on the chart page by the user is detected, wherein the data parameters at least comprise the chart type, the first field, the mode name and the query condition of the rendered chart; and
and the generating module is used for determining a corresponding first field according to the user ID when detecting that the user clicks the collection page, selecting and loading a chart component according to the chart type, selecting and calling a rendering mode according to the first field, acquiring chart data in the database according to the query condition, and generating a chart according to the called rendering mode through the chart component by using the acquired chart data.
9. A computer device, characterized in that it comprises a memory in which a computer program is stored and a processor which, when executing said computer program, carries out the steps of a method for presenting visual charts in real time according to any one of claims 1 to 7.
10. A computer-readable storage medium, characterized in that a computer program is stored on the computer-readable storage medium, which computer program, when being executed by a processor, carries out the steps of the method for presenting visual charts in real time according to any one of claims 1 to 7.
CN202010355859.XA 2020-04-29 2020-04-29 Method, device, computer equipment and storage medium for displaying visual chart in real time Active CN111666328B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010355859.XA CN111666328B (en) 2020-04-29 2020-04-29 Method, device, computer equipment and storage medium for displaying visual chart in real time

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010355859.XA CN111666328B (en) 2020-04-29 2020-04-29 Method, device, computer equipment and storage medium for displaying visual chart in real time

Publications (2)

Publication Number Publication Date
CN111666328A true CN111666328A (en) 2020-09-15
CN111666328B CN111666328B (en) 2024-10-18

Family

ID=72383015

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010355859.XA Active CN111666328B (en) 2020-04-29 2020-04-29 Method, device, computer equipment and storage medium for displaying visual chart in real time

Country Status (1)

Country Link
CN (1) CN111666328B (en)

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112433782A (en) * 2020-11-24 2021-03-02 深圳市明源云科技有限公司 Chart component loading method and device
CN113126989A (en) * 2021-04-21 2021-07-16 北京明略昭辉科技有限公司 Subject card display system and method based on data realization
CN113434590A (en) * 2021-07-21 2021-09-24 中国工商银行股份有限公司 Lightweight data visualization method and device
CN113869016A (en) * 2021-09-28 2021-12-31 城云科技(中国)有限公司 Chart configuration method, device and computer program product
CN114417203A (en) * 2021-12-22 2022-04-29 建信金融科技有限责任公司 Real-time big data visualization method and system based on echarts
CN116186125A (en) * 2023-01-31 2023-05-30 百洋智能科技集团股份有限公司 Automatic chart generation system

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20050273723A1 (en) * 2000-05-03 2005-12-08 Microsoft Corporation Accessing web pages in the background
CN102830894A (en) * 2012-05-11 2012-12-19 北京奇虎科技有限公司 Method and apparatus for bookmarking webpage
CN103064868A (en) * 2012-07-20 2013-04-24 北京飞漫软件技术有限公司 Method of adding collection/ user-defined collection of websites in hypertext markup language (HTML) 5 webpage
CN104796754A (en) * 2015-04-08 2015-07-22 天脉聚源(北京)传媒科技有限公司 Collected page display method and collected page display device
CN111078785A (en) * 2019-11-27 2020-04-28 贝壳技术有限公司 Method and device for visually displaying data, electronic equipment and storage medium

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20050273723A1 (en) * 2000-05-03 2005-12-08 Microsoft Corporation Accessing web pages in the background
CN102830894A (en) * 2012-05-11 2012-12-19 北京奇虎科技有限公司 Method and apparatus for bookmarking webpage
CN103064868A (en) * 2012-07-20 2013-04-24 北京飞漫软件技术有限公司 Method of adding collection/ user-defined collection of websites in hypertext markup language (HTML) 5 webpage
CN104796754A (en) * 2015-04-08 2015-07-22 天脉聚源(北京)传媒科技有限公司 Collected page display method and collected page display device
CN111078785A (en) * 2019-11-27 2020-04-28 贝壳技术有限公司 Method and device for visually displaying data, electronic equipment and storage medium

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112433782A (en) * 2020-11-24 2021-03-02 深圳市明源云科技有限公司 Chart component loading method and device
CN113126989A (en) * 2021-04-21 2021-07-16 北京明略昭辉科技有限公司 Subject card display system and method based on data realization
CN113434590A (en) * 2021-07-21 2021-09-24 中国工商银行股份有限公司 Lightweight data visualization method and device
CN113869016A (en) * 2021-09-28 2021-12-31 城云科技(中国)有限公司 Chart configuration method, device and computer program product
CN114417203A (en) * 2021-12-22 2022-04-29 建信金融科技有限责任公司 Real-time big data visualization method and system based on echarts
CN116186125A (en) * 2023-01-31 2023-05-30 百洋智能科技集团股份有限公司 Automatic chart generation system

Also Published As

Publication number Publication date
CN111666328B (en) 2024-10-18

Similar Documents

Publication Publication Date Title
CN111666328A (en) Method and device for displaying visual chart in real time, computer equipment and storage medium
CN112148674A (en) Log data processing method and device, computer equipment and storage medium
CN106649488B (en) Method and device for calling multi-data-source interactive interface
CN112631924A (en) Automatic testing method and device, computer equipment and storage medium
CN113254445B (en) Real-time data storage method, device, computer equipment and storage medium
CN112328486A (en) Interface automation test method and device, computer equipment and storage medium
CN113204345A (en) Page generation method and device, electronic equipment and storage medium
CN111666201A (en) Regression testing method, device, medium and electronic equipment
CN112860662A (en) Data blood relationship establishing method and device, computer equipment and storage medium
WO2023134134A1 (en) Method and apparatus for generating association viewing model, and computer device and storage medium
CN111813418A (en) Distributed link tracking method, device, computer equipment and storage medium
CN113342249B (en) Content management method, device, equipment and storage medium capable of previewing in real time
CN113434582B (en) Service data processing method and device, computer equipment and storage medium
CN110851123A (en) WebGIS power grid visualization framework construction method, system and device based on SpringMVC
CN111309558B (en) Method, device, equipment and storage medium for collecting vue event data in frame
CN117880008A (en) Gateway-based service request processing method, device, equipment and storage medium
CN110209572A (en) Ui testing method, ui testing system and terminal
CN114238391A (en) Data paging query method and device, electronic equipment and storage medium
CN114637672A (en) Automatic data testing method and device, computer equipment and storage medium
CN114371886A (en) Front-end frame assembly conversion method and device, computer equipment and storage medium
CN115934537A (en) Interface test tool generation method, device, equipment, medium and product
CN109634500B (en) User data filling method and device, terminal equipment and storage medium
CN111639936A (en) Transaction information acquisition method and device, electronic equipment and readable storage medium
CN112182083A (en) File generation method, device, equipment and storage medium
CN114328214B (en) Efficiency improving method and device for interface test case of reporting software and computer equipment

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
GR01 Patent grant
GR01 Patent grant