笛卡尔网格

本指南将向你展示如何自定义图表组件的笛卡尔网格。

¥This guide will show you how to customize the cartesian grid of the charts component.

用法

¥Usage

import { CartesianGrid } from "recharts"

<CartesianGrid />

这将渲染一个默认网格，X 轴和 Y 轴上都有浅灰色线条。

¥This will render a default grid with light gray lines on both the X and Y axes.

自定义描边

¥Customize Stroke

使用 stroke、strokeDasharray 和 opacity 修改网格线的外观

¥Modify the appearance of the grid lines using stroke, strokeDasharray, and opacity

<CartesianGrid stroke="#ccc" strokeDasharray="3 3" opacity={0.5} />

属性	描述
stroke	更改了网格线颜色（例如 #ddd、red 等）。
strokeDasharray	定义虚线图案（例如，5 5 表示虚线）。
opacity	控制网格线透明度（0 到 1）。

显示/隐藏网格线

¥Show/Hide Grid Lines

要控制显示水平线还是垂直线：

¥To control whether horizontal or vertical lines are displayed:

<CartesianGrid vertical={false} horizontal={true} />

• vertical={false} → 隐藏垂直网格线

• horizontal={false} → 隐藏水平网格线

• horizontal={true} 和 vertical={true} → 同时显示（默认行为）

移除网格线

¥Remove Grid Lines

要完全移除网格，只需省略 CartesianGrid 组件或明确隐藏水平线和垂直线：

¥To remove the grid completely, simply omit the CartesianGrid component or explicitly hide both horizontal and vertical lines:

<CartesianGrid horizontal={false} vertical={false} />