چارت در ری اکت با این 8 کتابخانه خفن ! ( نمایش Chart در React به سادگی )
چارت در ری اکت یکی از چالش برانگیز ترین قسمت های یک اپیکیشن ری اکتی به حساب میاد! در نگاه اول همه ی ما فکر میکنیم که ساخت و نمایش یک چارت در React خیلی سخت و پیچیدس، اما خوشبختانه اینطور نیست 🙂
دونستن اینکه بهترین کتابخانه نمایش Chart در ری اکت چیه و چطور میشه یک چارت اصولی پیاده سازی کرد، کمک میکنه که به ساده ترین شکل ممکن چارت دلخواه خودمون رو پیاده سازی کنیم و درگیر چالش های زمانبر نشیم!
تو این مقاله چه مطالبی رو باهمدیگه یاد میگیریم ؟
چرا چارت ؟!
دیتا و اطلاعات همیشه با ارزش بوده و هست اما این اطلاعات همیشه جذاب نیستن!
ما به عنوان یک React Developer خلاق باید اطلاعات اپیکیشن خودمون رو به کمک چارت بصورت جذاب و گرافیکی نمایش بدیم.
زمانیکه اطلاعات و دیتای خودمون رو درقالب چارت نمایش میدیم، نه تنها برای کاربر خیلی خیلی جذاب تره بلکه درک اون Data برای کاربر خیلی راحت تره.
طبیعتا اگه دیتای خودمون رو در قالب نمودار های گرافیکی نمایش بدیم برای کاربر خیلی جذاب و قابل درک خواهد بود تا اینکه این Data رو بصورت متنی نمایش بدیم.
نمایش چارت در ری اکت
زمانیکه از کتابخانه ری اکت برای توسعه وب اپیکیشن خودمون استفاده میکنیم، میتونیم از کتابخانه های مختلفی برای نمایش چارت و نمودار استفاده کنیم.
ما باید با توجه به نیاز خودمون یکی از این کتابخونه هارو انتخاب کنیم و ازشون استفاده کنیم.
در نهایت تمام این 8 کتابخانه رو با توجه به معیار های مختلف، باهمدیگه مقایسه میکنیم تا ببینیم بهترین کتابخانه Chart در ری اکت چیست 🙂
کتابخانه Recharts
کتابخانه Recharts یکی از محبوب ترین و پر استفاده ترین کتابخانه نمایش چارت در ریکت به حساب میاد که بیش از 22 هزار Star در Github داره!
خوشبختانه با مراجعه به وبسایت Recharts میبینیم که چقدر داکیومنت و راهنمای خوب و مناسبی داره.
Recharts به ما چارت های زیبا ارائه میده که کاملا قابل شخصی سازی هستن. خروجی چارت ها بصورت SVG نمایش داده میشه.
چارت هایی که کتابخانه Recharts به ما ارائه میده بصورت پیشفرض Responsive نیستن اما ما میتونیم از طریق تگ والدشون، اونارو ریسپانسیو کنیم.
همچنین کتابخانه ریچارت جامعه آماری خیلی بزرگی داره و مدت زمان خیلی زیادی هست که منتشر شده.
از مهمترین ویژگی های Recharts میشه به موارد زیر اشاره کرد :
- بیش از 1.5 میلیون دانلود هفتگی در npm
- بیش از 22 هزار Star دریافتی در Github
- راهنما و داکیومنت کامل
- جامعه آماری خیلی بزرگ
- نمایش چارت بصورت SVG
- متن باز ( Open Source )
کتابخانه react-chartjs-2
اگه با کتابخانه Chart.js آشنا باشین، دیگه نیازی به یادگیری کتابخانه react-chartjs-2 ندارید! چون مفاهیم react-chart-2 از Chart.js گرفته شده.
این کتابخانه چارت در ری اکت رو بصورت Canvas نمایش میده. ( نه SVG )
اگه نیاز به چارت های انیمیشنی داریم، میتونیم از کتابخانه react-chartjs-2 استفاده کنیم چون این کتابخونه از انیمیشن پشتیبانی میکنه.
همچنین انیمیشن های این کتابخانه کاملا ریسپانسیو هستن و در صفحات با سایز های مختلف به درستی نمایش داده میشن.
کتابخانه react-chartjs-2 راهنما و داکیومنت جامع و دقیقی داره و خوشبختانه خیلی راحت میشه یادگرفتش!
برخی از مهمترین ویژگی های react-chartjs-2 عبارتند از :
- بیش از 6.5 هزار Star در گیت هاب
- بیش از 1 میلیون دانلود هفتگی در npm
- بر اساس Chart.js پیاده سازی شده
- امکان پیاده سازی چارت بر اساس Canvas
- متن باز ( Open Source )
کتابخانه Victory
کتابخانه Victory یکی از ساده ترین کتابخانه های نمایش چارت در React به حساب میاد که پیشنهاد عالی برای مبتدیان هست.
یادگیری و استفاده از Victory خیلی آسونه و امکان پیاده سازی چارت های پیشرفته رو به ما میده.
راهنما و داکیومنت کتابخانه Victory هم خیلی ساده، دقیق و کامله که باعث میشه خیلی راحت بشه یادگیریش رو شروع کرد.
چارت هایی که به کمک Victory میسازیم در دستگاه های IOS و Android به خوبی نمایش داده میشن و این یکی از مهمترین مزیت های اون هست.
کتابخانه Victory جامعه آماری کوچکتری نسبت به رقبای خودش داره.
از مهمترین ویژگی های Victory میشه به موارد زیر اشاره کرد :
- سازگاری کامل با ری اکت / ری اکت نیتیو
- نمایش چارت بصورت SVG
- بیش از 10 هزار Star در گیت هاب
- بیش از 200 هزار دانلود هفتگی در npm
کتابخانه Nivo
Nivo یکی از بهترین کتابخانه های نمایش چارت در React به حساب میاد که چارت های خروجی رو بصورت SVG یا Canvas به ما نمایش میده.
کتابخانه Nivo چارت های مختلف و متنوعی داره و از رندر سمت کلاینت و رندر سمت سرور پشتیبانی میکنه.
اکثر چارت های Nivo بصورت پیشفرض ریسپانسیو هستن و در صفحات با سایز های مختلف به درستی نمایش داده میشن.
با مراجعه به سایت Nivo میبینیم که یک وبسایت خیلی زیبا با راهنما و داکیومنت های دقیق داره.
از مهمترین ویژگی های کتابخانه Nivo میشه به موارد زیر اشاره کرد :
- نمایش چارت به 2 صورت SVG و Canvas
- داخل خودش از انیمیشن های React Motion استفاده میکنه
- متن باز ( Open Source ) هست
- بیش از 12 هزار Star در Github
- بیش از 150 هزار دانلود هفتگی در npm
کتابخانه React-Vis
کتابخانه React-Vis یکی از بهترین کتابخانه های نمایش Chart در ری اکت به حساب میاد. این کتابخونه برای React Developer ها خیلی جذابه.
چون چارت هایی که React-Vis در اختیار ما میزاره دقیقا مثل کامپوننت های ری اکتی هستن و میتونن Props، Children و .. بگیرن. این کتابخانه توسط تیم Uber توسعه داده شده و با خیال راحت میشه بهش اعتماد کرد.
به کمک React-Vis میتونیم انواع مختلفی چارت با ساختار میله ای، خطی، گرد و .. نمایش بدیم.
همچنین این کتابخانه در پشت صحنه از React Motion برای نمایش انیمیشن استفاده میکنه.
چارت هایی که به کمک کتابخانه React-Vis میسازیم بصورت SVG و Canvas قابل نمایش هستن.
مهمترین ویژگی های این کتابخونه عبارتند از :
- نمایش چارت در React بصورت SVG و Canvas
- بیش از 50 هزار دانلود هفتگی در npm
- بیش از 9 هزار Star در Github
- توسعه داده شده توسط تیم Uber
کتابخانه Echarts
کتابخانه Echarts توسط تیم فنی آپاچی ( Apache ) طراحی و توسعه داده شده. به کمک کتابخانه Echarts میتونیم انواع مختلف چارت در ری اکت نمایش بدیم.
چارت های ساخته شده توسط این کتابخانه به 2 صورت SVG و Canvas قابل نمایش هستن.
کتابخانه Echarts قابلیت نمایش بیش از 200 نوع چارت مختلف داره و از انیمیشن در Chart ها پشتیبانی میکنه.
Echarts از اون بابت خیلی محبوبه و جامعه آماری بزرگی داره که توسط یک تیم معتبر و حرفه ای ( آپاچی ) طراحی و توسعه داده شده.
همچنین به ما این امکان رو میده که تا حد خیلی زیادی چارت های خودمون رو شخصی سازی کنیم و بر اساس نیاز خودمون دیتا رو در قالب چارت به کاربر نمایش بدیم.
چند مورد از مهمترین ویژگی های Echarts عبارتند از :
- چارت های بسیار زیبا با انیمیشن جذاب
- پشتیبانی از دارک مود / لایت مود
- پشتیبانی از Theme و Extention های مختلف ( افزودنی )
- نمایش چارت بصورت Canvas و SVG
- بیش از 700 هزار دانلود هفتگی!
- بیش از 60 هزار Star دریافتی در Github !
- توسعه توسط تیم حرفه ای آپاچی ( Apache )
کتابخانه BizCharts
کتابخانه BizCharts جز بهترین کتابخانه های نمایش چارت در ریکت به حساب میاد که توسط تیم حرفه ای علی بابا ( Alibaba ) طراحی و توسعه داده شده.
به کمک BizCharts هم میتونیم چارت های خودمون رو بصورت SVG و Canvas نمایش بدیم.
برای BizCharts هم Theme و Extention های مختلفی وجود داره که با توجه به نیاز خودمون ازشون استفاده کنیم.
استفاده از کتابخانه BizCharts خیلی آسونه و باتوجه به تیم قدرتمندی که داره توسعش میده، ارزش استفاده و یادگیری داره.
چند مورد از ویژگی های BizCharts عبارتند از :
- بیش از 6 هزار Star دریافتی در Github
- بیش از 20 هزار دانلود هفتگی در npm
- پشتیبانی و توسعه توسط تیم علی بابا ( Alibaba )
کتابخانه Visx
کتابخانه Visx توسط تیم فنی Airbnb طراحی و توسعه داده شده و طیف گسترده ای از چارت های زیبا و حرفه ای رو پشتیبانی میکنه.
کتابخانه Visx توسط تیم حرفه ای Airbnb طراحی، توسعه و نگهداری میشه.
Visx تمرکز خودش رو علاوه بر زیبایی، روی بهینگی و Performance گذاشته.
برخی از ویژگی های Visx عبارتند از :
- بیش از 20 هزار Star در Github
- پشتیبانی توسط تیم Airbnb
- بیش از 20 هزار دانلود هفتگی در npm
جمع بندی
ما تو این مقاله دیدیم که بهترین کتابخانه های نمایش چارت در React کدامند! اما اگه بخوایم از بین این 8 کتابخانه یکی رو انتخاب کنیم، باید کدوم رو انتخاب کنیم؟
من بر اساس معیار های مختلف، این 8 کتابخانه رو مقایسه کردم، نتیجه مقایسه بهترین کتابخانه های نمایش چارت در ری اکت بصورت زیر هست :
کتابخانه
ستاره گیت هاب
تعداد دانلود
فرمت نمایش
تیم توسعه
Recharts
9k
1.5m
SVG
متن باز
react-chartjs-2
8k
773k
Canvas
متن باز
Victory
10k
175k
SVG
Fomidable labs
Nivo
11k
336k
SVG , Canvas
متن باز
React-Vis
8k
98k
SVG , Canvas
Uber
E-Charts
45k
458k
SVG , Canvas
Apache
BizCharts
6k
23k
SVG
Alibaba
Visx
16k
295k
SVG
Airbnb
دیدگاهتان را بنویسید