在 ReactJS 中使用 Recharts 创建双轴折线图

Recharts 是一个基于 React 和 D3 的图表库，它提供了一系列直观、交互式和高度可定制的图表组件来满足不同需求。其中，双轴折线图是一种常见的统计图表类型，它可以同时呈现两个不同的度量指标，比如一组时间序列的温度和湿度变化。本文将介绍如何使用 Recharts 创建一个简单的双轴折线图并进行基本的配置和样式设置。

安装

在开始之前，请确保已经安装了 Node.js 和 npm。打开终端并执行以下命令以安装 recharts：

npm install recharts

基本用法

创建一个双轴折线图需要定义两个坐标轴和两条折线。在 Recharts 中，我们可以使用 <XAxis> 和 <YAxis> 组件来定义坐标轴，使用 <Line> 组件来定义折线。下面是一个最简单的双轴折线图示例，它呈现了两个假想数据集的时间序列：

import React from "react";
import { LineChart, XAxis, YAxis, Line } from "recharts";

const data1 = [
  { name: "Jan", value: 400 },
  { name: "Feb", value: 300 },
  { name: "Mar", value: 200 },
  { name: "Apr", value: 278 },
  { name: "May", value: 189 },
  { name: "Jun", value: 239 },
];
const data2 = [
  { name: "Jan", value: 1000 },
  { name: "Feb", value: 800 },
  { name: "Mar", value: 600 },
  { name: "Apr", value: 478 },
  { name: "May", value: 589 },
  { name: "Jun", value: 689 },
];

const CustomLineChart = () => (
  <LineChart
    width={500}
    height={300}
    data={data1}
    margin={{ top: 5, right: 20, bottom: 5, left: 0 }}
  >
    <XAxis dataKey="name" />
    <YAxis yAxisId="left" />
    <YAxis yAxisId="right" orientation="right" />
    <Line dataKey="value" stroke="#8884d8" yAxisId="left" />
    <Line dataKey="value" stroke="#82ca9d" yAxisId="right" />
  </LineChart>
);

export default CustomLineChart;

在上面的代码中，我们定义了两组数据 data1 和 data2。接着，我们在 <XAxis> 组件中使用 dataKey 属性指定数据中的横坐标字段名（这里是 name）。使用 <YAxis> 组件定义两个纵坐标轴，分别使用 yAxisId 属性指定它们的 id。然后，我们分别使用两个 <Line> 组件分别绑定了 data1 和 data2 的 value 字段，并使用 stroke 属性设置折线颜色，yAxisId 属性指定所属的纵坐标轴。

最后，在 JSX 中渲染 <LineChart> 组件，并通过 width、height 和 margin 属性设置了图表的尺寸和外边距。运行这份代码，就会在页面上看到一个简单的双轴折线图。

自定义样式

通常情况下，我们需要对双轴折线图进行一些样式定制，例如添加标题、修改折线样式、设置横纵坐标的刻度样式等。Recharts 提供了丰富的 API，让我们可以轻松地自定义各个组件的样式和属性。

添加标题

要在双轴折线图上添加标题，可以使用 <CartesianGrid> 和 <Text> 组件。<CartesianGrid> 组件可以绘制网格线和背景，而 <Text> 组件可以渲染文字。下面是一个添加标题的例子：

import React from "react";
import { LineChart, XAxis, YAxis, CartesianGrid, Line, Text } from "recharts";

const data1 = [
  { name: "Jan", value: 400 },
  { name: "Feb", value: 300 },
  { name: "Mar", value: 200 },
  { name: "Apr", value: 278 },
  { name: "May", value: 189 },
  { name: "Jun", value: 239 },
];
const data2 = [
  { name: "Jan", value: 1000 },
  { name: "Feb", value: 800 },
  { name: "Mar", value: 600 },
  { name: "Apr", value: 478 },
  { name: "May", value: 589 },
  { name: "Jun", value: 689 },
];

const CustomLineChart = () => (
  <LineChart
    width={500}
    height={300}
    data={data1}
    margin={{ top: 5, right: 20, bottom: 5, left: 0 }}
  >
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="name" />
    <YAxis yAxisId="left" />
    <YAxis yAxisId="right" orientation="right" />
    <Line dataKey="value" stroke="#8884d8" yAxisId="left" />
    <Line dataKey="value" stroke="#82ca9d" yAxisId="right" />
    <Text x={100} y={16} textAnchor="middle">
      Temperature and Humidity Variation
    </Text>
  </LineChart>
);

export default CustomLineChart;

在这份代码中，我们向 <LineChart> 中添加了一个 <CartesianGrid> 组件，并将 strokeDasharray 属性设置为 "3 3"，以渲染虚线网格。然后，我们通过 <Text> 组件渲染了一个标题，并使用 x 和 y 属性确定它的位置，textAnchor 属性指定了文字的水平对齐方式。运行这份代码，就会在图表上方看到一个带有标题的双轴折线图。

修改折线样式

如果我们需要修改折线的样式，例如线条宽度、点大小和颜色等，可以在 <Line> 组件中使用 dot 和 strokeWidth 属性。下面是一个修改折线样式的例子：

import React from "react";
import { LineChart, XAxis, YAxis, CartesianGrid, Line } from "recharts";

