如何解决当比例为点
我正在使用 recharts 来显示复合图表。
const Chart = ({ responseAverage }) => {
responseAverage = responseAverage.sort((a,b) => a.label - b.label);
return (
<ResponsiveContainer width={700} height={400}>
<ComposedChart
data={responseAverage}
>
<Cartesiangrid horizontal={false} strokeDasharray="4 4" />
<XAxis scale="point" dataKey="label" />
<YAxis label={{ value: 'No.Of Employees',angle: -90,position: 'insideLeft' }} tick={false} height={20} />
{/* <Tooltip cursor={false} content={<CustomTooltip teamData={teamData} />} /> */}
<Bar dataKey="count" barSize={40} fill="#AAE5F9" />
<Line connectNulls={true} strokeWidth={3} dot={false} type="monotone" dataKey="count" stroke="#3080ED" />
{/* <LabelList dataKey="name" position="insidetop" /> */}
</ComposedChart>
</ResponsiveContainer>
);
};
在这里我指定了 barSize。但它在所有情况下都不起作用。我希望 Bar 大小根据值的数量自动计算
任何帮助都会非常感谢
解决方法
如果要去除条形之间的间隙,则需要从barSize
中去除Bar
参数并将barCategoryGap={0}
参数添加到ComposedChart
组件中。
const Chart = ({ responseAverage }) => {
responseAverage = responseAverage.sort((a,b) => a.label - b.label);
return (
<ResponsiveContainer width={700} height={400}>
<ComposedChart
barCategoryGap={0}
data={responseAverage}
>
<CartesianGrid horizontal={false} strokeDasharray="4 4" />
<XAxis scale="point" dataKey="label" />
<YAxis label={{ value: 'No.Of Employees',angle: -90,position: 'insideLeft' }} tick={false} height={20} />
{/* <Tooltip cursor={false} content={<CustomTooltip teamData={teamData} />} /> */}
<Bar dataKey="count" fill="#AAE5F9" />
<Line connectNulls={true} strokeWidth={3} dot={false} type="monotone" dataKey="count" stroke="#3080ED" />
{/* <LabelList dataKey="name" position="insideTop" /> */}
</ComposedChart>
</ResponsiveContainer>
);
};
如果结果是条形之间保留了细线,那么您可以这样做:
<Bar dataKey="count" fill="#AAE5F9" stroke="#AAE5F9" strokeWidth={2} />
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。