Abstract: This article was originally published on CSDN by the technical team of Grape City. Please indicate the source of the reprint: Grape City official website , Grape City provides developers with professional development tools, solutions and services to empower developers.
Data analysis has always been a very important part of business decision-making, especially in the digital age. However, data analysis can only really work if it is continuously monitored and visualized. How to use some efficient tools to do corresponding data analysis? Front-end development reporting tool is a good choice. It can provide enterprises with visual data analysis, allowing users to quickly and accurately understand and process data, and provide support for enterprise decision-making.
However, it is not easy to develop high-quality front-end reporting tools, and developers need to master a series of key skills and abilities. The following are the three major capabilities necessary for front-end development report tools, hoping to provide you with some reference and inspiration. This article takes ActiveReportsJS, a pure front-end online report control of Grape City, as an example to explain.
ActiveReportsJS is a pure front-end online report control based on HTML5. Through the drag-and-drop cross-platform report designer and pure front-end report designer, you can quickly design Excel reports, Word documents, mobile reports, charts, data filtering, and data drilling . It can fully meet the needs of JavaScript, HTML5, Angular, Vue, React, PureJS, Nodejs and other project development for report design, display, printing and exporting. At the same time, the rich API can flexibly realize the personalized customization requirements of report creation, loading and running.
The first capability of ActiveReportsJS is framework integration.
As a pure front-end control, ActiveReportsJS supports the integration of report designers and viewers into various front-end frameworks. Here, you need to be familiar with the specific use and integration methods of each framework. The following is a specific integration for both the designer and the viewer. If you need to use it, you can refer to the following tutorial for specific implementation.
-
Designer (report designer):
Pure JS , Vue framework , React framework , Angular framework , Vite.js , Svelte.js, Nuxt.js, Next.js
-
Viewer (report viewer):
Pure JS , Vue framework , React framework , Angular framework , Vite.js , Svelte.js, Nuxt.js, Next.js
The second biggest capability of ActiveReportsJS is data processing.
Because ActiveReportsJS is a pure front-end control, the data source has the form of external file, external URL and JSON data embedded. As shown in the example below:
After the data source is set, you can create the corresponding data set. The JSON query in the data set needs to be written according to the JSONPATH. When you create it, remember to write the corresponding JSONPATH first and perform the verification operation. If the JSONPATH is correct, then after verification The query field will display the corresponding field, as shown below:
After clicking the verify button, you can also add a calculated field to process the data in the dataset. For example, manually add a calculated field to display the value of quantity*2, as shown in the following figure:
Remember not to click Verify at this time, otherwise the completed calculated fields will be cleared. After adding the calculated fields, click the Save button directly, and then the corresponding data set will be added from the original verified 3 fields to 4 fields, as shown in the figure below Show:
After the data is processed, the next step is to display the data.
The third major capability of ActiveReportsJS is data display .
For data display, ActiveReportsJS not only has different report types to display data, but also provides many components to display data, such as tables, rectangular tables, lists, strip lists and 27 chart types, and also supports data interactivity , Rich components also make data display more diverse.
The report types include RDL/page report. The RDL report is a single-page data display, that is, all the contents of the report are designed and completed on the same page. When the RDL report is previewed or run, the components will be expanded until all the data of the data set are displayed. It can automatically display data in pages, and the final page layout depends on the amount of data to be displayed. Therefore, RDL reports are suitable for making reports with continuous data display and accurate layout, so they are widely used. However, version 4.0 also supports adding multiple pages to display data, which makes RDL reports more powerful.
The page report needs to cooperate with the data expansion area to display data, and supports multi-page design mode. At the same time, the page layout of the page report is completely consistent with the design at runtime, and the position and size of each component will not change, which is very suitable for traditional windows. Paper report format, for example, used to design reports with strict format requirements such as financial documents and bank notes.
Table : expand data sequentially from top to bottom;
Rectangular table : data expansion in the horizontal/vertical direction according to the field values grouped by rows/columns;
Line chart : used to show trends and changes;
Pie chart : used to display the proportional relationship of each part of the data in the entire data set;
Histogram : used to compare data between different categories;
Scatter plot : used to show the relationship between variables and abnormal data;
List : A list is a container-like report element. Other elements can be nested in the list, and the list will be displayed according to the data in the dataset. For example, in the figure below, a text box is nested into a list, and the list will be displayed according to the data of the dataset when previewing. In the V4.0 version, an advanced layout method is introduced, which supports the arrangement of lists in a grid mode, provides properties to set how many columns are displayed on each row, and supports setting the arrangement direction, including top-to-bottom and left-to-right arrangements , so that you can more flexibly arrange components for report design.
More flexible interactivity : ActiveReportsJS V4.0 has added a very powerful and cool function. Through this function, interactive report design can be quickly realized, and the linkage effect between report data can be realized by using Apply Parameters, and the linkage refresh of the entire page is a partial refresh, and the entire viewer page will not be refreshed, and the overall experience is very friendly. The interactive report display effect is as follows:
The specific implementation of the report can refer to this tutorial: interactive report
To sum up, ActiveReportsJS can quickly generate beautiful charts and reports, and supports various interactive functions and performance optimization. Different tools are suitable for different project requirements, and developers can choose the appropriate tool according to the project needs to create an efficient and beautiful report interface.
Project Combat: Online Quotation Procurement System (React +SpreadJS+Echarts)
Implementing Excel server-side import and export under the Spring Boot framework