Los gráficos de líneas se utilizan para representar la relación entre dos datos X e Y en un eje diferente. Uno de los ejes del gráfico representa las categorías específicas que se comparan, mientras que el otro eje representa los valores medidos correspondientes a esas categorías.
Creación de la aplicación React e instalación del módulo:
-
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 install --save mdbreact react-chartjs-2
-
Paso 4: agregue Bootstrap CSS y fontawesome CSS a index.js.
import '@fortawesome/fontawesome-free/css/all.min.css'; import 'bootstrap-css-only/css/bootstrap.min.css'; import 'mdbreact/dist/css/mdb.css';
Estructura del proyecto: Tendrá el siguiente aspecto.
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 { MDBContainer } from "mdbreact"; import { Line } from "react-chartjs-2"; const App = () => { // Sample data const data = { labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], datasets: [ { label: "Hours Studied in Geeksforgeeks", data: [2, 5, 7, 9, 7, 6, 4], fill: true, backgroundColor: "rgba(6, 156,51, .3)", borderColor: "#02b844", } ] } return ( <MDBContainer> <Line data={data} /> </MDBContainer> ); } 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