Я использую точечную диаграмму Recharts, чтобы нарисовать пузырьковую диаграмму. В соответствии с требованиями размер диаграммы должен увеличиваться в два раза по высоте или ширине. До изменения размера все нормально. Но после изменения размера диаграммы во всплывающей подсказке отображается дополнительный элемент (это самое низкое значение в наборе данных оси x по всем сериям данных). Как только это произойдет, эта неверная всплывающая подсказка будет отображаться даже после возврата диаграммы к исходному размеру.
Исправьте всплывающую подсказку перед изменением размера
Неправильная подсказка после изменения размера, здесь 45 - наименьшее значение x как для типа A, так и для типа B
Вот мой код:
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>
);
};Как избежать появления этой неправильной легенды при изменении размера диаграммы?
