¿Cómo crear un gráfico de dispersión en reaccionar usando material UI y DevExpress?

DevExpress: DevExpress es un paquete para controlar y crear la interfaz de usuario de Windows, Mobile y otras aplicaciones.

Gráficos de dispersión: un gráfico de dispersión es un conjunto de puntos punteados para representar datos individuales en el eje horizontal y vertical. Un gráfico en el que los valores de dos variables se trazan a lo largo del eje X y el eje Y, el patrón de los puntos resultantes revela una correlación entre ellos.

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í:

Estructura del proyecto

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.

import React from "react";
import Paper from '@material-ui/core/Paper';
import {
  ArgumentAxis,
  ValueAxis,
  Chart,
  ScatterSeries,
} from '@devexpress/dx-react-chart-material-ui';
  
  
const App = () => {
  
// Sample data
const data = [
  { x: 1, y: 2 },
  { x: 1.2, y: 3 },
  { x: 1.3, y: 5 },
  { x: 1.7, y: 4 },
  { x: 1.9, y: 1 },
  { x: 2, y: 2 },
  { x: 2.3, y: 4 },
  { x: 2.6, y: 3 },
  { x: 2.9, y: 3 },
  { x: 3.2, y: 1 },
  { x: 3.5, y: 5 },
  { x: 3.8, y: 4 },
  { x: 4, y: 5 },
  { x: 4.2, y: 3 },
  { x: 4.4, y: 1 },
];
return (
    <Paper>
    <Chart
      data={data}
    >
      <ArgumentAxis />
      <ValueAxis />
  
      <ScatterSeries valueField="y" argumentField="x" />
    </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:

Producción