Reactでrechartsを使ってグラフ表示

2022年12月23日2023年3月30日

ゴール

ブラウザでhttp://localhost:8111にアクセスすると、rechartsを使った「折れ線グラフ」が表示できる

使用するライブラリ
手順
1. ライブラリをインストール
2. 1つのファイルの作成 (graph.tsx)
3. 既存のファイルを編集
4. 確認
＋a バックエンドとのデータ接続を想定
1. モックデータの作成
2. 既存のファイルを編集
3. 1つのファイルを作成
4. 既存のファイルを編集
5. 確認
参考にした資料

前提

「Hello World」が表示できる環境からスタート

React+Typescriptの環境構築

ゴール何もない状態からReactを使ってにアクセスすると、ブラウザで「Hello World」が表示できる※crea ...

https://alwaysgrowup.com/react-typescript-environment/

使用するライブラリ

recharts
json-server

手順

① ライブラリをインストール

yarn add recharts

yarn add -D @types/recharts

yarn add -D json-server

② 1つのファイルを作成(graph.tsx)
components > graph.tsx

import React, { FC } from "react";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
} from "recharts";

const costGraphData = [
  { date: "01-01", cost: 1100 },
  { date: "01-02", cost: 1200 },
  { date: "01-03", cost: 1000 },
  { date: "01-04", cost: 800 },
  { date: "01-05", cost: 1700 },
  { date: "01-06", cost: 1000 },
  { date: "01-07", cost: 1000 },
  { date: "01-08", cost: 600 },
  { date: "01-09", cost: 800 },
  { date: "01-10", cost: 400 },
  { date: "01-11", cost: 1600 },
  { date: "01-12", cost: 1400 },
  { date: "01-13", cost: 1100 },
  { date: "01-14", cost: 1200 },
  { date: "01-15", cost: 900 },
];

export const CostGraph: FC = () => {
  return (
    <LineChart
      width={730}
      height={250}
      data={costGraphData}
      margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
    >
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="date" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Line type="monotone" dataKey="cost" stroke="#82ca9d" />
    </LineChart>
  );
};

③ 既存ファイルの編集
app.tsxにコードを追加

import React from "react";
import { CostGraph } from "./component/graph";

const App = () => {
  return (
    <>
      <h1>Hello World</h1>
      <CostGraph />
    </>
  );
};
export default App;

④ 確認

yarn start

上記コマンドを実行し、ブラウザでhttp://localhost:8111にアクセス
「折れ線グラフ」が表示されていればOK！

＋a バックエンドとのデータ接続を想定

① モックデータの作成
mockフォルダ > dummyData.json

{
  "costGraphData": [
    { "date": "01-01", "cost": 1100 },
    { "date": "01-02", "cost": 1200 },
    { "date": "01-03", "cost": 1000 },
    { "date": "01-04", "cost": 800 },
    { "date": "01-05", "cost": 1700 },
    { "date": "01-06", "cost": 1000 },
    { "date": "01-07", "cost": 1000 },
    { "date": "01-08", "cost": 600 },
    { "date": "01-09", "cost": 800 },
    { "date": "01-10", "cost": 400 },
    { "date": "01-11", "cost": 1600 },
    { "date": "01-12", "cost": 1400 },
    { "date": "01-13", "cost": 1100 },
    { "date": "01-14", "cost": 1200 },
    { "date": "01-15", "cost": 900 }
  ]
}

② 既存のファイルを編集
package.jsonのscriptsを編集
※mockを追加

  "scripts": {
    "start": "npx webpack serve --config webpack.config.js",
    "mock": "npx json-server --watch ./mock/dummyData.json"
  },

これで下記の実行が可能になる

yarn mock

③ 1つのファイルを作成
scr > types > type.d.tsを作成

export interface CostGraphData {
  date: string;
  cost: number;
}

export interface CostGraphProps {
  costGraphData: CostGraphData[];
}

④ 既存のファイルを編集
モックデータから接続するできるようにコードを編集
※ついでにpropsからデータを渡す

import React, { useEffect, useState } from "react";
import { CostGraph } from "./component/graph";

import { CostGraphData } from "./types/type";

const App = () => {
  const [graphData, setGraphData] = useState<CostGraphData[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch("http://localhost:3000/costGraphData");
      const data = await response.json();
      setGraphData(data);
    };
    fetchData();
  }, []);
  return (
    <>
      <h1>Hello World</h1>
      <CostGraph costGraphData={graphData} />
    </>
  );
};
export default App;

import React, { FC } from "react";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
} from "recharts";

import { CostGraphProps } from "../types/type";

export const CostGraph: FC<CostGraphProps> = (props) => {
  const { costGraphData } = props;

  return (
    <>
      <LineChart
        width={730}
        height={250}
        data={costGraphData}
        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="date" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Line type="monotone" dataKey="cost" stroke="#8884d8" />
      </LineChart>
    </>
  );
};

⑤ 確認