如何解决在 ReCharts 中将 Y 轴范围限制为 100%
我有一个堆积面积图,图表上显示了 3 个不同的活动。通过添加数据源中提供的数值,Y 轴范围超出了 100 值。 我尝试了社区这篇文章中给出的解决方案
如何在 Recharts 中限制范围并在 Y 轴上显示 100%
import React from "react";
import {AreaChart,Area,XAxis,YAxis,Cartesiangrid,Tooltip,Legend} from "Recharts";
const data = [
{name: 'Page A',uv: 50,pv: 30,amt: 20},{name: 'Page B',uv: 60,pv: 20,amt: 100},{name: 'Page C',pv: 50,amt: 30},{name: 'Page D',{name: 'Page E',uv: 40,{name: 'Page F',pv: 100,{name: 'Page G',pv: 80,amt: 90},];
class StackedAreaChart extends React.Component{
render () {
return (
<AreaChart width={600} height={300} data={data}
margin={{top: 5,right: 30,left: 20,bottom: 5}}>
<Cartesiangrid strokeDasharray="3 3"/>
<XAxis dataKey="name"/>
<YAxis type="number" domain={[0,100]} />
<Tooltip />
<Legend />
<Area dataKey="pv" fill="#8884d8" stackId="1" />
<Area dataKey="amt" fill="#82ca9d" stackId="2" />
<Area dataKey="uv" fill="#ffc658" stackId="3" />
</AreaChart>
);
}
}
export default StackedAreaChart;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。