CN112732246A - Data visualization method and device based on HTML template and electronic equipment - Google Patents
Data visualization method and device based on HTML template and electronic equipment Download PDFInfo
- Publication number
- CN112732246A CN112732246A CN202110044921.8A CN202110044921A CN112732246A CN 112732246 A CN112732246 A CN 112732246A CN 202110044921 A CN202110044921 A CN 202110044921A CN 112732246 A CN112732246 A CN 112732246A
- Authority
- CN
- China
- Prior art keywords
- html
- chart
- html template
- visualization
- 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
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The embodiment of the invention discloses a data visualization method and device based on an HTML template and electronic equipment, wherein the method comprises the following steps: configuring an HTML template of a hypertext markup language, and binding HTML elements and a chart; receiving a page visualization request; extracting a billboard identification and a target HTML template from the page visualization request; obtaining a bound chart object set according to the target HTML template; and performing page visualization according to the chart object set. The method adopts the HTML webpage as a data visualization page template, and generates data visualization HTML webpage codes after the visualization codes are analyzed and inserted by a visualization page engine, and the data visualization HTML webpage codes are sent to a browser end and rendered into the data visualization page.
Description
Technical Field
The embodiment of the invention relates to the field of data visualization, in particular to a data visualization method and device based on an HTML (Hyper Text Markup Language) template and an electronic device.
Background
With the rapid development of information technology, enterprises accumulate a large amount of data, mine and analyze the data, display the data in a visual and friendly form, and provide support for management decisions, so that the data visualization is a necessary technical means for realizing the requirements, and the strong requirements of the enterprises are met. At present, aiming at increasing data visualization requirements, many manufacturers have developed data visualization systems, and users can customize data visualization functions according to their own business characteristics.
In the existing data visualization system, when a data visualization page is customized, one mode is a mode of compiling a local visualization page code fragment, and the other mode is a drag mode without codes, although the two modes simplify part of operations, the whole visualization page code is automatically generated by the system, so that the flexibility and the expansibility of the customized visualization page are greatly reduced, a user can only use a page component provided by the system, the visualization page code cannot be completely controlled and freely edited, and a personalized data visualization page cannot be constructed.
Disclosure of Invention
The embodiment of the invention aims to provide a data visualization method, a data visualization device and electronic equipment based on an HTML (hypertext markup language) template, which are used for solving the problems that the existing user cannot completely control and freely edit a visualized page code and cannot construct a personalized data visualized page (the technical problem which can be solved by the sole authority).
In order to achieve the above object, the embodiments of the present invention mainly provide the following technical solutions:
in a first aspect, an embodiment of the present invention provides a data visualization method based on an HTML template, including:
configuring an HTML template of a hypertext markup language, and binding HTML elements and a chart;
receiving a page visualization request;
extracting a billboard identification and a target HTML template from the page visualization request;
obtaining a bound chart object set according to the target HTML template;
and performing page visualization according to the chart object set.
According to one embodiment of the invention, configuring a hypertext markup language (HTML) template and binding HTML elements and a chart, comprises:
defining and configuring a chart and a billboard;
adding a chart identifier attribute to an HTML element in an HTML template of the billboard, binding an attribute value to the chart identifier, and adding a chart configuration extension attribute.
According to an embodiment of the present invention, obtaining a bound graph object set according to the target HTML template includes:
and loading and analyzing the webpage code of the target HTML template to obtain a chart object set bound by the target HTML template.
According to one embodiment of the invention, page visualization is performed according to the chart object set, and the page visualization comprises the following steps:
generating a visual webpage code segment according to the chart object set;
merging the webpage code and the visualized webpage code fragment into a visualized HTML webpage code;
and performing page visualization according to the visualized HTML webpage code.
In a second aspect, an embodiment of the present invention further provides a data visualization apparatus based on an HTML template, including:
the configuration module is used for configuring an HTML template of the hypertext markup language and binding HTML elements and the chart;
the receiving module is used for receiving a page visualization request;
the control processing module is used for extracting a signboard identifier and a target HTML template from the page visualization request and obtaining a bound chart object set according to the target HTML template;
and the page visualization module is used for carrying out page visualization according to the chart object set.
According to one embodiment of the invention, the configuration module is used for defining and configuring the chart and the kanban, adding a chart identifier attribute to an HTML element in an HTML template of the kanban, binding an attribute value to the chart identifier, and adding a chart configuration extension attribute.
According to one embodiment of the invention, the control processing module is used for loading and analyzing the webpage code of the target HTML template to obtain the chart object set bound by the target HTML template.
According to an embodiment of the present invention, the page visualization module is configured to generate a visualized webpage code fragment according to the chart object set, and combine the webpage code and the visualized webpage code fragment into a visualized HTML webpage code, so as to perform page visualization according to the visualized HTML webpage code.
In a third aspect, an embodiment of the present invention further provides an electronic device, including: at least one processor and at least one memory; the memory is to store one or more program instructions; the processor is configured to execute one or more program instructions to perform the method for data visualization based on HTML templates according to the first aspect.
In a fourth aspect, an embodiment of the present invention further provides a computer-readable storage medium containing one or more program instructions for executing the method for data visualization based on HTML templates according to the first aspect.
The technical scheme provided by the embodiment of the invention at least has the following advantages:
according to the data visualization method, device and electronic equipment based on the HTML template, provided by the embodiment of the invention, the HTML webpage is used as the data visualization page template, the visualization page engine analyzes and inserts the visualization code, then the data visualization HTML webpage code is generated and sent to the browser end, and the data visualization page is rendered.
Drawings
Fig. 1 is a flowchart of a data visualization method based on an HTML template according to an embodiment of the present invention.
Fig. 2 is a detailed flowchart of a data visualization method based on an HTML template according to an example of the present invention.
Fig. 3 is a block diagram of a data visualization apparatus based on an HTML template according to an embodiment of the present invention.
Detailed Description
The following description of the embodiments of the present invention is provided for illustrative purposes, and other advantages and effects of the present invention will become apparent to those skilled in the art from the present disclosure.
In the following description, for purposes of explanation and not limitation, specific details are set forth such as particular system structures, interfaces, techniques, etc. in order to provide a thorough understanding of the present invention. It will be apparent, however, to one skilled in the art that the present invention may be practiced in other embodiments that depart from these specific details. In other instances, detailed descriptions of well-known systems, circuits, and methods are omitted so as not to obscure the description of the present invention with unnecessary detail.
In the description of the present invention, it is to be understood that the terms "first" and "second" are used for descriptive purposes only and are not to be construed as indicating or implying relative importance.
In the description of the present invention, it is to be noted that, unless otherwise explicitly specified or limited, the terms "connected" and "connected" are to be interpreted broadly, e.g., as meaning directly connected or indirectly connected through an intermediate. The specific meanings of the above terms in the present invention can be understood in specific cases to those skilled in the art.
Fig. 1 is a flowchart of a data visualization method based on an HTML template according to an embodiment of the present invention. As shown in fig. 1, a data visualization method based on an HTML template according to an embodiment of the present invention includes:
s1: and configuring an HTML template of a hypertext markup language, and binding the HTML elements and the chart.
Fig. 2 is a detailed flowchart of a data visualization method based on an HTML template according to an example of the present invention. As shown in fig. 2, a chart is defined by the chart management module, and information such as ID, name, type, and data set of the chart is entered. The chart describes visual components such as a line chart, a bar chart and the like which can be drawn and displayed in a webpage, the chart type is used for identifying the visual component type which the chart is expected to draw, the chart data set describes data set information required for drawing the visual components, and the data can come from a data source such as a database, a file and the like.
The billboard is defined by the billboard management module, and information such as the ID, name, HTML template resource and the like of the billboard is input. The billboard describes a data visualization page that can be rendered by a browser, the HTML template of the billboard is a common HTML web page, and the HTML template resources are resource files, such as CSS, Javascript, etc., on which the HTML template web page depends. A billboard may contain HTML templates and HTML template resources of multiple different names.
And editing an HTML template of the billboard, adding a chart ID attribute for an HTML element in the HTML template, setting the attribute value binding as a chart ID, and adding a chart configuration extended attribute.
The chart configuration extended attribute is an extended attribute added on a chart element and is used for configuring the characteristics of color, appearance, interaction and the like of the corresponding visual component. Illustratively, the foreground color may be set to red by the chart configuration extension attribute, or the chart may be automatically resized.
S2: a page visualization request is received.
Specifically, the method is used for inputting a visualization page address at a browser end and sending a visualization request to a visualization page engine at a server end, wherein the request comprises a billboard ID and HTML template name information.
S3: and extracting the billboard identification and the target HTML template from the page visualization request.
Specifically, the visualization page engine loads corresponding HTML template webpage codes according to the signboard ID and the HTML template name information contained in the request.
S4: and obtaining a bound chart object set according to the target HTML template.
And the visual page engine loads corresponding HTML template webpage codes according to the signboard ID and the HTML template name information contained in the request.
And the visual page engine analyzes the HTML template webpage codes, analyzes the bound chart ID sets from all chart elements contained in the HTML template webpage codes, and loads the chart sets corresponding to the chart IDs.
S5: and performing page visualization according to the chart object set.
Specifically, the visualized page engine generates visualized webpage code fragments corresponding to the chart set, and the code fragments can be executed by a browser, construct a browser-side chart object, read the chart configuration extended attribute on the chart element, and draw the chart configuration extended attribute as a visualized component. The browser-side chart object contains basic chart information and an API for controlling the state of the corresponding visual component.
The visualized page engine inserts the visualized webpage code fragments into HTML template webpage codes and combines the visualized webpage code fragments to generate a new visualized HTML webpage code, and the logic of the original HTML template codes is not influenced by the combined webpage codes.
And the visual page engine sends the generated visual HTML webpage code as a visual response to the browser end, and the browser executes the visual webpage code fragment, draws a visual component and finally renders the visual webpage into a data visual page.
According to the data visualization method based on the HTML template, provided by the embodiment of the invention, the HTML webpage is used as the data visualization page template, the visualization page engine analyzes and inserts the visualization code, and then the data visualization HTML webpage code is generated and sent to the browser end to be rendered into the data visualization page.
Fig. 3 is a block diagram of a data visualization apparatus based on an HTML template according to an embodiment of the present invention. As shown in fig. 3, the data visualization apparatus based on the HTML template according to the embodiment of the present invention includes: a configuration module 100, a receiving module 200, a control processing module 300 and a page visualization module 400.
The configuration module 100 is configured to configure an HTML template of a hypertext markup language, and bind HTML elements and a chart. The receiving module 200 is configured to receive a page visualization request. The control processing module 300 is configured to extract the billboard identifier and the target HTML template from the page visualization request, and obtain a bound chart object set according to the target HTML template. The page visualization module 400 is used for page visualization according to a set of chart objects.
In an embodiment of the present invention, the configuration module 100 is configured to define and configure a chart and a kanban, add a chart identifier attribute to an HTML element in an HTML template of the kanban, bind an attribute value as a chart identifier, and add a chart configuration extension attribute.
In an embodiment of the present invention, the control processing module 300 is configured to load and parse the web page code of the target HTML template, so as to obtain a graph object set bound to the target HTML template.
In an embodiment of the present invention, the page visualization module 400 is configured to generate a visualized webpage code fragment according to the chart object set, and combine the webpage code and the visualized webpage code fragment into a visualized HTML webpage code, so as to perform page visualization according to the visualized HTML webpage code.
It should be noted that, a specific implementation of the data visualization apparatus based on the HTML template in the embodiment of the present invention is similar to a specific implementation of the data visualization method based on the HTML template in the embodiment of the present invention, and specific reference is specifically made to the description of the data visualization method based on the HTML template, and details are not repeated in order to reduce redundancy.
In addition, other structures and functions of the data visualization apparatus based on the HTML template according to the embodiment of the present invention are known to those skilled in the art, and are not described in detail for reducing redundancy.
An embodiment of the present invention further provides an electronic device, including: at least one processor and at least one memory; the memory is to store one or more program instructions; the processor is configured to execute one or more program instructions to perform the method for data visualization based on an HTML template according to the first aspect.
The disclosed embodiments of the present invention provide a computer-readable storage medium having stored therein computer program instructions, which, when run on a computer, cause the computer to execute the above-mentioned HTML template-based data visualization method.
In an embodiment of the invention, the processor may be an integrated circuit chip having signal processing capability. The Processor may be a general purpose Processor, a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field Programmable Gate Array (FPGA) or other Programmable logic device, discrete Gate or transistor logic device, discrete hardware component.
The various methods, steps and logic blocks disclosed in the embodiments of the present invention may be implemented or performed. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like. The steps of the method disclosed in connection with the embodiments of the present invention may be directly implemented by a hardware decoding processor, or implemented by a combination of hardware and software modules in the decoding processor. The software module may be located in ram, flash memory, rom, prom, or eprom, registers, etc. storage media as is well known in the art. The processor reads the information in the storage medium and completes the steps of the method in combination with the hardware.
The storage medium may be a memory, for example, which may be volatile memory or nonvolatile memory, or which may include both volatile and nonvolatile memory.
The nonvolatile Memory may be a Read-Only Memory (ROM), a Programmable ROM (PROM), an Erasable PROM (EPROM), an Electrically Erasable PROM (EEPROM), or a flash Memory.
The volatile Memory may be a Random Access Memory (RAM) which serves as an external cache. By way of example and not limitation, many forms of RAM are available, such as Static random access memory (Static RAM, SRAM), Dynamic RAM (DRAM), Synchronous DRAM (SDRAM), Double Data Rate SDRAM (ddr Data Rate SDRAM), Enhanced SDRAM (ESDRAM), synchlink DRAM (SLDRAM), and Direct Rambus RAM (DRRAM).
The storage media described in connection with the embodiments of the invention are intended to comprise, without being limited to, these and any other suitable types of memory.
Those skilled in the art will appreciate that the functionality described in the present invention may be implemented in a combination of hardware and software in one or more of the examples described above. When software is applied, the corresponding functionality may be stored on or transmitted over as one or more instructions or code on a computer-readable medium. Computer-readable media includes both computer storage media and communication media including any medium that facilitates transfer of a computer program from one place to another. A storage media may be any available media that can be accessed by a general purpose or special purpose computer.
The above-mentioned embodiments, objects, technical solutions and advantages of the present invention are further described in detail, it should be understood that the above-mentioned embodiments are only exemplary embodiments of the present invention, and are not intended to limit the scope of the present invention, and any modifications, equivalent substitutions, improvements and the like made on the basis of the technical solutions of the present invention should be included in the scope of the present invention.
Claims (10)
1. A data visualization method based on an HTML template is characterized by comprising the following steps:
configuring an HTML template of a hypertext markup language, and binding HTML elements and a chart;
receiving a page visualization request;
extracting a billboard identification and a target HTML template from the page visualization request;
obtaining a bound chart object set according to the target HTML template;
and performing page visualization according to the chart object set.
2. A method for HTML template based data visualization according to claim 1, wherein configuring a hypertext markup language HTML template and binding HTML elements and charts comprises:
defining and configuring a chart and a billboard;
adding a chart identifier attribute to an HTML element in an HTML template of the billboard, binding an attribute value to the chart identifier, and adding a chart configuration extension attribute.
3. A method for HTML template based data visualization according to claim 2, wherein obtaining a set of bound chart objects from the target HTML template comprises:
and loading and analyzing the webpage code of the target HTML template to obtain a chart object set bound by the target HTML template.
4. A method for HTML template based data visualization according to claim 3, wherein page visualization according to said set of chart objects comprises:
generating a visual webpage code segment according to the chart object set;
merging the webpage code and the visualized webpage code fragment into a visualized HTML webpage code;
and performing page visualization according to the visualized HTML webpage code.
5. An HTML template-based data visualization device, comprising:
the configuration module is used for configuring an HTML template of the hypertext markup language and binding HTML elements and the chart;
the receiving module is used for receiving a page visualization request;
the control processing module is used for extracting a signboard identifier and a target HTML template from the page visualization request and obtaining a bound chart object set according to the target HTML template;
and the page visualization module is used for carrying out page visualization according to the chart object set.
6. An HTML template-based data visualization device as recited in claim 5, wherein said configuration module is configured to define and configure a chart and a kanban, add a chart identifier attribute to an HTML element in the kanban HTML template, bind an attribute value to said chart identifier, and add a chart configuration extension attribute.
7. The HTML template-based data visualization device according to claim 6, wherein said control processing module is configured to load and parse a web page code of said target HTML template, thereby obtaining a set of chart objects bound to said target HTML template.
8. The apparatus according to claim 7, wherein the page visualization module is configured to generate a visualized webpage code segment according to the chart object set, and combine the webpage code and the visualized webpage code segment into a visualized HTML webpage code, so as to perform page visualization according to the visualized HTML webpage code.
9. An electronic device, characterized in that the electronic device comprises: at least one processor and at least one memory;
the memory is to store one or more program instructions;
the processor, configured to execute one or more program instructions to perform the method for HTML template based data visualization according to any one of claims 1-4.
10. A computer-readable storage medium having one or more program instructions embodied therein for performing the method of HTML template based data visualization of any one of claims 1-4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110044921.8A CN112732246A (en) | 2021-01-13 | 2021-01-13 | Data visualization method and device based on HTML template and electronic equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110044921.8A CN112732246A (en) | 2021-01-13 | 2021-01-13 | Data visualization method and device based on HTML template and electronic equipment |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112732246A true CN112732246A (en) | 2021-04-30 |
Family
ID=75592758
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110044921.8A Pending CN112732246A (en) | 2021-01-13 | 2021-01-13 | Data visualization method and device based on HTML template and electronic equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112732246A (en) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113127580A (en) * | 2021-05-08 | 2021-07-16 | 中国南方电网有限责任公司超高压输电公司检修试验中心 | Power grid data visualization method, device, equipment and medium |
| CN113869016A (en) * | 2021-09-28 | 2021-12-31 | 城云科技（中国）有限公司 | Chart configuration method, device and computer program product |
| CN113918152A (en) * | 2021-10-20 | 2022-01-11 | 北京德塔精要信息技术有限公司 | Low-code application development method and equipment in page building process |
| CN115131006A (en) * | 2022-08-29 | 2022-09-30 | 云账户技术(天津)有限公司 | Data chart mail sending method and device |
| CN116048480A (en) * | 2023-04-04 | 2023-05-02 | 青岛普瑞盛医药科技有限公司 | Method and device for automatically generating chart based on code tool |
-
2021
- 2021-01-13 CN CN202110044921.8A patent/CN112732246A/en active Pending
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113127580A (en) * | 2021-05-08 | 2021-07-16 | 中国南方电网有限责任公司超高压输电公司检修试验中心 | Power grid data visualization method, device, equipment and medium |
| CN113869016A (en) * | 2021-09-28 | 2021-12-31 | 城云科技（中国）有限公司 | Chart configuration method, device and computer program product |
| CN113918152A (en) * | 2021-10-20 | 2022-01-11 | 北京德塔精要信息技术有限公司 | Low-code application development method and equipment in page building process |
| CN113918152B (en) * | 2021-10-20 | 2022-07-01 | 北京德塔精要信息技术有限公司 | Low-code application development method and equipment in page building process |
| CN115131006A (en) * | 2022-08-29 | 2022-09-30 | 云账户技术(天津)有限公司 | Data chart mail sending method and device |
| CN116048480A (en) * | 2023-04-04 | 2023-05-02 | 青岛普瑞盛医药科技有限公司 | Method and device for automatically generating chart based on code tool |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112732246A (en) | Data visualization method and device based on HTML template and electronic equipment | |
| CN108038134B (en) | Page display method and device, storage medium and electronic equipment | |
| US11366676B2 (en) | Embedded user assistance for software applications | |
| US7627592B2 (en) | Systems and methods for converting a formatted document to a web page | |
| US20100318894A1 (en) | Modifications to Editable Elements of Web Pages Rendered in Word Processor Applications | |
| US20150302110A1 (en) | Decoupling front end and back end pages using tags | |
| US20110090230A1 (en) | Reduced Glyph Font Files | |
| CN102016833A (en) | Techniques to modify a document using a latent transfer surface | |
| US20080244740A1 (en) | Browser-independent editing of content | |
| CN109840083B (en) | Webpage component template construction method and device, computer equipment and storage medium | |
| US10318126B2 (en) | Data-driven schema for describing and executing management tasks in a graphical user interface | |
| US20190340230A1 (en) | System and method for generating websites from predefined templates | |
| CN101563680A (en) | Dynamically configured rendering of digital maps | |
| US9141596B2 (en) | System and method for processing markup language templates from partial input data | |
| US20100131585A1 (en) | Displaying information in a client/server system | |
| CN106469047A (en) | A kind of list implementation method and device | |
| CN110673847A (en) | Configuration page generation method and device, electronic equipment and readable storage medium | |
| CN106933887B (en) | Data visualization method and device | |
| CN110321504B (en) | Page processing method and device | |
| CN112116325A (en) | Examination and approval form control method and device, electronic equipment and readable storage medium | |
| CN112434330A (en) | Method, system and device for displaying front-end page and readable storage medium | |
| Oh et al. | Web app restructuring based on shadow DOMs to improve maintainability | |
| CN108549621B (en) | Method and system for seamlessly integrating electronic documents based on BS (browser/server) architecture | |
| CN111562911A (en) | Webpage editing method and device and storage medium | |
| CN110866202A (en) | Front-end paging method and device and readable 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 |