问题描述
我正在使用 Recharts 散点图绘制气泡图。根据要求,图表应调整大小以将高度或宽度加倍。在调整大小之前一切都很好。但是一旦图表调整大小,工具提示会显示一个附加项目(这是所有数据系列中 x 轴数据集中的最低值)。一旦发生这种情况,即使将图表改回原始大小,此错误的工具提示仍然存在。
调整大小前更正工具提示
调整大小后不正确的工具提示,这里 45 是类型 A 和类型 B 中最小的 x 值
这是我的代码:
const BubbleChart = ({ data,width,height }) => {
const drawCharts = (data) => {
const charts = [];
for (let i = 0; i < data.length; i++) {
charts.push(
<Scatter
name={data[i].name}
data={data[i].values}
fill={colors[i]}
/>
);
}
return charts;
};
return (
<ScatterChart
width={width}
height={height - 100}
margin={{ top: 10,right: 40,bottom: 0,left: 0 }}
>
<Cartesiangrid strokeDasharray="3 3" />
<XAxis
type="number"
dataKey="x"
name="height"
unit="cm"
range={[100,250]}
/>
<YAxis
type="number"
dataKey="y"
name="width"
unit="cm"
range={[200,300]}
/>
<ZAxis
type="number"
dataKey="z"
name="weight"
unit="cm"
range={[200,1000]}
/>
<Tooltip cursor={{ strokeDasharray: '3 3' }} />
<Legend />
{drawCharts(data)}
</ScatterChart>
);
};
如何在调整图表大小时避免这种不正确的图例?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)