React Recharts繪製折線圖範例二。
範例
import React, { PureComponent } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
const data = [
{
points: [
{ datetime: '2024-04-21', value: Math.random() },
{ datetime: '2024-04-22', value: Math.random() },
{ datetime: '2024-04-23', value: Math.random() },
],
},
];
export default class Example extends PureComponent {
render() {
return (
<ResponsiveContainer width="100%" height="100%">
<LineChart width={500} height={300}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="datetime" />
<YAxis />
<Tooltip />
<Legend />
{data.map((d) => (
<Line dataKey="value" data={d.points} />
))}
</LineChart>
</ResponsiveContainer>
);
}
}
效果如下。
沒有留言:
張貼留言