Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado. Leer más.

Los gráficos brindan a sus usuarios una forma conveniente y atractiva de visualizar datos. Pueden hacer que los datos sean más fáciles de entender y pueden hacer que su aplicación sea más interactiva.

Hay varias formas de crear gráficos en React, incluido el uso de CSS básico o una biblioteca como React-Vis o React Google Charts.

Cómo crear gráficos en React con CSS

Crear gráficos en React usando CSS básico es relativamente fácil. Todo lo que necesita hacer es crear un elemento div con un ancho y alto, luego establecer el color de fondo en el color deseado del gráfico. Por ejemplo:

importar Reaccionar de'reaccionar';
constante Gráfico = () => {
devolver (


ancho: '100px', altura: '300px', color de fondo: '#5D6AFF'}}/>
 );
}
exportarpor defecto Cuadro;

En el código anterior, importamos la biblioteca React. Luego creamos una función llamada Gráfico que devuelve un div con un ancho de 100 px, una altura de 300 px y un color de fondo de #5D6AFF. Esto creará un gráfico básico con un fondo azul. Tú también puedes

instagram viewer
usar la interfaz de usuario de materiales o Tailwind CSS en su aplicación React para crear gráficos.

También puede crear varios gráficos con texto o imágenes dentro de los divs para crear gráficos más complejos.

importar Reaccionar de'reaccionar';
constante Gráfico = () => {
devolver (
<división>


ancho: '100px', altura: '300px', color de fondo: '#5D6AFF'}}>
<pag>Cuadro 1pag>
división>
ancho: '100px', altura: '300px', color de fondo: '#FFCF00'}}>
<imagenorigen=" https://dummyimage.com/40x80/000/0011ff"estilo={{relleno:'100px30px'}} />
división>
división>
 );
}


exportarpor defecto Cuadro;

Gráficos de React utilizando la biblioteca de React-Vis

React-Vis es una biblioteca creada por Uber que le permite crear tablas y gráficos en React. Proporciona un conjunto de componentes que facilitan la creación de gráficos con diferentes formas, colores y tamaños. También admite animaciones e interactividad, lo que puede ayudar a que sus gráficos sean más atractivos.

Para usar React-Vis, primero debe crear una aplicación React básica e instalar la biblioteca. Puedes hacer esto con el siguiente comando:

npm instalar reaccionar-vis

Una vez que haya instalado la biblioteca, puede crear un gráfico básico con el siguiente código:

importar Reaccionar, { estado de uso } de'reaccionar';
importar {
 Parcela XY,
 Líneaserie,
 Líneas de rejilla verticales,
 Líneas de cuadrícula horizontales,
 eje X,
 Eje Y
} de'reaccionar-vis';


constante Gráfico = () => {
constante [datos] = useState([
 { X: 0, y: 8 },
 { X: 1, y: 5 },
 { X: 2, y: 4 },
 { X: 3, y: 9 },
 { X: 4, y: 1 },
 { X: 5, y: 7 },
 { X: 6, y: 6 },
 { X: 7, y: 3 },
 { X: 8, y: 2 },
 { X: 9, y: 0 }
 ]);


devolver (
<Gráfico XYancho={300}altura={300}>
<VerticalGridLines />
<HorizontalGridLines />
<Eje X />
<Eje Y />
<LíneaSeriedatos={datos} />
Gráfico XY>
 );
}
exportarpor defecto Cuadro;

El código anterior importa las bibliotecas React y React-Vis. Luego define una función llamada Chart que devuelve un XYPlot con VerticalGridLines, HorizontalGridLines, XAxis, YAxis y LineSeries. LineSeries toma la matriz de datos, que contiene las coordenadas x e y de los puntos que forman la línea.

Uso de la biblioteca de gráficos de Google React

React Google Charts es otra biblioteca que facilita la creación de gráficos en React. Proporciona un conjunto de componentes para crear diferentes tipos de gráficos, como gráficos de barras, gráficos circulares y gráficos de líneas. También admite animaciones e interactividad, lo que puede ayudar a que sus gráficos sean más atractivos.

Para usar React Google Charts, primero debe instalar la biblioteca. Puedes hacer esto con el siguiente comando:

npm instalar reaccionar-google-charts

Una vez que haya instalado la biblioteca, puede crear un gráfico básico con el siguiente código:

importar Reaccionar, { estado de uso } de'reaccionar';
importar { Cuadro } de'reaccionar-google-charts';
constante Mi Gráfico = () => {
constante [datos] = useState([
['Año', 'Ventas', 'Gastos'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
 ]);


devolver (
 ancho = {'400px'}
 altura={'300px'}
 chartType="Bar"
 datos={datos}
 />
 );
}
exportarpor defecto Mi Gráfico;

Este código importa las bibliotecas react y react-google-charts. Luego crea una función llamada MyChart que devuelve un componente Chart. El componente Gráfico toma la matriz de datos, que contiene las etiquetas y los valores de los puntos que componen el gráfico.

Desventajas de usar CSS

Hay algunas desventajas de usar CSS para crear gráficos en React:

  • Difícil de usar: si desea crear gráficos complejos, CSS puede ser difícil de usar.
  • No muy flexible: CSS no es muy flexible, por lo que puede ser difícil realizar cambios en sus gráficos.
  • No interactivo: Los gráficos CSS no son interactivos, por lo que sus usuarios no podrán interactuar con ellos.

Si desea crear gráficos complejos, React-vis y React-google-charts son mejores opciones. Sin embargo, si desea crear gráficos simples, CSS puede ser una buena opción.

Beneficios de usar React-Vis

Hay varios beneficios de usar React-Vis para crear gráficos en React:

  • Fácil de usar: React-Vis es fácil de usar, por lo que puede crear gráficos complejos con facilidad.
  • Altamente flexible: React-Vis es muy flexible, por lo que puede realizar cambios en sus gráficos fácilmente.
  • Interactivo: Los gráficos de React-Vis son interactivos, por lo que sus usuarios pueden interactuar con ellos.
  • Animado: Los gráficos React-Vis admiten animaciones, por lo que puede hacer que sus gráficos sean más atractivos.

Si desea crear gráficos complejos que sean interactivos y animados, React-Vis es una buena opción.

Beneficios de usar React Google Charts

Al igual que React-Vis, hay varios beneficios de usar React Google Charts para crear gráficos en React:

  • Fácil de usar: React Google Charts es fácil de usar, por lo que puede crear gráficos complejos con facilidad.
  • Diferentes tipos de gráficos: React Google Charts proporciona diferentes tipos de gráficos, para que pueda elegir el mejor para sus datos.
  • Soporte para animación: React Google Charts admite animaciones, por lo que puede hacer que sus gráficos sean más atractivos.

Aumente la participación de los usuarios con los gráficos

Los gráficos son una excelente manera de visualizar datos, pero también puede usarlos para aumentar la participación de los usuarios. Agregar animaciones e interactividad a sus gráficos puede hacerlos más atractivos y puede ayudar a sus usuarios a comprender mejor sus datos.

Entonces, si está buscando una manera de aumentar la participación de los usuarios en su aplicación React, considere agregar gráficos. También puede implementar su aplicación React en una plataforma rápida, segura y escalable como Github.