用Nivo在React中构建图表

React生态系统有一个非常丰富和庞大的社区，有许多开源库可以帮助我们解决各种各样的问题--从最基本的、常见的问题，如状态管理和表单，到最复杂的挑战，如数据的可视化表示。对于后者，可能很难找到合适的库来完成工作。

React库经常在几个月内被创建并被淘汰，而且使用某个库的决定会影响整个开发团队。这就是为什么为你计划在你的应用程序中建立的任何任务或功能选择合适的库是很重要的。数据可视化也不例外。

在本教程中，我们将向你展示如何使用Nivo--一个用于React的数据可视化库，通过构建一些图表并在React应用中实现它们。我们将强调几个关键组件，并展示它们是如何一起工作的，使数据在视觉上更吸引你的用户。

为什么使用React图表库？

在React中使用数据可视化库的最重要的好处是能够实现各种各样的图表和图形，而不需要重新发明车轮。你不应该需要花费几个小时的宝贵时间来实现一个简单的条形图。像Nivo这样强大的图表库可以帮助你节省时间，达到更好的效果，并为你的React应用创造独特的用户体验。

以美观的方式表示数据可以让你的应用程序看起来更新鲜、更现代。现在，大多数公司都使用某种数据可视化功能来提供有洞察力和令人愉快的用户体验。

构建你自己的数据可视化或图表库是很困难的，也很耗时。许多着手于此的开发者发现，果汁并不值得去榨取。

什么是Nivo？

Nivo是一个丰富的数据可视化组件集，适用于React应用程序。它包括各种组件，可用于在现代React应用程序中显示图形和数据数字。

Nivo建立在D3.js之上，并具有强大的额外功能，如服务器端渲染和声明式图表。它是一个高度可定制的数据可视化库，提供写得很好的文档，有许多例子和响应式数据可视化组件。它还支持开箱即用的运动和转场。

为什么使用Nivo而不是D3？

最受欢迎的JavaScript应用程序的数据可视化工具之一是D3.js库。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'

要开始使用条形图组件，我们需要一个道具：data 。data 道具是一个对象数组，我们将其传递给ResponsiveBar 组件。每个对象应该至少有一个关键属性来索引数据，还有一个关键属性来确定每个系列。

我们将使用下面这个对象。

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 对象可以有一点不同。我们可以使用许多属性，如：id,label,value, 和color ，来定制我们的饼图。

我们有一个对象数组，每个对象都有一个特定的属性，将在我们的饼图中使用。

• 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%)"
  }
];

我们还可以通过传递诸如padAngle 和cornerRadius 等属性来定制我们的pie 组件。padAngle 道具决定了我们图表中每个对象之间的角度。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应用程序中创建数据可视化提供了许多不同的组件。它庞大的组件列表包括日历组件、Choropleth组件（一个划分地理区域的组件）、树状地图组件等等。

除了柱状图和饼状图之外，你可以应用我们在本教程中学到的大部分技术来创建其他类型的数据可视化组件。这里的想法是让大家了解一下使用Nivo可以实现什么，以及这个数据可视化库有多强大。

对于一个特定的任务，没有正确或错误的图表库；这一切都取决于你要达到的结果和你的项目要求。也就是说，Nivo提供的工具和功能使其成为在React中创建惊人的、有影响力的数据可视化的优秀图表库。

Nivo是开源的，围绕它的社区非常活跃和有帮助。文档写得很好，你可以在短短几分钟内学会如何使用一些组件。在一天结束时，广泛的组件选择和它们所服务的各种用例使Nivo成为最好的React图表库之一。