如何使用 Material UI 和 DevExpress 在 React 中创建折线图？

在 React 应用中创建折线图是一种常见的需求。本文将介绍如何使用 Material UI 和 DevExpress 创建折线图。

Material UI

Material UI 是一个 React UI 组件库，提供了许多开箱即用的组件和样式。在本文中，我们将使用 Material UI 的 Line Chart 组件来创建折线图。

为了使用 Material UI，我们首先需要将其安装到我们的应用中。在命令行中运行以下命令：

npm install @material-ui/core

接下来，我们需要引入 Line Chart 组件并渲染它。以下是一个基本示例：

import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const data = [
  {
    name: '1月',
    uv: 4000,
    pv: 2400,
    amt: 2400,
  },
  {
    name: '2月',
    uv: 3000,
    pv: 1398,
    amt: 2210,
  },
  {
    name: '3月',
    uv: 2000,
    pv: 9800,
    amt: 2290,
  },
  {
    name: '4月',
    uv: 2780,
    pv: 3908,
    amt: 2000,
  },
  {
    name: '5月',
    uv: 1890,
    pv: 4800,
    amt: 2181,
  },
  {
    name: '6月',
    uv: 2390,
    pv: 3800,
    amt: 2500,
  },
  {
    name: '7月',
    uv: 3490,
    pv: 4300,
    amt: 2100,
  },
];

const SimpleLineChart = () => {
  return (
    <LineChart
      width={500}
      height={300}
      data={data}
      margin={{
        top: 5,
        right: 30,
        left: 20,
        bottom: 5,
      }}
    >
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />
      <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
    </LineChart>
  );
};

export default SimpleLineChart;

我们首先定义了一些用于测试的数据，并使用 Line Chart 组件将其渲染到页面上。在组件中，我们设置了一些属性，例如宽度、高度、数据、边距等。也可以设置其他属性来修改折线图的外观和行为，例如线条的颜色、圆点大小、悬停提示等。

DevExpress

DevExpress 是一个 UI 组件库，提供了许多用于构建 Web、桌面和移动应用程序的组件。本文将介绍如何在 React 应用中使用 DevExpress 的 Chart 组件来创建折线图。

为了使用 DevExpress，我们需要从官方网站https://js.devexpress.com/下载安装包，并将其添加到我们的应用中。在本文中，我们将使用 NPM 进行安装。在命令行中运行以下命令：

npm install devextreme devextreme-react

接下来，我们需要引入 Chart 组件并渲染它。以下是一个基本示例：

import React from 'react';
import { Chart, Series, ArgumentAxis, ValueAxis, Legend } from 'devextreme-react/chart';

const data = [
  {
    month: '1月',
    price: 500,
  },
  {
    month: '2月',
    price: 700,
  },
  {
    month: '3月',
    price: 1000,
  },
  {
    month: '4月',
    price: 900,
  },
  {
    month: '5月',
    price: 1200,
  },
  {
    month: '6月',
    price: 1500,
  },
  {
    month: '7月',
    price: 1300,
  },
];

const SimpleLineChart = () => {
  return (
    <Chart dataSource={data}>
      <ArgumentAxis argumentType="string" />
      <ValueAxis />
      <Series valueField="price" argumentField="month" type="line" />
      <Legend />
    </Chart>
  );
};

export default SimpleLineChart;

我们首先定义了一些用于测试的数据，并使用 Chart 组件将其渲染到页面上。在组件中，我们设置了一些属性，例如数据源、坐标轴类型等。也可以设置其他属性来修改折线图的外观和行为，例如线条的颜色、圆点大小、悬停提示等。

总结

本文介绍了如何使用 Material UI 和 DevExpress 在 React 应用中创建折线图。Material UI 提供了 Line Chart 组件，使创建折线图变得轻而易举。DevExpress 提供了 Chart 组件，具有更多的配置选项和功能。根据实际需要选择使用哪一个即可。