我正在使用 react v17 和 nivo.rocks 图表进行可视化工作。我项目中的 ResponsiveLineCanvas 组件表现得很奇怪。根据这个数据：
[
{
"id": "Leads",
"data": [
...
{ "x": "6", "y": 0 },
{ "x": "7", "y": 0 },
{ "x": "8", "y": 14 },
{ "x": "9", "y": 0 },
{ "x": "10", "y": 0 },
{ "x": "11", "y": 0 },
...
]
},
{
"id": "Enrolled",
"data": [
...
{ "x": "6", "y": 0 },
{ "x": "7", "y": 0 },
{ "x": "8", "y": 0 },
{ "x": "9", "y": 0 },
{ "x": "10", "y": 0 },
{ "x": "11", "y": 0 },
...
]
},
{
"id": "Rejected",
"data": [
...
{ "x": "6", "y": 0 },
{ "x": "7", "y": 0 },
{ "x": "8", "y": 0 },
{ "x": "9", "y": 0 },
{ "x": "10", "y": 0 },
{ "x": "11", "y": 0 },
...
]
}
]
有了这个组件，
<ResponsiveLineCanvas
data={data}
margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
xScale={{ type: 'point' }}
yScale={{ type: 'linear', min: 'auto', max: 'auto', stacked: true, reverse: false }}
axisTop={null}
axisRight={null}
axisBottom={{
orient: 'bottom',
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'Month',
legendOffset: 36,
legendPosition: 'middle'
}}
axisLeft={{
orient: 'left',
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'count',
legendOffset: -40,
legendPosition: 'middle'
}}
colors={{ scheme: 'set2' }}
pointSize={15}
pointColor={{ theme: 'background' }}
pointBorderWidth={2}
pointBorderColor={{ from: 'serieColor', modifiers: [] }}
pointLabelYOffset={-12}
enableArea={true}
enablePointLabel={true}
areaOpacity={0.1}
useMesh={true}
legends={[
{
anchor: 'bottom-right',
direction: 'column',
justify: false,
translateX: 100,
translateY: 0,
itemsSpacing: 0,
itemDirection: 'left-to-right',
itemWidth: 80,
itemHeight: 20,
itemOpacity: 0.75,
symbolSize: 12,
symbolShape: 'circle',
symbolBorderColor: 'rgba(0, 0, 0, .5)',
effects: [
{
on: 'hover',
style: {
itemBackground: 'rgba(0, 0, 0, .03)',
itemOpacity: 1
}
}
]
}
]}
/>
我期待Leads锚点/标签应该上升，因为其他ID's值为 0。但令人惊讶的是，该栏Rejected在顶部显示了 Id 的标签。请看下面的图片。
在这里，我期望绿色标签/条应该向上（而不是紫色线），其余的应该像其他值一样向下。
我知道描述有点乱，你可以询问你需要的任何细节。非常感谢这方面的任何帮助。