CN114546364A - Configuration method of visual chart assembly - Google Patents
Configuration method of visual chart assembly Download PDFInfo
- Publication number
- CN114546364A CN114546364A CN202210165616.9A CN202210165616A CN114546364A CN 114546364 A CN114546364 A CN 114546364A CN 202210165616 A CN202210165616 A CN 202210165616A CN 114546364 A CN114546364 A CN 114546364A
- Authority
- CN
- China
- Prior art keywords
- chart
- custom
- component
- parameters
- configuring
- 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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements 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/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements 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/44—Arrangements for executing specific programs
- G06F9/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
- G06F9/45533—Hypervisors; Virtual machine monitors
- G06F9/45558—Hypervisor-specific management and integration aspects
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements 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/44—Arrangements for executing specific programs
- G06F9/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
- G06F9/45533—Hypervisors; Virtual machine monitors
- G06F9/45558—Hypervisor-specific management and integration aspects
- G06F2009/45562—Creating, deleting, cloning virtual machine instances
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a configuration method of a visual chart component in the technical field of Canvas rendering chart processing, and aims to solve the technical problems that a data visual large-screen chart component is long in development period, cannot be flexibly configured, is poor in expansibility and is too high in business coupling degree. Which comprises the following steps: utilizing a pre-created chart component container to render a self-defined chart component example, and compiling chart configuration parameters in rendering elements, wherein the chart configuration parameters are configured based on the chart configuration parameters of an Echarts chart library; writing reserved self-defined chart attribute parameters in a chart component container; and releasing the configured custom chart component, and using and running the custom chart component in a visualization tool to display the display effect of the custom chart component. The invention creates the chart component container based on the Echarts chart library to render the user-defined chart component, finishes editing and configuring by a graphical interface, simplifies the development process, improves the development efficiency and can fully meet the functional requirements of a visualization tool.
Description
Technical Field
The invention relates to a configuration method of a visual chart component, and belongs to the technical field of Canvas rendering chart processing.
Background
At present, data visualization is beneficial to mining the value and rule behind data and improving decision efficiency, but the existing data visualization system needs to be developed independently aiming at a specific scene, and has low efficiency and high maintenance cost. The open source Echarts chart is a pure Javascript chart library, is compatible with most current browsers, depends on a lightweight Canvas class library ZRender at the bottom layer, provides a visual, vivid and interactive data visualization chart, and can be customized highly in a personalized way. These visualization tools do not provide visualization components for secondary development by the user.
Most websites need to design and compile codes in the process of making a visual large screen, a large number of charts are needed to render data, the difficulty of developers is greatly increased, the development efficiency is reduced, the redundant code amount is increased, and the later maintenance cost is higher. Meanwhile, the existing visualization technology supports fewer components, has poor expansibility, insufficient displayed data dimensionality and less supported user interaction, and is difficult to meet the functional requirement of a large visualization screen.
Disclosure of Invention
The invention aims to overcome the defects in the prior art, and provides a configuration method of a visual chart component, which not only simplifies the development process, improves the development efficiency, but also enhances the expansibility and reduces the business coupling degree.
In order to achieve the purpose, the invention is realized by adopting the following technical scheme:
the invention provides a configuration method of a visual chart component, which comprises the following steps:
utilizing a pre-created chart component container to render a self-defined chart component example, and compiling chart configuration parameters in rendering elements, wherein the chart configuration parameters are configured based on the chart configuration parameters of an Echarts chart library;
writing reserved self-defined chart attribute parameters in a chart component container;
and releasing the configured custom chart component, using the custom chart component in a visualization tool, and running and displaying the display effect of the custom chart component.
Further, the method for creating the chart component container comprises the following steps:
packaging and generating a render HTML function of the vector JSON file;
and rendering the third-party DOM element on the Canvas by using the render HTML function.
Furthermore, general basic chart parameters required by the user-defined chart component are configured in the JSON file, and the general basic chart parameters are written when the elements are rendered.
Further, before writing the reserved user-defined chart attribute parameters, the value types of the user-defined chart attribute parameters are predetermined according to the types and functions of the charts.
Further, the method further comprises:
and the user-defined chart attribute parameters and the general basic chart parameters are bound in a two-way mode to display charts in different forms.
Further, the self-defined chart attribute parameters comprise one or more of chart theme color, chart X/Y axis style, chart option control display and hidden, a chart data source, a chart position and a chart inclination angle.
Further, the method further comprises:
monitoring the attribute parameters of the custom chart through the layout HTML function, and updating the display effect of the custom chart component in real time when the attribute parameters of the custom chart are changed.
Compared with the prior art, the invention has the following beneficial effects:
1. the method comprises the steps of rendering a user-defined chart assembly based on a chart assembly container created by an Echarts chart library, and then using the user-defined chart assembly in a visualization tool and displaying the display effect of the user-defined chart assembly in an operating mode; the editing and the configuration are completed by a graphical interface, so that the development process is simplified, the development efficiency is improved, the expansibility is enhanced, and the service coupling degree is reduced;
2. according to the invention, the Echarts chart library is packaged by a Canvas technology, various chart components are provided for users, data visualization is rapidly constructed, access to various databases, static data and API requests is supported, and the functional requirements of visualization tools can be fully met.
Drawings
FIG. 1 is a flow chart of a method for configuring a visual chart component according to an embodiment of the present invention;
fig. 2 is a flowchart of a method for creating a chart component container for visualizing chart components according to an embodiment of the present invention.
Detailed Description
The technical solutions of the present invention are described in detail below with reference to the drawings and specific embodiments, and it should be understood that the specific features in the embodiments and examples of the present invention are described in detail in the technical solutions of the present application, and are not limited to the technical solutions of the present application, and the technical features in the embodiments and examples of the present application may be combined with each other without conflict.
The term "and/or" herein is merely an association describing an associated object, meaning that three relationships may exist, e.g., a and/or B, may mean: a exists alone, A and B exist simultaneously, and B exists alone. In addition, the character "/" herein generally indicates that the former and latter related objects are in an "or" relationship.
The first embodiment is as follows:
as shown in fig. 1, a configuration method of a visual chart component includes the following steps:
s10, rendering a user-defined chart component example by using a pre-created chart component container, and writing chart configuration parameters in rendering elements, wherein the chart configuration parameters are configured based on the chart configuration parameters of an Echarts chart library;
s20, writing reserved self-defined chart attribute parameters in the chart component container;
and S30, releasing the configured custom chart component, using the custom chart component in a visualization tool, and displaying the display effect of the custom chart component.
Referring to fig. 2, in step S10 of the present embodiment, the method for creating a chart component container includes:
s101, packaging and generating a render HTML function of a vector JSON file;
s102, rendering a third-party DOM element on a Canvas by using the renderHTML function.
Before writing the reserved custom chart attribute parameters, the value types of the custom chart attribute parameters are predetermined according to the types and functions of the charts.
In the embodiment of the present invention, optionally, the custom chart attribute parameters include one or more of a chart theme color, a chart X/Y axis style, a chart option control explicit and implicit, a chart data source, a chart position, and a chart inclination angle.
Referring to fig. 1, in this embodiment, a diagram component container is created by encapsulating an Echarts diagram library through a Canvas technology, and a user-defined diagram component is rendered by using the diagram component container to complete editing and configuration with a graphical interface, which not only simplifies the development process, improves the development efficiency, but also enhances the extensibility and reduces the service coupling degree.
Example two:
as shown in fig. 1, a configuration method of a visual chart component includes the following steps:
s10, rendering a user-defined chart component example by using a pre-created chart component container, and writing chart configuration parameters in rendering elements, wherein the chart configuration parameters are configured based on the chart configuration parameters of an Echarts chart library;
s20, writing reserved self-defined chart attribute parameters in the chart component container;
and S30, releasing the configured custom chart component, using the custom chart component in a visualization tool, and displaying the display effect of the custom chart component.
Referring to fig. 2, in step S10 of the present embodiment, the method for creating a chart component container includes:
s101, packaging and generating a render HTML function of a vector JSON file;
s102, rendering a third-party DOM element on a Canvas by using the renderHTML function.
It should be noted that, the JSON file is configured with general base charting parameters required by a custom charting component, and the general base charting parameters may be written when rendering elements. Optionally, the custom chart attribute parameters and the general basic chart parameters may be bound in two directions, and charts in different forms may be displayed by writing the custom chart attribute parameters.
Before writing the reserved custom chart attribute parameters, the value types of the custom chart attribute parameters are predetermined according to the types and functions of the charts.
In this embodiment, optionally, the custom chart attribute parameters include one or more of chart theme color, chart X/Y axis style, chart option control explicit and implicit, chart data source, chart position, and chart tilt angle. When the reserved custom chart attribute parameters are programmed, a user can flexibly configure the custom chart component in a visualization tool by selecting a proper attribute value.
The embodiment is realized on the basis of the first embodiment, after the custom chart attribute parameters are written in the step S20, the custom chart attribute parameters and the general basic chart parameters in the JSON file are bidirectionally bound, so that charts with different forms can be displayed in a visualization tool, data visualization can be quickly established, the flexibility and the expansibility of configuring custom chart components are greatly improved, and the access to various databases, static data and API requests is supported.
Example three:
a method of configuring a visual chart assembly, comprising the steps of:
as shown in fig. 1, S10, rendering the custom chart component instance by using the pre-created chart component container, writing chart configuration parameters in the rendering element, wherein the chart configuration parameters are configured based on the chart configuration parameters of the Echarts chart library;
s20, writing reserved self-defined chart attribute parameters in the chart component container;
and S30, releasing the configured custom chart component, using the custom chart component in a visualization tool, and displaying the display effect of the custom chart component.
Referring to fig. 2, in step S10 of the present embodiment, the method for creating a chart component container includes:
s101, packaging and generating a render HTML function of a vector JSON file;
s102, rendering a third-party DOM element on a Canvas by using the renderHTML function.
It should be noted that, the JSON file is configured with general base charting parameters required by a custom charting component, and the general base charting parameters may be written when rendering elements. Optionally, the custom chart attribute parameters and the general basic chart parameters are bound in a bidirectional manner, and charts in different forms can be displayed by writing the custom chart attribute parameters.
In the embodiment of the invention, the custom chart attribute parameters can be monitored through the layout HTML function, and the display effect of the custom chart component is updated in real time when the custom chart attribute parameters are changed. Optionally, the custom chart attribute parameters include one or more of chart theme color, chart X/Y axis style, chart option control explicit and implicit, chart data source, chart position, and chart inclination angle.
Before writing the reserved custom chart attribute parameters, the value types of the custom chart attribute parameters are predetermined according to the types and functions of the charts.
The embodiment is realized on the basis of the second embodiment, when a user configures the custom chart component in the visualization tool, the change of the attribute parameter of the custom chart is monitored through the layout HTML function, the display effect of the custom chart component is updated in real time, various chart components are provided for the user, data visualization is rapidly constructed, and the functional requirements of the visualization tool are fully met.
As will be appreciated by one skilled in the art, embodiments of the present application may be provided as a method, system, or computer program product. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The present application is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the application. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
The above description is only a preferred embodiment of the present invention, and it should be noted that, for those skilled in the art, several modifications and variations can be made without departing from the technical principle of the present invention, and these modifications and variations should also be regarded as the protection scope of the present invention.
Claims (7)
1. A method of configuring a visual chart assembly, comprising the steps of:
utilizing a pre-created chart component container to render a self-defined chart component example, and compiling chart configuration parameters in rendering elements, wherein the chart configuration parameters are configured based on the chart configuration parameters of an Echarts chart library;
writing reserved self-defined chart attribute parameters in a chart component container;
and releasing the configured custom chart component, using the custom chart component in a visualization tool, and running and displaying the display effect of the custom chart component.
2. A method of configuring a visual chart assembly according to claim 1 wherein the method of creating the chart assembly container comprises:
packaging and generating a render HTML function of the vector JSON file;
and rendering the third-party DOM element on the Canvas by using the render HTML function.
3. A method of configuring a visual chart assembly according to claim 2 wherein: and configuring general basic chart parameters required by a user-defined chart component in the JSON file, wherein the general basic chart parameters are written when the elements are rendered.
4. A method of configuring a visual chart assembly according to claim 3, the method further comprising:
and the user-defined chart attribute parameters and the general basic chart parameters are bidirectionally bound so as to display charts in different forms.
5. A method of configuring a visual chart assembly according to claim 1 wherein: before writing the reserved custom chart attribute parameters, the value types of the custom chart attribute parameters are predetermined according to the types and functions of the charts.
6. A method of configuring a visual chart assembly according to claim 1 wherein: the custom chart attribute parameters comprise one or more of chart theme color, chart X/Y axis style, chart option control display and hidden, a chart data source, a chart position and a chart inclination angle.
7. A method of configuring a visual chart assembly according to claim 1, the method further comprising:
monitoring the attribute parameters of the custom chart through the layout HTML function, and updating the display effect of the custom chart component in real time when the attribute parameters of the custom chart are changed.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210165616.9A CN114546364A (en) | 2022-02-23 | 2022-02-23 | Configuration method of visual chart assembly |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210165616.9A CN114546364A (en) | 2022-02-23 | 2022-02-23 | Configuration method of visual chart assembly |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114546364A true CN114546364A (en) | 2022-05-27 |
Family
ID=81676747
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210165616.9A Pending CN114546364A (en) | 2022-02-23 | 2022-02-23 | Configuration method of visual chart assembly |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114546364A (en) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114706571A (en) * | 2022-06-02 | 2022-07-05 | 杭州比智科技有限公司 | DSL-based declarative visualization chart development method and system |
| CN116126331A (en) * | 2023-02-10 | 2023-05-16 | 安芯网盾(北京)科技有限公司 | Interactive flow chart generation method and device |
| CN116212398A (en) * | 2023-03-10 | 2023-06-06 | 广州三七极耀网络科技有限公司 | Game management method, device, equipment and medium based on data center |
| CN117289930A (en) * | 2023-11-27 | 2023-12-26 | 杭州比智科技有限公司 | Construction method and system suitable for data large screen custom theme style |
-
2022
- 2022-02-23 CN CN202210165616.9A patent/CN114546364A/en active Pending
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114706571A (en) * | 2022-06-02 | 2022-07-05 | 杭州比智科技有限公司 | DSL-based declarative visualization chart development method and system |
| CN116126331A (en) * | 2023-02-10 | 2023-05-16 | 安芯网盾(北京)科技有限公司 | Interactive flow chart generation method and device |
| CN116212398A (en) * | 2023-03-10 | 2023-06-06 | 广州三七极耀网络科技有限公司 | Game management method, device, equipment and medium based on data center |
| CN116212398B (en) * | 2023-03-10 | 2023-11-03 | 广州三七极耀网络科技有限公司 | Game management method, device, equipment and medium based on data center |
| CN117289930A (en) * | 2023-11-27 | 2023-12-26 | 杭州比智科技有限公司 | Construction method and system suitable for data large screen custom theme style |
| CN117289930B (en) * | 2023-11-27 | 2024-02-02 | 杭州比智科技有限公司 | Construction method and system suitable for data large screen custom theme style |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN114546364A (en) | Configuration method of visual chart assembly | |
| US10984177B2 (en) | System and method providing responsive editing and viewing, integrating hierarchical fluid components and dynamic layout | |
| US10930080B2 (en) | System and method for creating virtual and augmented reality environment | |
| WO2016054549A1 (en) | Application prototyping tool | |
| CN112579050A (en) | Task-based configuration rendering context | |
| CN104216691A (en) | Application creating method and device | |
| CN106484394A (en) | A kind of fast software development system with double engines | |
| JP7420911B2 (en) | Systems and methods for smart interactions between website components | |
| EP3218801B1 (en) | Rapid application development method | |
| EP3171266B1 (en) | User interface widget modeling and placement | |
| CN112506500B (en) | Visual control creating method and device | |
| CN114089958A (en) | Form visual configuration method and device | |
| CN103268227A (en) | Method for rapidly developing BI platform based on EXTJS | |
| CN109614565A (en) | Webpage generating method and device | |
| CN112364496B (en) | Avionics simulation panel generation system based on HTML5 and VUE technologies | |
| CN113535165A (en) | Interface generation method and device, electronic equipment and computer readable storage medium | |
| CN111936966A (en) | Design system for creating graphical content | |
| CN112579051A (en) | Preferred automated view management | |
| US20060107220A1 (en) | Method and system for displaying an annotated file | |
| CN114153442A (en) | Large-screen visualization page configuration method and system based on visualization component | |
| CN110275923B (en) | Management method and equipment of plug-in graphics | |
| US10726621B2 (en) | Traversal selection of components for a geometric model | |
| CN116719521A (en) | Demonstrator model editing method and system and configuration software system | |
| CN116310037A (en) | Model appearance updating method and device and computing equipment | |
| CN109189537A (en) | The dynamic display method of page info calculates equipment and computer 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 |