آموزش استفاده از React ChartJS

مهر 10, 1401
ارسال توسط پیام حیاتی

آموزش استفاده از React ChartJS

در این مطلب می خوایم ببینیم به چه شکل می تونیم از نمودارها و چارت ها در پروژه های ReactJS استفاده کنیم و از آنها بهره ببریم.

آموزش استفاده از نمودارها در ReactJS

استفاده از چارت ها ونمودارها نیاز هر پروژه ای نیست اما اگر لازم شد chartJS یکی از بهترین ماژول ها برای انجام این موارد هست.

نصب React ChartJS

برای نصب این ماژول در ترمینال و مسیر پروژه، دستور زیر رو وارد می کنیم:

				
					npm i chart.js react-chartjs-2

با مثال پیش می ریم که بهتر متوجه بشیم کارکردها رو، یک folder به نام components در مسیر src می سازیم و سه کامپوننت با نام ها و کدهای زیر درونش ایجاد می کنیم.

				
					// BarChartJS.js

import { Bar } from "react-chartjs-2";
import { Chart as ChartJS } from "chart.js/auto";

const BarChart = ({ chartData }) => {
  return (
    <>
      <div className="w-96">
        <Bar data={chartData} />
      </div>
    </>
  );
};

export default BarChart;

				
					// LineChart.js

import { Line } from "react-chartjs-2";
import { Chart as ChartJS } from "chart.js/auto";

export const LineChart = ({ chartData }) => {
  return (
    <>
      <div className="w-96">
        <Line data={chartData} />
      </div>
    </>
  );
};

				
					// PieChart.js

import { Pie } from "react-chartjs-2";
import { Chart as ChartJS } from "chart.js/auto";

const PieChart = ({ chartData }) => {
  return (
    <>
      <div className="w-60">
        <Pie data={chartData} />
      </div>
    </>
  );
};

export default PieChart;

همانطور که مشاهده می کنید در ابتدا ما نوع چارتی رو که مدنظرمون هست import می کنیم، خط دوم برای نمایش صحیح چارت ها می باشد که در صورت عدم استفاده صفحه سفید بازگشت داده می شود.

برای اینکه کار اصولی پیش بره و بتونیم به دفعات از داده ها استفاده کنیم آنها رو به شکل props از کامپوننت والد که App.js هست برای کامپوونت ها ارسال می کنیم.

برای ایجاد داده ها یک فایل با نام Data.js در مسیر src پروژه ایجاد و اطلاعات زیر رو واردش می کنیم.

				
					// Data.js

export const UserData = [
  {
    id: 1,
    year: 2021,
    userGain: 4000,
    userLost: 823,
  },
  {
    id: 2,
    year: 2020,
    userGain: 60000,
    userLost: 800,
  },
  {
    id: 3,
    year: 2019,
    userGain: 50000,
    userLost: 700,
  },
  {
    id: 4,
    year: 2018,
    userGain: 30000,
    userLost: 500,
  },
];

در مرحله اخر وارد فایل App.js میشیم و کدهای مربوط به import کردن کامپوننت ها، داده ها رو می نویسیم:

				
					// App.js

import { UserData } from "./Data";
import { useState } from "react";
import BarChart from "./components/BarChart";
import { LineChart } from "./components/LineChart";
import PieChart from "./components/PieChart";

function App() {
  const [userData, setUserData] = useState({
    labels: UserData.map((data) => data.year),
    datasets: [
      {
        label: "User Gained",
        data: UserData.map((data) => data.name),
        backgroundColor: ["green", "purple", "blue"],
      },
    ],
  });

  return (
    <>
      <div className="container grid lg:grid-cols-3 md:grid-cols-1 sm:grid-cols-1 gap-1 align-center text-center lg:justify-center md:justify-center bg-gray-400 mx-auto mt-2 rounded-lg p-2">
        <div>
          <BarChart chartData={userData} />
        </div>
        <div>
          <LineChart chartData={userData} />
        </div>
        <div>
          <PieChart chartData={userData} />
        </div>
      </div>
    </>
  );
}

export default App;