反应 Nivo 虚线

问题描述

我正在尝试创建一个 react nivo 折线图，其中包含一条虚线而不是一条实线。我研究了模式，但我不知道如何制作一个。任何帮助表示赞赏。

解决方法

nivo 在库中提供了自定义图层功能，您可以利用它来自定义从实线到虚线的线条

这是我为您制作的代码和盒子。

https://codesandbox.io/s/wonderful-lumiere-ouhwv?file=/src/components/LineChart.js

在 ResponsiveLine 的图层属性中包含自定义图层

<ResponsiveLine
   ...
   layers={[ ...,DashedSolidLine] }
/>

自定义路径样式

const DashedSolidLine = ({ series,lineGenerator,xScale,yScale }) => {
  return series.map(({ id,data,color },index) => (
    <path
      ...
      style={
        index % 2 === 0
          ? {
              // simulate line will dash stroke when index is even
              strokeDasharray: "3,6",strokeWidth: 3
            }
          : {
              // simulate line with solid stroke
              strokeWidth: 1
            }
      }
  />
  ));
};