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

بنابراین توسعه دهندگان به این نتیجه رسیدند که باید روشی برای آسان‌تر کردن این روند پیدا کنند. بنابراین، به دنبال روشی بودند که بتوانند میلیون‌ها داده و دیتابیس را در قالب های نموداری و در حالت کلی داشبوردها ادغام کنند که در نهایت موفق هم شدند. 

فناوری بصری‌سازی داده‌ها (Data visualization) در طی یک دهه گذشته به پیشرفت چشم‌گیری دست یافته است. به طوری که اکنون کتابخانه‌های نمودار پیشرفته‌ای را در دسترس داریم که کار ما را بسیار آسان‌تر ساخته است. 

در اوایل دهه ۲۰۰۰، تولید نمودار توسط نمودارهای bitmap صورت می‌گرفت. به این ترتیب که این نمودارها در سمت سرور تولید و سپس نمایش داده می‌شد. این امر با وجود افزونه‌هایی از قبیل Flash و Silverlight تعاملی‌تر و راحت‌تر شد. اما هزینه‌های مربوط به سرعت بارگیری، عمر باتری و منابع سیستم بسیار زیاد بود. 

از طرفی، با روی کار آمدن گوشی‌های همراه و تبلت‌ها سیستم‌عامل‌های جدیدی نیز ظهور کردند. سیستم‌عامل‌هایی که دیگر از افزونه‌هایی مثل Flash و Silverlight پشتیبانی نمی‌کردند.

همه این اتفاق‌ها دست به دست هم داد تا توسعه‌دهندگان را مجبور به تغییر روند و محیط کاری‌شان کنند. از این رو، توسعه‌دهندگان برای کار با نمودارها، از سمت سرور به سمت کاربر سوق پیدا کردند. تا جایی که امروزه تجسم داده‌ها توسط جاوااسکریپت و SVG صورت می‌گیرد. با استفاده از این تکنولوژی‌ها، اکنون نمودارها، بدون استفاده از افزونه خاصی، در تمامی مرورگرها اجرا می‌شوند، از تعامل بیشتری برخوردارند و نمایش انیمیشن را پشتیبانی می‌کنند.

تا اینجا تاریخچه کوتاهی از چگونگی تشکیل کتابخانه‌های جاوااسکریپت را بازگو کردیم. حال برویم سراغ اصل مطلب، یعنی معرفی کتابخانه‌های جاوااسکریپت برای رسم نمودار.

۱. D3.js

D3.js یک کتابخانه گرافیکی بسیار گسترده و قدرتمند در جاوااسکریپت است. این کتابخانه این امکان را به شما می‌دهد تا داده‌های دل‌خواه خود را به یک DOM وصل کنید. سپس تغییرات لازم را در این Document اعمال کنید. 

D3 فراتر از کتابخانه‌های نموداری معمولی است. چرا که دارای ماژول‌های فنی و بسیار کاربردی برای ایجاد نمودار است: مانند محورها، رنگ‌ها، سلسله مراتبی (درختی)، کانتور‌ها، چندضلعی‌ها و موارد دیگر. همه این ماژول‌ها منجر به ایجاد منحنی یادگیری شیب‌دار می‌شود.  

ایجاد یک نمودار ساده با این کتابخانه می‌تواند پیچیده باشد. اما با طی کردن مسیر درست، این روند آسان خواهد بود. تنها باید به چند نکته مهم توجه کنید:

• در استفاده از کتابخانه D3، همه المان‌ها از جمله محور‌ها و سایر آیتم‌های نمودار نیاز به تعریف صحیح و صریح دارند. 
• بسیاری از نمونه نمودارهای ساخته شده با D3، نشان می‌دهد که می‌توان از CSS برای استایل‌دهی به عناصر استفاده کرد. 
• هیچ ویژگی مبتنی بر نمودار به طور خودکار اعمال نمی‌شود. 

