Una guía definitiva para la visualización de datos en sus aplicaciones React

Seamos realistas, crear gráficos en aplicaciones React siempre ha sido complicado. Además, los desarrolladores deben tener en cuenta una serie de factores al crear gráficos en React, como el tipo de gráfico, el diseño, los colores, el fondo, los valores, los conjuntos de datos, las opciones y más. Afortunadamente, las bibliotecas de gráficos JavaScript como FusionCharts han facilitado la creación de gráficos en aplicaciones React. Ampliamente considerada como una de las mejores herramientas de visualización de datos, FusionCharts es una biblioteca de gráficos JavaScript que ayuda a los desarrolladores web y móviles a generar gráficos, indicadores y mapas para impulsar paneles.

Con más de 100 tipos de gráficos y más de 2,000 mapas, FusionCharts no solo le ayuda a crear gráficos interactivos para aplicaciones web, sino que también le permite agregar funciones de informes inteligentes como exportación de gráficos, profundización, visualización selectiva de datos y desplazamiento y zoom para tus gráficos.

Descubramos cómo crear gráficos en aplicaciones React usando FusionCharts. Pero antes de entrar en el meollo de la cuestión, descubramos por qué debería crear gráficos en aplicaciones React usando FusionCharts.

Razones por las que debería crear gráficos en aplicaciones React utilizando FusionCharts

Con la ayuda de FusionCharts, los desarrolladores pueden crear sin esfuerzo hermosos gráficos en aplicaciones React y luego agregar capacidades avanzadas de generación de informes, como desglose ilimitado y exportación de gráficos en cuestión de minutos. Estas son algunas de las razones principales por las que debería crear gráficos en aplicaciones React utilizando FusionCharts.

Amplia gama de tipos de gráficos

Visualización de datos en sus aplicaciones React

FusionCharts le ofrece una gran cantidad de tipos de gráficos. Ya sea un simple gráfico de columnas o circular, ventas especializadas, gráficos de marketing o gráficos avanzados de desplazamiento y zoom, FusionCharts cubre todos sus requisitos de gráficos.

Fácil de usar

FusionCharts hace que el proceso de creación de gráficos en aplicaciones React sea una experiencia fácil e indolora. Debido a que utiliza XML/JSON como interfaz de datos, todo lo que necesita hacer es convertir sus datos a XML/JSON usando un lenguaje de programación o la GUI visual proporcionada en FusionCharts para crear gráficos interactivos.

Gráficos animados e interactivos.

Con FusionCharts, puede renderizar gráficos animados rápida y fácilmente con muchas opciones interactivas para los usuarios finales. Además, los diferentes tipos de gráficos admiten diferentes formas de animación e interactividad, proporcionando así una experiencia única a los usuarios finales.

Diseño

Una de las muchas cosas que le encantarán de FusionCharts es que casi todo es personalizable. Desde los subtítulos hasta el color de los puntos, puede personalizar todo según sus necesidades.

Datos de empresa accesibles

Debido a que FusionCharts es un software de visualización basado en la nube, usted y sus desarrolladores pueden acceder a los informes en cualquier momento y lugar.

Con la ayuda de esta biblioteca de gráficos JavaScript, los desarrolladores pueden crear gráficos interactivos para aplicaciones web y empresariales en React de forma rápida y sin esfuerzo.

Ahora que sabemos por qué FusionCharts es una de las mejores herramientas de visualización de datos y por qué es la elección perfecta para crear gráficos en aplicaciones React, descubramos cómo crear gráficos en aplicaciones React usando FusionCharts.

Pasos para crear gráficos en una aplicación React usando FusionCharts

Crear gráficos en aplicaciones React usando FusionCharts es bastante sencillo. Simplemente siga estos pasos:

Paso 1: configurar un proyecto de React

Para crear un gráfico en una aplicación React, primero debe configurar un proyecto de React. Una de las mejores formas de configurar el entorno es utilizar create-react-app.

Abra la terminal e ingrese este código:

npx create-react-app primer-proyecto-fusioncharts
cd primer-proyecto-fusioncharts
npm inicio

Paso 2: instale FusionCharts e incluya dependencias

