What I would like to achieve is this:
如何将CartesianGrid配置为在横轴上有虚线，在垂直轴上有一条实线？
What I would like to achieve is this:
如何将CartesianGrid配置为在横轴上有虚线，在垂直轴上有一条实线？
在我看来，根据配置选项，没有简单的解决方案.可以通过更改任一端的网格线来实现复杂的解决方案:在创建网格线时(下面的解决方案)或在呈现网格线之后-生成的SVG中的网格线可能被访问为.recharts-cartesian-grid-horizontal > line，并且这些线需要更改其stroke-dasharray属性.
因此，一个可能的解决方案是扩展类CartesianGrid.下面是一个快速解决方案，它只解决所提出的问题；您可以将其扩展到具有垂直线和水平线不同属性的复杂网格类.这方面的参考应该来自源代码:CartesianGrid.tsx.
更改垂直轴的stroke-dasharray的类可以实现为(TSX):
class CartesianGridNoDashVertical extends CartesianGrid {
renderVertical(verticalPoints: number[]): JSX.Element {
const element = super.renderVertical(verticalPoints);
const lines = element.props.children.map((el: JSX.Element) =>
React.cloneElement(el, { strokeDasharray: "0" })
);
return React.cloneElement(element, [], lines);
}
}
并用来代替标记中的标准网格元素:
<LineChart
width={500}
height={300}
data={data}
>
<CartesianGridNoDashVertical strokeDasharray="3 3" />
<XAxis />
<YAxis />
</LineChart>
下面是一个来自标准重新图表示例的sandbox.