در صورتی که می‌خواهید وارد دنیای نمودارها شوید و با استفاده از خلاقیت خود تمامی المان‌ها را کنترل کنید و صفر تا صد ساخت نمودار را فرابگیرید، کتابخانه D3 بهترین انتخاب برای شماست. D3.js می‌تواند همانند یک بلوک ساختمان برای یک کتابخانه نمودار باشد. توسعه‌دهندگان از D3 استفاده می‌کنند تا بتوانند به راحتی از راه‌حل‌های نموداری بهره بگیرند. 

D3 یک کتابخانه متن باز است و به صورت رایگان در اختیار کاربران قرار گرفته است. 

۲. JSCharting

کتابخانه نمودار JSCharting تعداد زیادی از انواع نمودارهای مربوط به نقشه‌ها، گانت‌ها، سهام و سایر موارد را پشتیبانی می‌کند. این در حالی است که بدون استفاده از این کتابخانه، برای تک تک این موارد کتابخانه‌های جداگانه‌ای احتیاج دارید. اما JSCharting همه اینها را در یک پک فشرده در اختیارتان قرار می‌دهد.

JSCharting شامل نقشه کلیه کشورهای جهان و یک کتابخانه شامل آیکون‌های SVG است. همچنین شامل مجموعه‌ای از نمودارهای کوچک است که می‌توان از آنها در label نمودارها و یا هر المان div که در صفحه وجود دارد، استفاده شود. کنترل‌های UI نیز شامل نمودارهای تعاملی‌تر و پربارتری هستند که کنترل متغیرهای داده و یا بصری‌سازی آنها را بسیار آسان ساخته است. لازم به ذکر است که خروجی نمودارها را می‌توان در قالب‌های PNG، SVG، PDF و JPG گرفت. 

اگر به وب‌سایت JSCharting مراجعه کنید، مشاهده می‌کنید که در صفحه gallery به دو بخش chart type و feature samples تقسیم‌بندی شده است. در بخش chart type نمودارهایی را می‌بینید که ظاهری شسته‌رفته و تمیز دارند. همچنین یک دید بصری خوب و جامعی را برای کاربران به ارمغان می‌آورند.‌ در بخش feature samples نیز نمونه‌هایی را مشاهده می‌کنید که می‌توانید با استفاده از آنها نمودار خود را شخصی‌سازی کنید. 

تنظیمات ایجاد و کنترل انواع نمودارها با استفاده از کتابخانه JSCharting بسیار ساده است. به طوری که برای داشتن یک نمودار پیچیده، تنظیمات خیلی کمی باید انجام دهید تا نمودار موردنظرتان را ایجاد کنید. 

JSCharting برای استفاده غیرتجاری و شخصی رایگان است. برای استفاده تجاری نیز مجوز‌هایی را ارائه می‌دهد که شامل کلیه نمودارها و محصولات با یک هزینه واحد است. 

۳. Highcharts

Highcharts یک کتابخانه معروف ایجاد نمودار در جاوااسکریپت است که مورد استفاده بسیاری از شرکت‌های بزرگ جهان نیز هست. 

در این کتابخانه، نمودارها با استفاده از SVG و VML به منظور سازگاری با نسخه‌های پیشین مرورگرها همانند IE6 یا IE8 تولید می‌شوند. با نیم‌نگاهی به دمو نمودارهای ساخته شده با این کتابخانه، به این نتیجه می‌رسیم که در تولید نمودار مجموعه‌ای از ویژگی‌های بسیار کاربردی را در اختیار کاربران قرار می‌دهد. اما از نظر بصری چندان چنگی به دل نمی‌زند. 

در مستندات عمومی کتابخانه Highcharts آموزش بسیاری از موضوعات داده شده است و مستندات API آن نیز کامل و در دسترس است. 

