Resumen: Este artículo fue publicado originalmente en CSDN por el equipo técnico de Grape City. Indique la fuente de la reimpresión: sitio web oficial de Grape City , Grape City proporciona a los desarrolladores herramientas, soluciones y servicios de desarrollo profesional para empoderar a los desarrolladores.
El análisis de datos siempre ha sido una parte muy importante en la toma de decisiones empresariales, especialmente en la era digital. Sin embargo, el análisis de datos solo puede funcionar realmente si se monitorea y visualiza continuamente. ¿Cómo usar algunas herramientas eficientes para hacer el análisis de datos correspondiente? La herramienta de informes de desarrollo front-end es una buena opción. Puede proporcionar a las empresas análisis de datos visuales, lo que permite a los usuarios comprender y procesar datos de forma rápida y precisa, y brindar apoyo para la toma de decisiones empresariales.
Sin embargo, no es fácil desarrollar herramientas de informes frontales de alta calidad y los desarrolladores deben dominar una serie de habilidades y destrezas clave. Las siguientes son las tres capacidades principales necesarias para las herramientas de informes de desarrollo front-end, con la esperanza de brindarle alguna referencia e inspiración.Este artículo toma ActiveReportsJS, un control de informes en línea front-end puro de Grape City, como un ejemplo para explicar.
ActiveReportsJS es un control de informes en línea front-end puro basado en HTML 5. A través del diseñador de informes multiplataforma de arrastrar y soltar y el diseñador de informes front-end puro, puede diseñar rápidamente informes de Excel, documentos de Word, informes móviles, gráficos, datos filtrado y exploración de datos Puede satisfacer completamente las necesidades de JavaScript, HTML5, Angular, Vue, React, PureJS, Nodejs y otros proyectos de desarrollo para el diseño, visualización, impresión y exportación de informes. Al mismo tiempo, la rica API puede cumplir con flexibilidad los requisitos de personalización personalizados de creación, carga y ejecución de informes.
La primera capacidad de ActiveReportsJS es la integración del marco.
Como un control front-end puro, ActiveReportsJS admite la integración de los diseñadores y visualizadores de informes en varios marcos front-end. Aquí, debe estar familiarizado con el uso específico y los métodos de integración de cada marco. La siguiente es una integración específica para ambos el diseñador y el espectador Si necesita usarlo, puede consultar el siguiente tutorial para una implementación específica.
-
Diseñador (diseñador de informes):
JS puro , Vue framework , React framework , Angular framework , Vite.js , Svelte.js, Nuxt.js, Next.js
-
Visor (visor de informes):
JS puro , Vue framework , React framework , Angular framework , Vite.js , Svelte.js, Nuxt.js, Next.js
La segunda mayor capacidad de ActiveReportsJS es el procesamiento de datos.
Debido a que ActiveReportsJS es un control front-end puro, la fuente de datos tiene la forma de un archivo externo, una URL externa y datos JSON incrustados. Como se muestra en el siguiente ejemplo:
Después de configurar la fuente de datos, puede crear el conjunto de datos correspondiente. La consulta JSON en el conjunto de datos debe escribirse de acuerdo con el JSONPATH. Cuando lo cree, recuerde escribir primero el JSONPATH correspondiente y realizar la operación de verificación. Si el JSONPATH es correcto, luego, después de la verificación, el campo de consulta mostrará el campo correspondiente, como se muestra a continuación:
Después de hacer clic en el botón de verificación, también puede agregar un campo calculado para procesar los datos en el conjunto de datos. Por ejemplo, agregue manualmente un campo calculado para mostrar el valor de la cantidad*2, como se muestra en la siguiente figura:
Recuerde no hacer clic en Verificar en este momento, de lo contrario, los campos calculados completos se borrarán. Después de agregar los campos calculados, haga clic en el botón Guardar directamente, y luego se agregará el conjunto de datos correspondiente de los 3 campos originales verificados a 4 campos, como se muestra en la siguiente figura Mostrar:
Después de procesar los datos, el siguiente paso es mostrar los datos.
La tercera capacidad principal de ActiveReportsJS es la visualización de datos .
Para la visualización de datos, ActiveReportsJS no solo tiene diferentes tipos de informes para mostrar datos, sino que también proporciona muchos componentes para mostrar datos, como tablas, tablas rectangulares, listas, tiras de listas y 27 tipos de gráficos, y también admite interactividad de datos. Los componentes enriquecidos también hacen Visualización de datos más diversa.
Los tipos de informe incluyen RDL/informe de página. El informe RDL es una visualización de datos de una sola página, es decir, todo el contenido del informe se diseña y completa en la misma página. Cuando se obtiene una vista previa o se ejecuta el informe RDL, los componentes expandirse hasta que se muestren todos los datos del conjunto de datos. Puede mostrar datos automáticamente en páginas, y el diseño de la página final depende de la cantidad de datos que se mostrarán. Por lo tanto, los informes RDL son adecuados para hacer informes con visualización continua de datos y diseño preciso, por lo que son ampliamente utilizados. Sin embargo, la versión 4.0 también admite la adición de varias páginas para mostrar datos, lo que hace que los informes RDL sean más potentes.
El informe de página debe cooperar con el área de expansión de datos para mostrar datos y admite el modo de diseño de varias páginas. Al mismo tiempo, el diseño de página del informe de página es completamente consistente con el diseño en tiempo de ejecución, y la posición y el tamaño de cada componente no cambiará, lo que es muy adecuado para las ventanas tradicionales El formato de informe en papel, por ejemplo, se utiliza para diseñar informes con requisitos de formato estrictos, como documentos financieros y billetes de banco.
Tabla : expande los datos secuencialmente de arriba a abajo;
Tabla rectangular : expansión de datos en dirección horizontal/vertical según los valores de campo agrupados por filas/columnas;
Gráfico de líneas : se utiliza para mostrar tendencias y cambios;
Gráfico circular : se utiliza para mostrar la relación proporcional de cada parte de los datos en el conjunto de datos completo;
Histograma : utilizado para comparar datos entre diferentes categorías;
Diagrama de dispersión : utilizado para mostrar la relación entre variables y datos anormales;
Lista : una lista es un elemento de informe similar a un contenedor. Otros elementos se pueden anidar en la lista, y la lista se mostrará de acuerdo con los datos del conjunto de datos. Por ejemplo, en la figura a continuación, un cuadro de texto está anidado en una lista, y la lista se mostrará de acuerdo con los datos del conjunto de datos durante la vista previa. En la versión V4.0, se introduce un método de diseño avanzado, que admite la disposición de listas en modo de cuadrícula, proporciona propiedades para establecer cuántas columnas se muestran en cada fila y admite la configuración de la dirección de disposición, incluida la de arriba a abajo. arreglos de abajo y de izquierda a derecha, para que pueda organizar de manera más flexible los componentes para el diseño del informe.
Interactividad más flexible : ActiveReportsJS V4.0 ha agregado una función muy poderosa y genial. A través de esta función, el diseño de informes interactivos se puede realizar rápidamente y el efecto de vinculación entre los datos del informe se puede realizar mediante el uso de Aplicar parámetros, y la actualización de vinculación de toda la página es una actualización parcial, y no se actualizará toda la página del visor. y la experiencia en general es muy amigable. El efecto de visualización del informe interactivo es el siguiente:
La implementación específica del informe puede consultar este tutorial: informe interactivo
En resumen, ActiveReportsJS puede generar rápidamente hermosos gráficos e informes, y admite varias funciones interactivas y optimización del rendimiento. Las diferentes herramientas son adecuadas para los diferentes requisitos del proyecto, y los desarrolladores pueden elegir la herramienta adecuada de acuerdo con las necesidades del proyecto para crear una interfaz de informe eficiente y hermosa.
Project Combat: Sistema de adquisición de cotizaciones en línea (React +SpreadJS+Echarts)
React + Springboot + Quartz, automatiza informes de Excel desde 0