چگونه نمودارها را به برنامه React خود اضافه کنید

از نمودارهای میله ای اصلی گرفته تا نمودارهای xy و فراتر از آن، با React نمودارها را دریافت کنید.

نمودارها روشی راحت و جذاب برای تجسم داده ها در اختیار کاربران شما قرار می دهند. آنها می توانند درک داده ها را آسان تر کنند و می توانند برنامه شما را تعاملی تر کنند.

راه های مختلفی برای ایجاد نمودار در React وجود دارد، از جمله استفاده از CSS اولیه یا کتابخانه ای مانند React-Vis یا React Google Charts.

نحوه ایجاد نمودار در React با CSS

ایجاد نمودار در React با استفاده از CSS اولیه نسبتا آسان است. تنها کاری که باید انجام دهید این است که یک عنصر div با عرض و ارتفاع ایجاد کنید، سپس رنگ پس زمینه را به رنگ دلخواه نمودار تنظیم کنید. مثلا:

import React from 'react';

const Chart = () => {
  return (
    <div style={{width: '100px', height: '300px', backgroundColor: '#5D6AFF'}}/>
  );
}

export default Chart;

در کد بالا، کتابخانه React را وارد کردیم. سپس تابعی به نام Chart ایجاد کردیم که یک div با عرض 100 پیکسل، ارتفاع 300 پیکسل و رنگ پس‌زمینه #5D6AFF را برمی‌گرداند. این یک نمودار اساسی با پس زمینه آبی ایجاد می کند. همچنین می توانید از Material UI یا Tailwind CSS در برنامه React خود برای ایجاد نمودار استفاده کنید.

همچنین می توانید نمودارهای متعددی را با متن یا تصاویر در داخل div ایجاد کنید تا نمودارهای پیچیده تری ایجاد کنید.

import React from 'react';

const Chart = () => {
  return (
    <div>
      <div style={{width: '100px', height: '300px', backgroundColor: '#5D6AFF'}}>
        <p>Chart 1</p>
      </div>
      <div style={{width: '100px', height: '300px', backgroundColor: '#FFCF00'}}>
        <img src="https://dummyimage.com/40x80/000/0011ff" style={{padding:'100px 30px'}} />
      </div>
    </div>
  );
}

export default Chart;

نمودارهای واکنش با استفاده از کتابخانه React-Vis

React-Vis یک کتابخانه ایجاد شده توسط Uber است که به شما امکان می دهد نمودارها و نمودارها را در React ایجاد کنید. مجموعه ای از اجزا را فراهم می کند که ایجاد نمودارها با اشکال، رنگ ها و اندازه های مختلف را آسان می کند. همچنین از انیمیشن ها و تعامل پشتیبانی می کند که می تواند به جذاب تر کردن نمودار شما کمک کند.

برای استفاده از React-Vis، ابتدا باید یک برنامه اصلی React ایجاد کنید و کتابخانه را نصب کنید. با دستور زیر می توانید این کار را انجام دهید:

npm install react-vis

هنگامی که کتابخانه را نصب کردید، می توانید یک نمودار اصلی با کد زیر ایجاد کنید:

import React, { useState } from 'react';

import {
  XYPlot,
  LineSeries,
  VerticalGridLines,
  HorizontalGridLines,
  XAxis,
  YAxis
} from 'react-vis';

const Chart = () => {
  const [data] = useState([
    { x: 0, y: 8 },
    { x: 1, y: 5 },
    { x: 2, y: 4 },
    { x: 3, y: 9 },
    { x: 4, y: 1 },
    { x: 5, y: 7 },
    { x: 6, y: 6 },
    { x: 7, y: 3 },
    { x: 8, y: 2 },
    { x: 9, y: 0 }
  ]);

  return (
    <XYPlot width={300} height={300}>
      <VerticalGridLines />
      <HorizontalGridLines />
      <XAxis />
      <YAxis />
      <LineSeries data={data} />
    </XYPlot>
  );
}

export default Chart;

کد بالا کتابخانه های React و React-Vis را وارد می کند. سپس تابعی به نام نمودار تعریف می کند که XYPlot را با VerticalGridLines، HorizontalGridLines، XAxis، YAxis و LineSeries برمی گرداند. LineSeries آرایه داده را می گیرد که شامل مختصات x و y نقاط تشکیل دهنده خط است.

با استفاده از React Google Charts Library