Una vez que haya configurado el proyecto React, instale los módulos react-fusioncharts y fusioncharts usando el siguiente comando:

npm instala fusioncharts reacciona-fusioncharts –guardar

Una vez que haya instalado los componentes de FusionCharts, puede reemplazar el código en el archivo App.js con el código que se muestra en los pasos siguientes para crear su primer gráfico. Asegúrese de importar todas las dependencias necesarias para comenzar.

// Paso 1 – Incluir reaccionar
importar Reaccionar desde “reaccionar”;

// Paso 2: incluir el componente react-fusioncharts
importar ReactFC desde “react-fusioncharts”;

// Paso 3 – Incluir la biblioteca fusioncharts
importar FusionCharts desde “fusioncharts”;

// Paso 4 – Incluir el tipo de gráfico
importar Column2D desde “fusioncharts/fusioncharts.charts”;

// Paso 5 – Incluye el tema como fusión
importar FusionTheme desde “fusioncharts/themes/fusioncharts.theme.fusion”;

// Paso 6: agregar el gráfico y el tema como dependencia a los gráficos de fusión principales
ReactFC.fcRoot (FusionCharts, Column2D, FusionTheme);

Paso 3: preparar los datos

Una vez que haya instalado FusionCharts y haya incluido las dependencias, deberá preparar los datos del gráfico. En el siguiente ejemplo, los datos de las reservas de combustibles fósiles presentes en varios países se muestran en forma de tabla:

País	No. de reservas de combustibles fósiles
Venezuela	290K
ARABIA SAUDITA	260K
Canadá	180K
Irán	140K
Rusia	115K
UAE	100K
US	30K
China	30K

FusionCharts acepta los datos en formato JSON. Entonces los datos anteriores tomarán la forma siguiente.

// Preparando los datos del gráfico
datos del gráfico constante = [
{
etiqueta: “Venezuela”,
valor: “290”
},
{
etiqueta: “Arabia Saudita”,
valor: “260”
},
{
etiqueta: “Canadá”,
valor: “180”
},
{
etiqueta: “Irán”,
valor: “140”
},
{
etiqueta: “Rusia”,
valor: “115”
},
{
etiqueta: “EAU”,
valor: “100”
},
{
etiqueta: "EE. UU.",
valor: “30”
},
{
etiqueta: “China”,
valor: “30”
}
];

Paso 4: Configura tu gráfico

Ahora que los datos de su gráfico están listos, trabajemos en el estilo, el posicionamiento y el contexto de su gráfico.

Alto y ancho: El tamaño del gráfico se define mediante los atributos "ancho" y "alto".

Tipo: 'Tipo' define el tipo de gráfico que va a trazar.

Gráfico: El objeto 'gráfico' en 'Fuente de datos' contiene opciones de configuración de gráficos como tema y formatos de visualización para números.

// Crea un objeto JSON para almacenar las configuraciones del gráfico.
const chartConfigs = {
tipo: “columna2d”, // El tipo de gráfico
ancho: “700”, // Ancho del gráfico
altura: “400”, // Altura del gráfico
formato de datos: “json”, // Tipo de datos
fuente de datos: {
// Configuración del gráfico
cuadro: {
Título: “Países con la mayoría de las reservas de combustibles fósiles [2017-18]”, //Establecer el título del gráfico
subtítulo: "En MMbbl = Un millón de barriles", //Establecer el subtítulo del gráfico
xAxisName: “País”, //Establece el nombre del eje x
yAxisName: “Reservas (MMbbl)”, //Establece el nombre del eje y
númeroSufijo: “K”,
tema: “fusión” //Establece el tema para tu gráfico
},
// Datos del gráfico – del paso 2
datos: chartData
}
};

Paso 5: renderizar el gráfico

Ahora, con todas las piezas del rompecabezas resueltas, es hora de combinar todo lo de arriba y renderizar el Gráfico Simple. Aquí está el código consolidado para representar el gráfico simple.

// PASO 1 – Incluir dependencias
// Incluir reaccionar
importar Reaccionar desde “reaccionar”;
importar ReactDOM desde "react-dom";

// Incluir el componente reaccionar-fusioncharts
importar ReactFC desde “react-fusioncharts”;