Highcharts برای استفاده غیرتجاری و شخصی رایگان است. برای استفاده تجاری از آن اخذ مجوزهایی ضروری است. لازم به ذکر است که نمودارهای مربوط به سهام، نقشه و گانت مجوزهای جداگانه‌ای دارند. 

۴. amCharts

amCharts به تازگی نسخه ۴ خود را منتشر کرده است. در این نسخه علاوه‌بر ویژگی‌های نسخه‌های پیشین، ویژگی جدیدی را نیز به آن اضافه کرده است: ساخت انیمیشن‌های SVG. این کتابخانه با استفاده از یک موتور قوی امکان ایجاد صحنه‌هایی همانند یک فیلم را فراهم کرده است. 

دمو نمودارهای آن بسیار زیبا به نظر می‌رسند. اکثر دموهای آن تعدادی palettes و slider UI ارائه می‌دهند که در تنظیم متغیرهای نمودار مورد استفاده قرار می‌گیرند. 

مستندات کتابخانه amCharts شامل بسیاری از آموزش‌ها و توضیحات کامل درباره ویژگی‌های API است. 

ایجاد نمودار با استفاده از این کتابخانه، کمی متفاوت‌تر از رویکرد مبتنی بر پیکربندی است و در عوض از declarative API استفاده می‌کند. هرچند که برای پیکربندی نمودارها به کدنویسی بیشتری نیاز دارد، اما تجربه تکمیل کد آن خوب و جذاب است. 

amCharts دارای مجوز رایگان با نمودارهای برند و مجوزهای پرداخت شده برای سایر مصارف است. 

۵. Google charts

یکی از قدرتمند‌ترین و آسان‌ترین کتابخانه‌های جاوااسکریپت Google charts است. 

نمونه نمودار‌های آن از لحاظ بصری جلوه‌ای ساده و قابل درک هستند. اگر به وب‌سایت ان مراجعه کنید، در بخش gallery و extended gallery انواع مختلف نمودار نشان داده شده است. البته در بخش Guides انواع بیشتری از نمودارها مثل نمودار تقویم نیز وجود دارد که در بخش gallery نمایش داده نشده است. 

هر نوع نمودار آن دارای یک آموزش اختصاصی با مثال‌های ملموسی است که کار با این کتابخانه را آسان‌تر کرده است. این آموزش‌ها شامل کدهایی است که مرتبط با ویژگی‌ها و لیست API است. بنابراین با استفاده از این کتابخانه یک تجربه خوبی از شروع کار با نمودارهای جدید خواهید داشت. 

از ویژگی‌های منحصر به فرد کتابخانه Google charts می‌توان به موارد زیر اشاره کرد: 

• نمودارهای این کتابخانه آپشن تنظیمات سفارشی دارند. 
• مجموعه داده‌ها توسط یک کلاس با نام DataTable جمع‌آوری می‌شوند که می‌توانند در کلیه نمودارها مورد استفاده قرار بگیرند. 
• هر نوع نمودار آموزش منحصر به فرد خود را دارد. 
• نام‌گذاری Property ها استاندارد است و کاربردهای زیادی در همه نوع نمودارها دارند. 

کتابخانه  Google charts رایگان است. اما نکته‌ای که وجود دارد این است که این کتابخانه در واقع یک وب سرویس است و نمی‌توان از آن به صورت محلی استفاده کرد. بنابراین، اگر استفاده از کتابخانه برای شما حیاتی است، توصیه می‌کنیم که گزینه‌های دیگری را برای تولید نمودار استفاده کنید. 

۶. ZingChart

ZingChart انواع نمودارها را ارائه می‌دهد که می‌توانند با Angular، React و سایر فریم‌ورک‌ها ترکیب شوند. این کتابخانه ویژگی‌های بسیار پرقدرت و کاربردی با گزینه‌های سفارشی‌سازی زیادی دارد. 

