DevExpress: DevExpress es un paquete para controlar y crear la interfaz de usuario de Windows, Mobile y otras aplicaciones.
Gráficos de barras: un gráfico de barras es una representación pictórica de datos que presenta datos categóricos con barras rectangulares con alturas o longitudes proporcionales a los valores que representan. En otras palabras, es la representación pictórica del conjunto de datos. Estos conjuntos de datos contienen los valores numéricos de las variables que representan la longitud o la altura.
Pasos para crear la aplicación React y el módulo de instalación:
-
Paso 1: Cree una aplicación React usando el siguiente comando.
npx create-react-app foldername
-
Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.
cd foldername
-
Paso 3: después de crear la aplicación ReactJS, instale los módulos necesarios con el siguiente comando.
npm i --save @devexpress/dx-react-core @devexpress/dx-react-chart npm install @material-ui/core npm i --save @devexpress/dx-react-chart-material-ui
Estructura del proyecto: se verá así:
Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.
App.js
import React from "react"; import Paper from '@material-ui/core/Paper'; import { ArgumentAxis, ValueAxis, Chart, BarSeries, } from '@devexpress/dx-react-chart-material-ui'; const App = () => { // Sample data const data = [ { argument: 'Monday', value: 30 }, { argument: 'Tuesday', value: 20 }, { argument: 'Wednesday', value: 10 }, { argument: 'Thursday', value: 50 }, { argument: 'Friday', value: 60 }, ]; return ( <Paper> <Chart data={data} > <ArgumentAxis /> <ValueAxis /> <BarSeries valueField="value" argumentField="argument" /> </Chart> </Paper> ); } export default App;
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA