وقتی با Cube.js کار می‌کنیم، تعداد زیادی از کتابخانه‌های بصری‌سازی مختلف را مشاهده می‌کنیم. این موضوع یک لایه API برای تحلیل روی پایگاه داده SQL فراهم می‌کند و نقشی در زمینهٔ بصری‌سازی ندارد، هر کتابخانه نموداری می‌تواند برای ساخت داشبوردها به کار گرفته شود.
به این دلیل است که ما همیشه دنبال یک کتابخانه بصری‌ساز خوب و موردپسند توسعه‌دهندگان هستیم.
لیست زیر متعلق به کتابخانه‌های مخصوص React است. من سعی می‌کنم تقریباً یک نمودار میله‌ای انباشته با قالب محوری و با امکان استفاده از علائم و فهرست‌های یک‌خطی نرم‌افزار برای هرکدام بسازم.
برای داده backend ما از Cube.js به میزبانی Heroku استفاده می‌کنیم که از ویژگی‌های رندرگیری استفاده می‌کند و خودش هیچ‌چیزی را رندر نمی‌کند و به ما اجازه ساخت هرچیزی را با هر کتابخانه نموداری که بخواهیم، می‌دهد.
درطول این مسیر من از دو کتابخانه خیلی روان هم به ترتیب برای قالب تاریخ‌ها و اعداد استفاده می‌کنم: moment.js و numeral.js.
وقتی‌که داده وارد می‌شود، ما از روش ()resultSet.chartPivot از client مربوط به Cube.js جاوااسکریپت استفاده می‌کنیم. این آرایه داده را برمی‌گرداند و در مورد ما به این صورت به‌نظر میرسد:
حالا بیایید به لیست برگردیم.
Recharts
Rechart یک مجموعه از مفاهیم نمودار modular فراهم می‌کند و کار مهم آن این است که شمارا قادر می‌سازد این مفاهیم را با یکدیگر ترکیب کنید و این باعث ساخت آسان مواردی مثل یک نمودار میله‌ای و خط ترکیبی می‌شود.
این محبوب‌ترین کتابخانه برای درج تاریخ است. بیشتر از 11000 ستاره در Github دارد اما تعداد زیادی (600مورد تا به امروز) از مسائل باز دارد. مستندات آن کاملاً گسترده است اما کمبود جزئیات در بعضی از بخش‌ها دیده می‌شود.
شما می‌توانید یک مجموعه مثال در وبسایت Rechart پیدا کنید که یک نقطه شروع خوب برای ساخت نمودارهای خودتان باشد.
Recharts یک مجموعه گزینه برای انتخاب دارد. در کنار آن انتخاب‌های سطح پایین ازطریق اِلِمان‌های انتخابی SVG را امکان‌پذیر می‌سازد.
دراینجا روش ساخت نمودار میله‌ای ما را می‌بینید:
هم در این مثال و هم در مثال‌های بعدی، من از رنگ‌ها، قالب‌بندی تاریخ و قالب‌بندی اعداد مختلفی استفاده کردم. در اینجا نحوه تعریف آنها را می‌بینید:
این را در یک CodeSandbox امتحان کنید.
Victory
Victory هم از الگوی ساختاری Rechart پیروی می‌کند و توسط Formidable توسعه یافته است که کتابخانه‌های متن‌باز دیگری در کنار Victory دارد.
Victory تنها کتابخانه این لیست است که با React Native هم کار می‌کند.
بعد از Recharts، دومین کتابخانه محبوب با بیش از 7000 ستاره در Github است؛ اما از Recharts، تعداد کمتری مسائل باز دارد. Victory انجمن چت در Spectrum دارد و همچنین به‌خوبی مستندسازی شده است و یک مجموعه از مثال‌های مختلف دارد.
Victory با دو تم عرضه شد:
روش نمایش خاکستری و مواد؛ شما را قادر می‌سازد که تم‌های کاربری خود را برای رسیدن به یک ظاهر دائم در کنار تمام نمودارها ایجاد کنید.
در زیر شما می‌توانید کد نمودار میله‌ای انباشتهشده ما را با استفاده از Victory ببینید:
این را هم در CodeSandbox امتحان کنید.
Nivo
Nivo هم مثل Recharts و Victory با استفاده از D3 و مشخصه‌های React ساخته شده است؛ اما برخلاف کتابخانه‌هایی که تا اینجا معرفی شدند، قابل‌ترکیب نیست.
Nivo یک محتوا در نمودار ایجاد می‌کند و این محتوا با چندین ویژگی تنظیم می‌شود. Nivo به‌صورت یک مجموعه از بسته‌هایی برای انواع نمودارهای خاص عرضه شده است؛ بنابراین فرد نیاز دارد که بسته خاصی برای استفاده از یک نوع نمودار خاص نصب کند.
این پروژه خودش کاملاً فعال است؛ بیشتر از 5000 ستاره در Github و تقریباً 300 عضو در انجمن‌ها دارد.
همچنین مستندات تعاملی هم دارد که با استفاده از آن شما می‌توانید تنظیماتی برای نمودار خودتان بسازید. اگرچه این خوب است؛ اما کمبود مرجع API خوب و همچنین گزینه جستجو در آن حس می‌شود.
یک Storybook با مجموعه‌ای از مثال‌ها دارد. Nivo بسیار به من کمک کرد که بتوانم زمان ساخت اولین نمودار را کاهش دهم.
مشابه Victory ، Nivo هم شما را قادر می‌سازد که تم خودتان را برای داشتن یک ظاهر ثابت در کنار تمام نمودارها بسازید. ما می‌خواهیم از بسته nivo/bar@ برای نمودار میله‌ای انباشتهشده استفاده کنیم؛ شما می‌توانید یک نمونه کد و نمایش CodeSandbox را در زیر پیدا کنید.
این را در CodeSandbox امتحان کنید.
Bizcharts
Bizcharts کتابخانه بصری‌سازی خاص React است که براساس G2 که یک دستور زبان بصری‌سازی است، بوجود آمده است. توسط Alibaba پشتیبانی می‌شود و خیلی خوب با فریمورک طراحی Ant کار می‌کند.
تقریباً 4000 ستاره در Github دارد؛ اما اکثریت توسعه‌های آن مشابه بیشتر مستندات در چین بوده است. من فکر می‌کنم که تیم آن کار بزرگی در مورد ترجمه مستندات انجام می‌دهند اما هنوز هم پروژه در حال پیشرفت است.
بااین‌وجود کمبود مستندات به زبان انگلیسی این API کاملاً به چشم می‌خورد. تنها مورد سخت، قالب‌دهی دوباره به داده در یک قالب خاص برای نمودار انباشتهشده است.
این را در یک CodeSandbox امتحان کنید.
React-vis
React-vis درحال‌توسعه توسط Uber (یک شرکت همانند اسنپ) است و با داشتن 5400 ستاره در Github و 150 مسائل باز و تعداد زیادی عضو کاملاً فعال به‌نظر میرسد.
مثل بیشتر کتابخانه‌های موجود در این لیست این هم modular است. این کتابخانه با روش‌های پیش‌فرض خوبی که باید به‌صورت جداگانه در قالب فایل CSS وارد شده باشند، عرضه شده است.
مانند Nivo، این هم یک storybook شامل مجموعه‌ای از مثال‌ها دارد. محتوای API هم به‌خوبی مستندسازی شده است. در بخش انتخابی، شما می‌توانید ظاهر و حالت را با شیوه‌های انتخابی CSS کنترل کنید.
React-vis همچنین محتوای خاصی برای ساخت نمودارهای SVG منتخب (Custom SVG Series) فراهم می‌کند.
API آن شبیه API مربوط به Victory است. شما می‌توانید ببینید که من تقریباً از transformResult مشابه با بخش‌های Victory استفاده می‌کنم.
این را در یک CodeSandbox امتحان کنید.
در پایان
در پایان، در این مقاله از سایت راکت درباره‌ی ۵ مورد از محبوب‌ترین کتابخانه‌های بصری‌سازی (visualization) صحبت کردیم.
اگر شما کتابخانه موردعلاقه‌تان را در این لیست نمی‌بینید یا از من می‌خواهید که یک مورد دیگر به این لیست اضافه کنم، از طریق قسمت نظرات همین مقاله به من اطلاع دهید. خوشحال می‌شوم که هرچندتا کتابخانه که می‌شود به این لیست اضافه کنم.
همچنین اگر مایل هستید می‌توانید دوره‌ی بازتولید React را مشاهده نمایید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید