我正在使用这个包来创建一个自定义的多个LineChart
.
我面临的唯一问题是我需要在每个 2 y 值之间添加背景颜色(我确定只有 0 到 4 的值)。所以我必须在“0-1”、“1-2”和“2-3”之间添加一种颜色。
这是当前的结果
这就是我需要实现的
这是我的代码
<YAxis
data={dataAxeY}
style={{ marginBottom: xAxisHeight }}
contentInset={verticalContentInset}
svg={{ fill: "rgba(134, 65, 244, 0.5)", fontSize: 16 }}
numberOfTicks={4}
/>
<View style={{ flex: 1, marginLeft: 10, borderWidth: 2 }}>
<LineChart
yAccessor={({ item }) => item.value}
xAccessor={({ item }) => item.date}
style={{ flex: 1 }}
data={data}
contentInset={verticalContentInset}
svg={{
strokeWidth: 3,
stroke: "url(#gradient)",
}}
svg={{ stroke: "rgb(134, 65, 244)" }}
curve={shape.curveNatural}
>
</LineChart>
<XAxis
data={dataAxeX}
formatLabel={(_, index) => dataAxeX[index].dateName}
contentInset={{ left: 10, right: 10 }}
svg={{ fill: "rgba(134, 65, 244, 0.5)" }}
/>
</View>
</View>
我试图添加一个Rect
我这样指定填充颜色的
const ColoredRect = (({ y }) => (
<Rect
x="0"
y="0"
width="100%"
height="33%"
fill="rgb(0,0,255)"
/>
))
它已添加,但我想要一个更通用的解决方案。
我希望你能帮我解决这个问题。