React Google Charts کتابخانه دیگری است که ایجاد نمودار در React را آسان می کند. مجموعه ای از مؤلفه ها را برای ایجاد انواع مختلف نمودارها مانند نمودار میله ای، نمودار دایره ای و نمودار خطی ارائه می دهد. همچنین از انیمیشن ها و تعامل پشتیبانی می کند که می تواند به جذاب تر کردن نمودار شما کمک کند.

برای استفاده از نمودارهای React Google، ابتدا باید کتابخانه را نصب کنید. با دستور زیر می توانید این کار را انجام دهید:

npm install react-google-charts

هنگامی که کتابخانه را نصب کردید، می توانید یک نمودار اصلی با کد زیر ایجاد کنید:

import React, { useState } from 'react';
import { Chart } from 'react-google-charts';

const MyChart = () => {
  const [data] = useState([
    ['Year', 'Sales', 'Expenses'],
    ['2013', 1000, 400],
    ['2014', 1170, 460],
    ['2015', 660, 1120],
    ['2016', 1030, 540]
  ]);

  return (
    <Chart
      width={'400px'}
      height={'300px'}
      chartType="Bar"
      data={data}
    />
  );
}

export default MyChart;

این کد کتابخانه‌های react و react-google-charts را وارد می‌کند. سپس تابعی به نام MyChart ایجاد می کند که یک جزء نمودار را برمی گرداند. جزء نمودار آرایه داده را می گیرد که حاوی برچسب ها و مقادیر نقاط تشکیل دهنده نمودار است.

معایب استفاده از CSS

استفاده از CSS برای ایجاد نمودار در React چند معایب دارد:

• سخت برای استفاده: اگر می خواهید نمودارهای پیچیده ایجاد کنید، استفاده از CSS ممکن است دشوار باشد.
• خیلی انعطاف پذیر نیست: CSS خیلی انعطاف پذیر نیست، بنابراین ایجاد تغییرات در نمودارها می تواند دشوار باشد.
• تعاملی نیست: نمودارهای CSS تعاملی نیستند، بنابراین کاربران شما نمی توانند با آنها تعامل داشته باشند.

اگر می خواهید نمودارهای پیچیده ایجاد کنید، نمودارهای React-vis و React-google انتخاب های بهتری هستند. با این حال، اگر می خواهید نمودارهای ساده ایجاد کنید، CSS ممکن است گزینه خوبی باشد.

مزایای استفاده از React-Vis

چندین مزیت استفاده از React-Vis برای ایجاد نمودار در React وجود دارد:

• استفاده آسان: استفاده از React-Vis آسان است، بنابراین می توانید نمودارهای پیچیده را به راحتی ایجاد کنید.
• بسیار انعطاف پذیر: React-Vis بسیار انعطاف پذیر است، بنابراین می توانید به راحتی تغییراتی را در نمودارهای خود ایجاد کنید.
• تعاملی: نمودارهای React-Vis تعاملی هستند، بنابراین کاربران شما می توانند با آنها تعامل داشته باشند.
• متحرک: نمودارهای React-Vis از انیمیشن ها پشتیبانی می کنند، بنابراین می توانید نمودارهای خود را جذاب تر کنید.

اگر می خواهید نمودارهای پیچیده ای ایجاد کنید که تعاملی و متحرک هستند، React-Vis انتخاب خوبی است.

مزایای استفاده از نمودارهای React Google

درست مانند React-Vis، استفاده از نمودارهای React Google برای ایجاد نمودار در React مزایای متعددی دارد:

• استفاده آسان: استفاده از نمودارهای React Google آسان است، بنابراین می توانید نمودارهای پیچیده را به راحتی ایجاد کنید.
• انواع نمودارهای مختلف: نمودارهای React Google انواع نمودارهای مختلفی را ارائه می دهند، بنابراین می توانید بهترین را برای داده های خود انتخاب کنید.
• پشتیبانی از انیمیشن: React Google Charts از انیمیشن ها پشتیبانی می کند، بنابراین می توانید نمودارهای خود را جذاب تر کنید.

افزایش تعامل کاربر با نمودارها

نمودارها روشی عالی برای تجسم داده ها هستند، اما می توانید از آنها برای افزایش تعامل کاربران نیز استفاده کنید. افزودن انیمیشن و تعامل به نمودارها می تواند آنها را جذاب تر کند و به کاربران شما کمک کند تا داده های شما را بهتر درک کنند.

بنابراین، اگر به دنبال راهی برای افزایش تعامل کاربر در برنامه React خود هستید، اضافه کردن نمودارها را در نظر بگیرید. همچنین می‌توانید برنامه React خود را در یک پلتفرم سریع، ایمن و مقیاس‌پذیر مانند Github مستقر کنید.

منبع مقاله