// Incluir la biblioteca fusioncharts
importar FusionCharts desde “fusioncharts”;

// Incluir el tipo de gráfico
importar Column2D desde “fusioncharts/fusioncharts.charts”;

// Incluir el tema como fusión
importar FusionTheme desde “fusioncharts/themes/fusioncharts.theme.fusion”;

// Agregar el gráfico y el tema como dependencia a los gráficos de fusión principales
ReactFC.fcRoot (FusionCharts, Column2D, FusionTheme);

// PASO 2 – Datos del gráfico
datos del gráfico constante = [
{
etiqueta: “Venezuela”,
valor: “290”
},
{
etiqueta: “Arabia Saudita”,
valor: “260”
},
{
etiqueta: “Canadá”,
valor: “180”
},
{
etiqueta: “Irán”,
valor: “140”
},
{
etiqueta: “Rusia”,
valor: “115”
},
{
etiqueta: “EAU”,
valor: “100”
},
{
etiqueta: "EE. UU.",
valor: “30”
},
{
etiqueta: “China”,
valor: “30”
}
];

// PASO 3: crear el objeto JSON para almacenar las configuraciones del gráfico
const chartConfigs = {
tipo: “columna2d”, // El tipo de gráfico
ancho: “700”, // Ancho del gráfico
altura: “400”, // Altura del gráfico
formato de datos: “json”, // tipo de datos
fuente de datos: {
// Configuración del gráfico
cuadro: {
//Establecer el título del gráfico
Título: “Países con la mayoría de las reservas de combustibles fósiles [2017-18]”,
//Establecer el subtítulo del gráfico
subtítulo: "En MMbbl = Un millón de barriles",
//Establece el nombre del eje x
xAxisName: “País”,
//Establece el nombre del eje y
yAxisName: “Reservas (MMbbl)”,
númeroSufijo: “K”,
//Establece el tema para tu gráfico
tema: “fusión”
},
// Datos del gráfico
datos: chartData
}
};

// PASO 4 – Crear el elemento DOM para pasar el componente reaccionar-fusioncharts
La aplicación de clase extiende React.Component {
render () {
devolver ( );
}
}

exportar la aplicación predeterminada;

Una vez que haya renderizado el gráfico, debería poder ver el gráfico simple, como se muestra a continuación:

Ahora que sabe cómo crear un gráfico simple en la aplicación React usando FusionCharts, conozcamos algunas otras características de FusionCharts. A continuación se muestran algunas demostraciones de gráficos creados con FusionCharts en aplicaciones React.

Mapa del mundo

Para representar un gráfico de mapa mundial, debe utilizar el siguiente código consolidado:

importar Reaccionar, { Componente } del 'reaccionar'

importar FusionCharts del 'diagramas de fusión';

importar Mapas del 'fusioncharts/fusioncharts.maps';

importar Mundo del 'fusioncharts/maps/fusioncharts.world';

importar Reaccionar FC del 'react-fusioncharts';

importar Tema de fusión del 'fusioncharts/themes/fusioncharts.theme.fusion';

Reaccionar FC.fcRoot(FusionCharts, Mapas, Mundo, Tema de fusión);

const configuraciones de gráfico = {

tipo: 'mundo',

anchura: 600,

altura: 400,

formato de datos: 'json',

fuente de datos: {

"cuadro": {

"subtítulo": “Crecimiento medio anual de la población”,

“subtítulo”: “1965-2018”,

“númerosufijo”: "%",

“incluir valor en etiquetas”: "1",

“etiquetasepchar”: ":",

“entidadFillHoverColor”: “#FFF9C4”,

"tema": "fusión"

"gama de colores": {

“valor mínimo”: "0",

"código": “#FFE0B2”,

"degradado": "1",

"color": [

{

“valor mínimo”: "0.5",

"valor máximo": "1.0",

"color": “#FFD74D”

{

“valor mínimo”: "1.0",

"valor máximo": "2.0",

"color": “#FB8C00”

{

“valor mínimo”: "2.0",

"valor máximo": "3.0",

"color": “#E65100”

}

]

"datos": [

{

"identificación": "SA",

"valor": “.82”,