重新绘制笛卡尔网格 - 垂直和水平线的不同样式

Question

我想要实现的是：

如何配置 CartesianGrid 以在水平轴上显示虚线，在垂直轴上显示实线？

Answer 1

据我所知，没有基于配置选项的简单解决方案。一个 hacky 解决方案可以通过更改两端的网格线来实现：当它们被创建时（下面的解决方案）或它们被渲染之后 - 生成的 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。

Answer 2

这是一种更简单的顺风方法：

<LineChart className='[&_.recharts-cartesian-grid-horizontal>line]:[stroke-dasharray:0]'>
  <CartesianGrid strokeDasharray='4 4' />
</LineChart>