使用React和Ant设计的数据表示法

数据表示!像时间一样古老。根据home.adelphi.edu，数据是代表人、事件、事物和想法的符号。

数据表示是数据被存储、处理和表达的形式。我们用图表、图形、点来表达数据，都取决于分析方法。

在本教程中，我们将带你了解使用React和Antd进行数据表示的过程。

先决条件

你需要熟悉以下内容。

JavaScript。
React库。
Node.js。
HTML、CSS。

目标

数据表示法不乏乐趣，我们将一起体验这种乐趣!在文章的最后，你应该能够。

将Antd集成到React项目中。
用Antd的基本线型图实现数据的可视化。
使用Antd构建步骤线数据表示法。

开始工作

要开始任何React项目，我们需要安装node.js ，以便我们可以使用Node包管理器来安装React包。

Yarn（又一个资源协商器）也是一个像npm一样的程序。它由Facebook开发，是另一个JavaScript的包管理器。

我们将告诉你如何下载和安装Node和Yarn。

Node

下载Node.js。

Yarn

如果你已经安装了Node，你可以使用Yarn 。

npm install --global yarn

安装Node模块

安装Node模块是这个项目中最重要的部分。Node模块包含构建我们的React项目所需的必要包。

要做到这一点，我们将遵循以下步骤。

创建一个基础文件夹。
在基础文件夹内，我们在终端键入以下命令。

npx create-react-app my-apps

上面的命令将创建一个名为my-apps 的文件夹，并将必要的依赖项安装到该文件夹中。

在你的终端中，一个接一个地输入下面的命令。

cd my-apps

npm start

cd 命令将当前工作目录改为my-apps ，并且，npm start 初始化了React脚本。

执行上述命令后，我们的React应用程序应该如下图所示。

react-app

集成antd

安装完Node模块后，在终端键入命令。

npm install

运行上面的命令会安装所有缺失的node包；这可能需要一些时间。

命令npm install -target file- 安装特定的节点包。下面是所需的Antd基本包的列表以及如何安装它们。

Antd。

npm install antd

Ant设计图库。它是为我们的分析开发图表的一个重要部分。

npm install @ant-design/charts

Antd图表依赖于Antd图标和lodash。我们需要将这两个包安装到我们的应用程序中，如图所示。

npm install lodash
npm install @ant-design/icons

使用基本线的数据表示

在src 文件夹内，创建一个名为charts 的子文件夹。它包含了我们的基本线和步骤线javascript文件。

为了创建一个基本线图，我们需要初始化一个React组件来保存我们的数据集。

这个React组件包含react, react-dom and line chart 。折线图是ant design图表库的一部分。

例子

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { Line } from "@ant-design/charts";

const DemoLine = () => {
  <></>;
};

export default DemoLine;

我们没有利用一个大的数据集。插入下面的数据集。

