在 Ant Design 中,可以使用 Legend
组件来设置图例的位置。下面是一个示例代码:
import React from "react";
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from "recharts";
const data = [
{ name: "Page A", uv: 4000, pv: 2400, amt: 2400 },
{ name: "Page B", uv: 3000, pv: 1398, amt: 2210 },
{ name: "Page C", uv: 2000, pv: 9800, amt: 2290 },
{ name: "Page D", uv: 2780, pv: 3908, amt: 2000 },
{ name: "Page E", uv: 1890, pv: 4800, amt: 2181 },
{ name: "Page F", uv: 2390, pv: 3800, amt: 2500 },
{ name: "Page G", uv: 3490, pv: 4300, amt: 2100 }
];
const App = () => {
return (
);
};
export default App;
在上述示例中,我们使用了 LineChart
组件,并在其中设置了 Legend
组件的 verticalAlign
属性为 "top"
,以将图例放置在图表的顶部。您可以根据需要调整图例的位置和其他属性。