首页 > 文章 > 前端

Recharts：终极 React 图表库

来源：dev.to

时间：2024-08-25 08:54:50 431浏览收藏

从现在开始，我们要努力学习啦！今天我给大家带来《Recharts：终极 React 图表库》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

在当今数据驱动的世界中，有效可视化数据的能力比以往任何时候都更加重要。无论您是数据科学家、开发人员还是业务分析师，创建富有洞察力的交互式图表都可以帮助您清晰地传达复杂的信息。用于此目的的最佳工具之一是 recharts——一个完全基于 react 组件构建的可组合图表库。在这篇博文中，我们将深入探讨 recharts 的独特之处以及如何使用它来增强数据可视化功能。

什么是重新图表？

这个图表库是一个开源的声明式解决方案，专为 react 应用程序设计。与许多其他配置和集成很麻烦的图表库不同，该库经过精心设计，可高度定制且易于使用。通过利用 react 的强大功能，它允许开发人员以最小的努力创建复杂的交互式图表。

使该库与其他库区别开来的关键功能之一是它的可组合性。它提供了广泛的图表组件，可以组合起来创建复杂的可视化效果。无论您需要简单的折线图还是复杂的雷达图，这个库都能满足您的需求。

为什么使用这个库？

声明性语法:

recharts 使用声明性语法，可以轻松定义图表的结构。通过以清晰简洁的方式指定数据和配置选项，您可以使用最少的代码创建复杂的图表。

<responsivecontainer width="100%" height={400}>
  <linechart data={data}>
    <line type="monotone" datakey="value" stroke="#8884d8" />
    <cartesiangrid stroke="#ccc" />
    <xaxis datakey="name" />
    <yaxis />
  </linechart>
</responsivecontainer>

可组合组件:

recharts 组件被设计为可组合的。这意味着您可以在同一可视化中组合多个组件，例如 <barchart>、<linechart> 和 <piechart>。这种模块化允许您轻松定制图表以满足您的特定要求。

响应式设计：

该库提供了 <responsivecontainer> 组件，可以根据父容器的尺寸自动调整图表的大小。这使得创建在任何设备或屏幕尺寸上看起来都很棒的图表变得容易。

互动功能:

它还支持广泛的交互功能，包括工具提示、图例和缩放。这些功能使用户可以轻松探索您的图表并与之交互，从而增强整体用户体验。

定制选项:

recharts 提供了广泛的自定义选项，允许您设置图表的样式以匹配您的品牌或应用程序的设计。您可以自定义从颜色和字体到轴标签和网格线的所有内容。

重新图表入门

要开始使用recharts，您需要使用npm 或yarn 安装库：

npm install recharts

或者如果您使用的是纱线：

yarn add recharts

安装 recharts 后，您可以导入所需的组件并开始创建图表。以下是如何使用 recharts 创建折线图的简单示例：

基本折线图示例

在此示例中，我们创建一个简单的折线图，显示一年中每个月的紫外线指数。我们使用 recharts 提供的 <linechart>、<line>、<cartesiangrid>、<xaxis>、<yaxis> 和 <tooltip> 组件来定义图表的结构。

import react from "react";
import {
  linechart,
  line,
  cartesiangrid,
  xaxis,
  yaxis,
  tooltip,
} from "recharts";

const data = [
  { name: "jan", uv: 400 },
  { name: "feb", uv: 300 },
  { name: "mar", uv: 200 },
  { name: "apr", uv: 278 },
  { name: "may", uv: 189 },
  { name: "jun", uv: 239 },
  { name: "jul", uv: 349 },
  { name: "aug", uv: 200 },
];

const simplelinechart = () => (
  <linechart width={600} height={300} data={data}>
    <line type="monotone" datakey="uv" stroke="#8884d8" />
    <cartesiangrid stroke="#ccc" />
    <xaxis datakey="name" />
    <yaxis />
    <tooltip />
  </linechart>
);

export default simplelinechart;

