React nivo/line 未显示适当的彩色标签/工具提示

如何解决React nivo/line 未显示适当的彩色标签/工具提示

我正在使用 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”。