React Recharts繪製折線圖範例二

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>
    );
  }
}

效果如下。

• React Recharts繪製AWS EC2 Instance CPUUtilization指標折線圖