英文:
How can I add separate line to my chart in recharts which will be connected with previous line?
问题
我有一个发现，您可以在屏幕截图上看到。但即使第一行的结束值与第二行的起始值相同，这两行仍然没有连接在一起请参见图表
我附上了我制作的codesandbox实现 https://codesandbox.io/s/two-separate-lines-wet8f9
我创建了两个独立的<Line />组件，使用不同的数据对象。第一个不包含第二行的数据。
英文:
I have a realization you may see on the screenshot. But this two separate lines is not connected to each other even if the end value of the first line is the same as start on the second line see the Chart
I've attached codesandbox realization I had made https://codesandbox.io/s/two-separate-lines-wet8f9
I have created two separate <Line /> components with different data objects. The first one doesn't contain the data from the second line
答案1
得分: 0
我在一些实验中找到的唯一答案是：
https://codesandbox.io/s/two-separate-lines-forked-lmjlzy?file=/src/App.tsx
如果您有更合适的解决方案，那将是非常好的。
英文:
The only answer for myself I figured out during some experiments
https://codesandbox.io/s/two-separate-lines-forked-lmjlzy?file=/src/App.tsx
If you have more apropriate solution, it would be great to see it
答案2
得分: 0
你没有使用正确的数据数组。data 中的每个对象都在图表中呈现一个点。然而，你的 mergedData 复制了“Page E”。
[...data, ...data2]
// ->
...
{name: "Page E", uv: 1890, pv: 4800, amt: 2181},
{name: "Page E", uv: 1890, pv2: 4800, amt: 2181},
...
因此，图表在 X 轴上呈现了具有相同名称的2个不同点。
你想要的是一个具有 pv 和 pv2 值的单个点：
{
name: "Page E",
pv: 4800,
pv2: 4800,
}
附注：为了清晰起见，你可以删除 uv 和 amt，因为这些数据键没有分配给任何“Line”。
英文:
You're not using the correct data array. Each object in data renders a point in the chart. However, your mergedData duplicates Page E.
[...data, ...data2]
// ->
...
{name: "Page E", uv: 1890, pv: 4800, amt: 2181},
{name: "Page E", uv: 1890, pv2: 4800, amt: 2181},
...
So the chart renders 2 different points in X with the same name.
What you want is a single point with both pv and pv2 values:
{
name: "Page E",
pv: 4800,
pv2: 4800,
}
Sidenote: for clarity you can remove uv and amt since there are no Line assigned for those data-key.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论