نمودارهای دمو آن حاکی از طیف وسیعی از تم‌هایی است که برای طراحی نمودارها استفاده می‌شود. البته این دمو‌هایی که در وب‌سایت مشاهده می‌شوند تنها بخشی از انواع نمودارهایی است که در این کتابخانه وجود دارند. 

مستندات آن شامل آموزش‌های مربوط به انواع مختلف نمودارها، شرح تعدادی از ویژگی‌های خوب این کتابخانه و لیست کامل API هاست. 

 ZingChart از آپشن پیکربندی برای شخصی‌سازی نمودارها استفاده می‌کند. نمودارها شامل بسیاری از تنظیمات خاص مانند سبک فونت است که می‌توانند به راحتی تنظیم شوند. 

برند‌های تجاری می‌توانند به صورت رایگان از کتابخانه ZingChart استفاده کنند. مجوز پرداخت شده آن نیز برای کاربرانی که به منظور کارهای غیرتجاری به آن نیاز دارند، در دسترس است. 

۷. Chart.js

Chart.js یک کتابخانه متن باز جاوااسکریپت است که از ۸ نوع نمودار پشتیبانی می‌کند. انواع نمودارهای آن عبارتند از: نمودارهای خطی، bar charts، area charts، رادار، pie charts، bubble، scatter plots و mixed. 

این کتابخانه از المان canvas برای رندر کردن و ریسپانسیو ساختن نمودارها برای سایزهای مختلف پنجره مرورگرها استفاده می‌کند. لازم به ذکر است که تنها تا نسخه IE9 پشتیبانی می‌کند. البته Polyfills کار با IE7 را ممکن ساخته است. 

نمونه نمودارهایی که توسط کتابخانه Chart.js  ساخته شده‌اند، نسبتا مدرن و جدید به نظر می‌رسند و برای اولین‌بار شامل انیمیشن‌های اولیه است. به این ترتیب که به هنگام اضافه کردن یک سری از نقاط داده، این کتابخانه شروع می‌کند به متحرک‌سازی آنها به صورت real-time. 

آپشن‌های نمودار را می‌توان تغییر داد و با فراخوانی تابع update() قادر به به‌روزرسانی نمودار خواهید بود. همچنین سورس‌کدهای نمونه نمودارها در وب‌سایت نشان داده نشده است، اما در Github موجود است. 

از آپشن‌های پیکربندی نیز برای ایجاد و تغییر نمودارها استفاده می‌شود. علاوه‌براین، آپشن‌های API هم تمیز و جلوه بصری فوق‌العاده‌ای دارند.

مستندات این کتابخانه کامل است و شامل آموزش‌هایی در رابطه با APIها و قطعه کدهاست. 

Chart.js یک کتابخانه متن باز است و برای مصارف شخصی و تجاری قابل استفاده است. هرچند که تعداد محدودی از انواع نمودارها ممکن است برای برخی از پیش‌نیازهای پیشرفته داشبورد مشکل‌ساز شوند. 

نتیجه‌گیری

اکوسیستم کتابخانه‌های نمودار جاوااسکریپت طی یک دهه گذشته به طور قابل توجهی تکامل یافته است. امروزه تعداد زیادی از محصولات نموداری وجود دارند که پیش‌نیازهای بسیار متنوعی را ارائه می‌دهند و با انواع نمودارها خدمات بزرگی به طیف گسترده‌ای از پروژه‌ها ارائه می‌کنند. 

اکثر کتابخانه یک نسخه آزمایشی رایگان را در اختیار شما قرار می‌دهند که این امکان را می‌دهد تا کیفیت و کارایی نمودار را ارزیابی و بررسی کنید. 

برای انتخاب بهترین کتابخانه نمودار جاوااسکریپت پیشنهاد می‌کنیم داده‌های خود را در چند کتابخانه ذکر شده در بالا وارد کنید و آن را آزمایش کنید. با این کار مطمئن باشید که به یک نتیجه خوب و ایده‌ال برای پروژه‌های فعلی و آینده خود خواهید رسید.

منبع