const data1 = [
  { name: "Jan", value: 400 },
  { name: "Feb", value: 300 },
  { name: "Mar", value: 200 },
  { name: "Apr", value: 278 },
  { name: "May", value: 189 },
  { name: "Jun", value: 239 },
];
const data2 = [
  { name: "Jan", value: 1000 },
  { name: "Feb", value: 800 },
  { name: "Mar", value: 600 },
  { name: "Apr", value: 478 },
  { name: "May", value: 589 },
  { name: "Jun", value: 689 },
];

const CustomLineChart = () => (
  <LineChart
    width={500}
    height={300}
    data={data1}
    margin={{ top: 5, right: 20, bottom: 5, left: 0 }}
  >
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="name" />
    <YAxis yAxisId="left" />
    <YAxis yAxisId="right" orientation="right" />
    <Line
      dataKey="value"
      stroke="#8884d8"
      strokeWidth={2}
      dot={{ fill: "#8884d8", r: 5 }}
      yAxisId="left"
    />
    <Line
      dataKey="value"
      stroke="#82ca9d"
      strokeWidth={2}
      dot={{ fill: "#82ca9d", r: 5 }}
      yAxisId="right"
    />
    <Text x={100} y={16} textAnchor="middle">
      Temperature and Humidity Variation
    </Text>
  </LineChart>
);

export default CustomLineChart;

在这份代码中，我们在 <Line> 组件中使用了 strokeWidth 属性设置了线条宽度为 2，使用 dot 属性设置了折线上的数据点的大小和颜色。具体来说，我们使用了 { fill: "#8884d8", r: 5 } 和 { fill: "#82ca9d", r: 5 } 作为 dot 属性的值，分别表示数据点的填充色为蓝色或绿色，半径为 5 像素。运行这份代码，就会看到修改后的折线图效果。

设置刻度样式

如果需要对横纵坐标轴的刻度样式进行设置，可以使用 <XAxis> 和 <YAxis> 组件的 tick 属性。tick 属性可以接受一个回调函数或一个 React 元素，用于渲染刻度的样式和内容。下面是一个设置刻度样式的例子：

import React from "react";
import {
  LineChart,
  XAxis,
  YAxis,
  CartesianGrid,
  Line,
  Text,
  Tick,
} from "recharts";

const data1 = [
  { name: "Jan", value: 400 },
  { name: "Feb", value: 300 },
  { name: "Mar", value: 200 },
  { name: "Apr", value: 278 },
  { name: "May", value: 189 },
  { name: "Jun", value: 239 },
];
const data2 = [
  { name: "Jan", value: 1000 },
  { name: "Feb", value: 800 },
  { name: "Mar", value: 600 },
  { name: "Apr", value: 478 },
  { name: "May", value: 589 },
  { name: "Jun", value: 689 },
];

const CustomLineChart = () => {
  const renderYAxisTick = (tickProps) => {
    const { x, y, payload } = tickProps;
    return (
      <Text
        x={x}
        y={y}
        textAnchor="end"
        fontWeight="bold"
        fill="#666"
        fontSize={12}
      >
        {payload.value}
      </Text>
    );
  };

  const renderXAxisTick = (tickProps) => {
    const { x, y, payload } = tickProps;
    return (
      <Tick x={x} y={y + 10}>
        <Text fill="#666" fontSize={12}>
          {payload.value}
        </Text>
      </Tick>
    );
  };

  return (
    <LineChart
      width={500}
      height={300}
      data={data1}
      margin={{ top: 5, right: 20, bottom: 5, left: 0 }}
    >
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" tick={renderXAxisTick} />
      <YAxis yAxisId="left" tick={renderYAxisTick} />
      <YAxis yAxisId="right" orientation="right" tick={renderYAxisTick} />
      <Line
        dataKey="value"
        stroke="#8884d8"
        strokeWidth={2}
        dot={{ fill: "#8884d8", r: 5 }}
        yAxisId="left"
      />
      <Line
        dataKey="value"
        stroke="#82ca9d"
        strokeWidth={2}
        dot={{ fill: "#82ca9d", r: 5 }}
        yAxisId="right"
      />
      <Text x={100} y={16} textAnchor="middle">
        Temperature and Humidity Variation
      </Text>
    </LineChart>
  );
};

export default CustomLineChart;

在这份代码中，我们定义了两个函数 renderYAxisTick 和 renderXAxisTick，分别用于渲染 Y 轴和 X 轴的刻度。这两个函数都接受一个参数 tickProps，包含了当前刻度的位置和属性等信息。在 renderYAxisTick 中，我们使用了一个 <Text> 组件来渲染具有粗体、灰色的文字，使用 payload.value 作为刻度的内容。在 renderXAxisTick 中，我们使用了一个 <Tick> 组件来包裹一个 <Text> 组件，定义了文字的颜色和大小，同时也为 X 轴的刻度留出了一些 margin。最后，我们在 <XAxis> 和 <YAxis> 组件中分别传入了 renderXAxisTick 和 renderYAxisTick 作为 tick 属性的值，使得刻度样式能够生效。运行这份代码，就会看到新的刻度样式效果。

总结

Recharts 提供了一种简单而强大的方式来创建双轴折线图。通过使用 <XAxis>、<YAxis>、<Line>、<CartesianGrid> 和其他组件，我们可以很快地创建交互式和可自定义的图表。除了本文中提到的样式设置，Recharts 还支持许多其他特性，例如数据过滤、动画效果、饼状图、直方图等，非常适合于需要快速构建高质量数据可视化的 ReactJS 应用。