使用 Nivo 在 React 中构建图表

作者：莱昂纳多·马尔多纳多✏️

React 生态系统拥有非常丰富且庞大的社区，提供众多开源库，帮助我们解决各种各样的问题——从最基础、最常见的问题（例如状态管理和表单）到最复杂的挑战（例如数据可视化）。对于后者，找到合适的库可能并非易事。

React 库的更新迭代速度通常很快，几个月内就会过时，而选择使用哪个库会影响整个开发团队。因此，为应用程序中的任何任务或功能选择合适的库至关重要。数据可视化也不例外。

在本教程中，我们将通过构建一些图表并将其集成到 React 应用中，向您展示如何使用 Nivo 这个 React 数据可视化库。我们将重点介绍几个关键组件，并展示它们如何协同工作，使数据对用户更具视觉吸引力。

为什么要使用 React 图表库？

在 React 中使用数据可视化库最重要的好处在于，无需重复造轮子即可实现各种各样的图表。您不必花费数小时的宝贵时间去尝试实现一个简单的柱状图。像 Nivo 这样强大的图表库可以帮助您节省时间、获得更好的结果，并为您的 React 应用打造独特的用户体验。

以美观的方式呈现数据，可以赋予应用程序更清新、更现代的外观。如今，大多数公司都会使用某种数据可视化功能，以提供富有洞察力且令人愉悦的用户体验。

构建自己的数据可视化或图表库既困难又耗时。许多尝试过这样做的开发者最终发现得不偿失。

Nivo是什么？

Nivo是一套功能丰富的 React 应用数据可视化组件。它包含各种组件，可用于在现代 React 应用中显示图表和数据。

Nivo 基于 D3.js 构建，并提供强大的附加功能，例如服务器端渲染和声明式图表。它是一个高度可定制的数据可视化库，拥有完善的文档、丰富的示例和响应式数据可视化组件。此外，它还开箱即用地支持动画和过渡效果。

为什么使用Nivo而不是D3？

D3.js库是JavaScript应用程序中最流行的数据可视化工具之一。D3是一个功能强大的图表库，它使您能够使用HTML、SVG和CSS将数据生动地呈现出来。

D3.js 唯一的缺点是学习曲线陡峭，而且代码很容易变得非常复杂。D3.js 大量使用了 SVG、HTML 和 CSS。要正确使用这个库，你必须对 SVG 和 DOM 的工作原理有深入的了解。

别误会我的意思——D3.js 是一个非常强大且实用的库，可以用来构建现代应用程序中的数据可视化。但大多数情况下，你并不想花费数小时来创建一个简单的柱状图。React 的核心在于可重用性，而 Nivo 可以让你创建可重用的组件，从而节省大量的调试时间。

Nivo 是 React 中数据可视化的更佳选择，因为它简化了组件构建的复杂性。借助 Nivo，您可以更高效地工作，自定义组件，并轻松创建各种数据可视化效果。

安装 Nivo

在 React 应用中使用 Nivo 的第一步是将其安装到项目中：

yarn add @nivo/core

安装核心软件包时，它并不包含库的所有组件。这听起来似乎是个缺点，但实际上却是一件好事。

我们不想仅仅为了使用一个组件而添加一个庞大的包，从而增加打包体积。相反，我们可以只添加使用特定组件所需的特定包。

让我们将第一个 Nivo 组件包添加到我们的 React 应用程序中。

构建条形图

首先，我们将添加柱状图组件，以便在我们的 React 应用程序中使用它：

yarn add @nivo/bar

条形图组件功能丰富。它可以堆叠显示数据，也可以并排显示数据。它支持垂直和水平布局，并且可以自定义以渲染任何有效的 SVG 元素。

我们将把该bar组件导入到我们的文件中，以便我们可以开始使用 Nivo 创建我们的第一个条形图。

import { ResponsiveBar } from '@nivo/bar'

要开始使用条形图组件，我们只需要一个 prop：`bar` data。该dataprop 是一个对象数组，我们会将其传递给ResponsiveBar组件。每个对象至少需要一个 `key` 属性用于索引数据，以及一个 `key` 属性用于区分不同的数据系列。

我们将使用以下对象：

const data = [
  {
    day: "Monday",
    degress: 59
  },
  {
    day: "Tuesday",
    degress: 61
  },
  {
    day: "Wednesday",
    degress: 55
  },
  {
    day: "Thursday",
    degress: 78
  },
  {
    day: "Friday",
    degress: 71
  },
  {
    day: "Saturday",
    degress: 56
  },
  {
    day: "Sunday",
    degress: 67
  }
];

我们将这个data数组传递给ResponsiveBar组件。ResponsiveBar组件需要一个indexBy字符串作为数据索引，以及一个keys属性（该属性是一个字符串数组），用于确定每个序列。

我们将把degrees属性作为键传递，并希望通过该属性对数据进行索引days。最终，我们的组件将如下所示：