让我们看一下本例中使用的组件：

<linechart>：折线图的主要容器。它接受 width 和 height 属性来定义图表的尺寸。
<line>：代表折线图中的线。它接受 datakey 属性来指定数据数组中包含要绘制的值的键。
<cartesiangrid>：渲染图表中的网格线。
<xaxis>：渲染图表的x轴。它接受 datakey 属性来指定包含 x 轴值的数据数组中的键。
<yaxis>：渲染图表的y轴。
<tooltip>：当用户将鼠标悬停在图表上时显示工具提示。

通过组合这些组件，您可以创建适合您特定需求的各种图表。

定制您的图表

recharts 提供了广泛的自定义选项，允许您设置图表的样式以匹配您的应用程序的设计。您可以自定义图表的颜色、字体、标签和其他视觉元素，以创建具有凝聚力且具有视觉吸引力的用户体验。

const customlinechart = () => (
  <linechart width={600} height={300} data={data}>
    <line type="monotone" datakey="uv" stroke="#82ca9d" strokewidth={2} />
    <cartesiangrid stroke="#ccc" strokedasharray="5 5" />
    <xaxis datakey="name" />
    <yaxis />
    <tooltip />
    <legend />
  </linechart>
);

向图表添加多条线

recharts 只需添加额外的 <line> 组件即可轻松向图表添加多条线。每个 <line> 组件可以代表不同的数据系列，允许您在同一可视化中比较多个数据集。

const multilinechart = () => (
  <linechart width={600} height={300} data={data}>
    <line type="monotone" datakey="uv" stroke="#8884d8" />
    <line type="monotone" datakey="pv" stroke="#82ca9d" />
    <cartesiangrid stroke="#ccc" />
    <xaxis datakey="name" />
    <yaxis />
    <tooltip />
    <legend />
  </linechart>
);

自定义轴和标签

在某些情况下，您可能需要自定义轴以更好地适合您的数据。 recharts 允许在该领域进行广泛的定制。

import react from "react";
import {
  linechart,
  line,
  xaxis,
  yaxis,
  cartesiangrid,
  tooltip,
  legend,
  responsivecontainer,
} from "recharts";

const data = [
  {
    name: "page a",
    uv: 4000,
    pv: 2400,
    amt: 2400,
  },
  {
    name: "page b",
    uv: 3000,
    pv: 1398,
    amt: 2210,
  },
  {
    name: "page c",
    uv: 2000,
    pv: 9800,
    amt: 2290,
  },
  {
    name: "page d",
    uv: 2780,
    pv: 3908,
    amt: 2000,
  },
  {
    name: "page e",
    uv: 1890,
    pv: 4800,
    amt: 2181,
  },
  {
    name: "page f",
    uv: 2390,
    pv: 3800,
    amt: 2500,
  },
  {
    name: "page g",
    uv: 3490,
    pv: 4300,
    amt: 2100,
  },
];

const customizedlabel = ({ x, y, stroke, value }) => {
  return (
    <text x={x} y={y} dy={-4} fill={stroke} fontsize={10} textanchor="middle">
      {value}
    </text>
  );
};

const customizedaxistick = ({ x, y, payload }) => {
  return (
    <g transform={`translate(${x},${y})`}>
      <text
        x={0}
        y={0}
        dy={16}
        textanchor="end"
        fill="#666"
        transform="rotate(-35)"
      >
        {payload.value}
      </text>
    </g>
  );
};

const example = () => {
  return (
    <responsivecontainer width="100%" height="100%">
      <linechart
        width={500}
        height={300}
        data={data}
        margin={{
          top: 20,
          right: 30,
          left: 20,
          bottom: 10,
        }}
      >
        <cartesiangrid strokedasharray="3 3" />
        <xaxis datakey="name" height={60} tick={<customizedaxistick />} />
        <yaxis />
        <tooltip />
        <legend />
        <line
          type="monotone"
          datakey="pv"
          stroke="#8884d8"
          label={<customizedlabel />}
        />
        <line type="monotone" datakey="uv" stroke="#82ca9d" />
      </linechart>
    </responsivecontainer>
  );
};

