如何解决反应 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
}
}
/>
));
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。