const data = [
  {
    Date: "2012-11",
    scales: 1201,
  },
  {
    Date: "2012-12",
    scales: 1065,
  },
  {
    Date: "2013-01",
    scales: 1255,
  },
  {
    Date: "2013-02",
    scales: 1429,
  },
  {
    Date: "2013-03",
    scales: 1398,
  },
  {
    Date: "2013-04",
    scales: 1678,
  },
  {
    Date: "2013-05",
    scales: 1524,
  },
  {
    Date: "2013-06",
    scales: 1688,
  },
  {
    Date: "2013-07",
    scales: 1500,
  },
  {
    Date: "2013-08",
    scales: 1670,
  },
  {
    Date: "2013-09",
    scales: 1673,
  },
  {
    Date: "2013-10",
    scales: 1563,
  },
  {
    Date: "2013-11",
    scales: 1233,
  },
  {
    Date: "2013-12",
    scales: 1232,
  },
  {
    Date: "2014-01",
    scales: 1750,
  },
  {
    Date: "2014-02",
    scales: 1602,
  },
  {
    Date: "2014-03",
    scales: 1834,
  },
  {
    Date: "2014-04",
    scales: 1722,
  },
  {
    Date: "2014-05",
    scales: 1430,
  },
  {
    Date: "2014-06",
    scales: 1280,
  },
  {
    Date: "2014-07",
    scales: 1367,
  },
  {
    Date: "2014-08",
    scales: 1155,
  },
  {
    Date: "2014-09",
    scales: 1289,
  },
  {
    Date: "2014-10",
    scales: 1104,
  },
  {
    Date: "2014-11",
    scales: 1246,
  },
  {
    Date: "2014-12",
    scales: 1098,
  },
  {
    Date: "2015-01",
    scales: 1189,
  },
  {
    Date: "2015-02",
    scales: 1276,
  },
  {
    Date: "2015-03",
    scales: 1033,
  },
  {
    Date: "2015-11",
    scales: 934,
  },
  {
    Date: "2015-12",
    scales: 810,
  },
  {
    Date: "2016-01",
    scales: 782,
  },
  {
    Date: "2016-02",
    scales: 1089,
  },
  {
    Date: "2016-03",
    scales: 745,
  },
  {
    Date: "2016-04",
    scales: 680,
  },
  {
    Date: "2016-05",
    scales: 802,
  },
  {
    Date: "2016-06",
    scales: 697,
  },
  {
    Date: "2016-07",
    scales: 583,
  },
  {
    Date: "2016-08",
    scales: 456,
  },
  {
    Date: "2016-09",
    scales: 524,
  },
  {
    Date: "2016-10",
    scales: 398,
  },
  {
    Date: "2016-11",
    scales: 278,
  },
  {
    Date: "2016-12",
    scales: 195,
  },
  {
    Date: "2017-01",
    scales: 145,
  },
  {
    Date: "2017-02",
    scales: 207,
  },
];
const config = {
  data,
  padding: "auto",
  xField: "Date",
  yField: "scales",
  annotations: [
    // 低于中位数颜色变化
    {
      type: "regionFilter",
      start: ["min", "median"],
      end: ["max", "0"],
      color: "#F4664A",
    },
    {
      type: "text",
      position: ["min", "median"],
      content: "中位数",
      offsetY: -4,
      style: {
        textBaseline: "bottom",
      },
    },
    {
      type: "line",
      start: ["min", "median"],
      end: ["max", "median"],
      style: {
        stroke: "#F4664A",
        lineDash: [2, 2],
      },
    },
  ],
};

return <Line {...config} />;

我们应该有我们的基本线聊，如下图所示。

basic-line

xField 在我们的数据集中加入，作为我们的X轴。key
yField 将我们的数据集中的值作为我们的Y轴。key
划过图表的线将其分为上中值和下中值。
regionFilter （用红色表示）是下中位数的数值。在这种情况下，中位数是1200左右。因此，红色标识的是低于1200的数值。
min 取的是所传递的最低值的数字。
max 取的是通过的最高值的数字。
median 是按升序排列的数字列表中的中间数字。

用阶梯线表示数据

阶梯线图显示了在不规则间隔内发生的变化。

为了创建我们的阶梯线图，我们将遵循基本线图中使用的所有步骤。

你的代码应该如下图所示。

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { Line } from "@ant-design/charts";

const DemoLine = () => {
  const data = [
    {
      year: "2000",
      number: 6,
    },
    {
      year: "2002",
      number: 4,
    },
    {
      year: "2004",
      number: 2,
    },
    {
      year: "2006",
      number: 8,
    },
    {
      year: "2008",
      number: 5.6,
    },
    {
      year: "2010",
      number: 7,
    },
    {
      year: "2012",
      number: 9,
    },
    {
      year: "2014",
      number: 9,
    },
    {
      year: "2016",
      number: 11,
    },
    {
      year: "2018",
      number: 8.9,
    },
  ];
  const config = {
    data,
    xField: "year",
    yField: "number",
    stepType: "vh",
  };
  return <Line {...config} />;
};

export default DemoLine;

在实现上述代码后，我们应该有如下所示的阶梯线图。

step-line

结论

在这一点上，我们已经了解了如何用React和Antd来表示数据。

如何用React和Ant设计的数据表示