export default example;

让我们分解一下此示例中所做的自定义：

线数据点上的自定义标签

创建自定义标签（customizedlabel），用于在折线图上显示数据点。
customizedlabel 组件是一个功能组件，它返回位于每个数据点坐标 (x, y) 处的文本元素，偏移量 (dy) 为 -4。
fill 属性设置为从父级传递过来的描边颜色，textanchor 设置为“middle”以进行对齐。

const customizedlabel = ({ x, y, stroke, value }) => {
  return (
    <text x={x} y={y} dy={-4} fill={stroke} fontsize={10} textanchor="middle">
      {value}
    </text>
  );
};

自定义轴刻度

为 x 轴标签创建自定义刻度 (customizedaxistick)。
customizedaxistick 组件是一个函数组件，它返回一个包含文本元素的 g 元素（组）。
标签旋转 -35 度以获得更好的可见性并与轴对齐。

const customizedaxistick = ({ x, y, payload }) => {
  return (
    <g transform={`translate(${x},${y})`}>
      <text
        x={0}
        y={0}
        dy={16}
        textanchor="end"
        fill="#666"
        transform="rotate(-35)"
      >
        {payload.value}
      </text>
    </g>
  );
};

折线图设置

linechart 组件用于创建图表，responsivecontainer 确保其具有响应性。
data 属性被分配包含数据点的静态数组。

const example = () => {
  return (
    <responsivecontainer width="100%" height="100%">
      <linechart
        width={500}
        height={300}
        data={data}
        margin={{
          top: 20,
          right: 30,
          left: 20,
          bottom: 10,
        }}
      >
        <cartesiangrid strokedasharray="3 3" />
        <xaxis datakey="name" height={60} tick={<customizedaxistick />} />
        <yaxis />
        <tooltip />
        <legend />
        <line
          type="monotone"
          datakey="pv"
          stroke="#8884d8"
          label={<customizedlabel />}
        />
        <line type="monotone" datakey="uv" stroke="#82ca9d" />
      </linechart>
    </responsivecontainer>
  );
};

cartesiangrid 添加网格以提高可读性。
xaxis 利用 customizedaxistick 进行自定义刻度格式。
yaxis 是一个简单的垂直轴。
包含工具提示和图例以提供交互元素和图例信息。
line用于绘制不同描边颜色的线条，label用于添加创建的自定义标签。

自定义工具提示

与自定义标签类似，您还可以创建自定义工具提示，以在用户与图表交互时显示附加信息。自定义工具提示可用于提供有关所显示数据点的更多上下文或详细信息。

const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    return (
      <div className="custom-tooltip">
        <p className="label">{`${label} : ${payload[0].value}`}</p>
      </div>
    );
  }

  return null;
};

const CustomTooltipChart = () => (
  <LineChart width={600} height={300} data={data}>
    <Line type="monotone" dataKey="uv" stroke="#8884d8" />
    <CartesianGrid stroke="#ccc" />
    <XAxis dataKey="name" />
    <YAxis />
    <Tooltip content={<CustomTooltip />} />
    <Legend />
  </LineChart>
);

结论

recharts 是一个强大而灵活的图表库，可以帮助您在 react 应用程序中创建令人惊叹的数据可视化效果。通过利用 recharts 组件的可组合性质，您可以轻松地以最少的努力构建复杂的交互式图表。无论您需要简单的折线图还是更高级的雷达图，recharts 都能提供让您的数据栩栩如生的工具。

您可以通过访问官方 recharts 文档来探索全系列的 recharts 组件和自定义选项。

理论要掌握，实操不能落！以上关于《Recharts：终极 React 图表库》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！

声明：本文转载于：dev.to 如有侵犯，请联系study_golang@163.com删除