问题描述
我正在使用 react v17 和 nivo.rocks 图表进行可视化工作。 我项目中的 ResponsiveLineCanvas 组件表现得很奇怪。 根据此数据:
[
{
"id": "Leads","data": [
...
{ "x": "6","y": 0 },{ "x": "7",{ "x": "8","y": 14 },{ "x": "9",{ "x": "10",{ "x": "11",...
]
},{
"id": "Enrolled",{
"id": "Rejected",...
]
}
]
有了这个组件,
<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',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,.5)',effects: [
{
on: 'hover',style: {
itemBackground: 'rgba(0,.03)',itemOpacity: 1
}
}
]
}
]}
/>
我希望 Leads
锚点/标签应该上升,因为其他 ID's
值为 0。
但令人惊讶的是,该栏在顶部显示了 Rejected
Id 的标签。请看下面的图片。
在这里,我希望绿色标签/条应该向上(而不是紫色线),其余部分应该像其他值一样向下。
我知道描述有点乱,你可以询问任何你需要的细节。 在这方面的任何帮助将不胜感激。
解决方法
在 yScale 中将“stacked: true”更改为“stacked: false”。