const Bar = () => {
  return (
    <ResponsiveBar
      data={data}
      keys={["degress"]}
      indexBy="day"
      margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
      padding={0.4}
      valueScale={{ type: "linear" }}
      colors="#3182CE"
      animate={true}
      enableLabel={false}
      axisTop={null}
      axisRight={null}
      axisLeft={{
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
        legend: "degrees",
        legendPosition: "middle",
        legendOffset: -40
      }}
    />
  );
};

现在我们使用 Nivo 构建了一个美观而强大的数据可视化组件！正如您所见，只需几行代码，我们就能实现如此强大的效果：

制作饼图

饼图将数值数据以单个圆的扇形切片形式呈现。这种数据可视化方式几乎适用于所有行业和各种应用场景。

Nivo 有一个 饼图组件，您可以使用以下命令安装：

yarn add @nivo/pie

与组件类似bar，该pie组件需要一些属性才能工作：data对象数组和width用于height显示饼图的属性。

传递给饼图组件的对象data可以略有不同。我们可以使用许多属性，例如 `width`、`height` id、label` valuewidth` 和color`height`，来自定义饼图。

我们有一个对象数组，每个对象都有一个特定的属性，这些属性将在我们的饼图中用到：

• 该id属性对于我们数组中的每个对象都是唯一的。
• 该value属性是我们对象将在图表上呈现的值。
• 该color对象是一个字符串，我们将把它作为图表上对象的颜色传递。
• 该label属性是我们对象的标签名称

const data = [
  {
    id: "java",
    label: "java",
    value: 195,
    color: "hsl(90, 70%, 50%)"
  },
  {
    id: "erlang",
    label: "erlang",
    value: 419,
    color: "hsl(56, 70%, 50%)"
  },
  {
    id: "ruby",
    label: "ruby",
    value: 407,
    color: "hsl(103, 70%, 50%)"
  },
  {
    id: "haskell",
    label: "haskell",
    value: 474,
    color: "hsl(186, 70%, 50%)"
  },
  {
    id: "go",
    label: "go",
    value: 71,
    color: "hsl(104, 70%, 50%)"
  }
];

我们还可以pie通过传递诸如 ` padAnglearray` 和 `border` 之类的属性来自定义组件cornerRadius。`array`padAngle属性决定图表中每个对象之间的角度。`border`cornerRadius属性是我们能够传递的每个对象的边框半径值。

我们的最后一个组件最终效果如下：

const Pie = () => {
  return (
    <ResponsivePie
      data={pieData}
      margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
      innerRadius={0.5}
      padAngle={0.7}
      cornerRadius={3}
      activeOuterRadiusOffset={8}
      borderWidth={1}
      borderColor={{ from: "color", modifiers: [["darker", 0.2]] }}
      arcLinkLabelsSkipAngle={10}
      arcLinkLabelsTextColor="#333333"
      arcLinkLabelsThickness={2}
      arcLinkLabelsColor={{ from: "color" }}
      arcLabelsSkipAngle={10}
      arcLabelsTextColor={{ from: "color", modifiers: [["darker", 2]] }}
    />
  );
};

最终结果应如下所示：

结论

Nivo 为 React 应用中的数据可视化提供了许多不同的组件。其丰富的组件列表包括日历组件、等值线组件（划分地理区域的组件）、树状地图组件等等。

除了柱状图和饼图之外，您还可以应用本教程中学习的大部分技巧来创建其他类型的数据可视化组件。本文旨在让您初步了解使用 Nivo 可以实现哪些功能，以及这个数据可视化库的强大之处。

对于特定任务，并没有绝对正确或错误的图表库；一切都取决于您想要达到的结果以及项目的具体需求。话虽如此，Nivo 提供的工具和功能使其成为在 React 中创建精美且极具影响力的数据可视化图表的优秀图表库。

Nivo 是开源的，其社区非常活跃且乐于助人。文档编写精良，只需几分钟即可学会如何使用一些组件。总而言之，丰富的组件选择和广泛的应用场景使 Nivo 成为当之无愧的最佳 React 图表库之一。

全面了解生产环境中的 React 应用

调试 React 应用可能很困难，尤其是在用户遇到难以重现的问题时。如果您有兴趣监控和跟踪 Redux 状态、自动显示 JavaScript 错误以及跟踪缓慢的网络请求和组件加载时间，不妨试试 LogRocket。

LogRocket就像 Web 应用的 DVR，它会记录 React 应用中发生的一切。你无需猜测问题原因，即可汇总并报告问题发生时应用的状态。LogRocket 还会监控应用的性能，并提供客户端 CPU 负载、客户端内存使用情况等指标的报告。

LogRocket Redux 中间件包为用户会话增加了一层额外的可见性。LogRocket 会记录 Redux 存储中的所有操作和状态。

革新 React 应用的调试方式——开始免费监控。