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

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

در این راهنما، به بررسی نمودارهای SVG، نحوه کار آنها و نحوه ساخت یک نمودار میله‌ای SVG ساده خواهیم پرداخت. همچنین در مورد زمان استفاده از یک کتابخانه نمودارسازی به جای ایجاد دستی نمودارها بحث خواهیم کرد.

TL;DR

نمودارهای SVG، تجسم داده‌های مقیاس‌پذیر، واضح و انعطاف‌پذیری هستند که با گرافیک برداری مقیاس‌پذیر ساخته شده‌اند. آن‌ها برای نمودارهای ساده وب، تصاویر رابط کاربری سفارشی و عناصر تعاملی که می‌توانند با CSS استایل‌بندی شده و با جاوا اسکریپت به‌روزرسانی شوند، مفید هستند. توسعه‌دهندگان می‌توانند نمودارهای SVG اولیه را به صورت دستی با استفاده از عناصری مانند <svg> ، <درست> ، <خط> ، <دایره> ، متن ، و <مسیر> با این حال، توسعه دستی نمودار SVG زمانی دشوارتر می‌شود که برنامه‌ها به ویژگی‌های پیشرفته، مجموعه داده‌های بزرگ، واکنش‌گرایی، راهنماهای ابزار، راهنماها، خروجی‌ها یا به‌روزرسانی‌های بلادرنگ نیاز داشته باشند. برای داشبوردهای عملیاتی و برنامه‌های وب پیچیده، یک کتابخانه نمودار اغلب انتخاب سریع‌تر و کاربردی‌تری است.

نمودارهای SVG چیستند؟

نمودارهای SVG، تجسم داده‌ها هستند که با استفاده از گرافیک برداری مقیاس‌پذیر ایجاد می‌شوند. SVG یک فرمت مبتنی بر XML است که برای ترسیم گرافیک‌های دوبعدی در مرورگر استفاده می‌شود. می‌توان آن را مستقیماً درون HTML نوشت و با CSS استایل‌بندی کرد.

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

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

از آنجا که عناصر SVG بخشی از DOM هستند، توسعه‌دهندگان می‌توانند با استفاده از CSS و جاوا اسکریپت، آنها را استایل‌بندی، متحرک‌سازی و تعاملی کنند.

چرا از SVG برای نمودارها استفاده کنیم؟

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

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

نمودارهای SVG همچنین تصاویر واضحی ارائه می‌دهند. خطوط، شکل‌ها و متن می‌توانند در نمایشگرهای مدرن واضح به نظر برسند. این امر SVG را به انتخابی قوی برای داشبوردها و گزارش‌هایی تبدیل می‌کند که خوانایی در آنها اهمیت دارد.

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

SVG همچنین با CSS به خوبی کار می‌کند. می‌توانید با استفاده از کلاس‌ها، به عناصر نمودار استایل بدهید، جلوه‌های hover اضافه کنید و انیمیشن‌های ساده بسازید. این کار تطبیق نمودارها با طراحی بصری یک برنامه وب را آسان‌تر می‌کند.

تعامل یکی دیگر از دلایلی است که توسعه‌دهندگان از نمودارهای SVG استفاده می‌کنند. از آنجایی که عناصر SVG مانند عناصر DOM معمولی رفتار می‌کنند، می‌توانند به رویدادهایی مانند کلیک، حرکات ماوس و تعاملات صفحه کلید پاسخ دهند.

قابلیت دسترسی با SVG نیز امکان‌پذیر است. توسعه‌دهندگان می‌توانند برچسب‌ها، عناوین، توضیحات و ویژگی‌های ARIA را اضافه کنند تا نمودارها برای کاربرانی که برای درک آنها به فناوری‌های کمکی متکی هستند، آسان‌تر شوند.

SVG توسط مرورگرهای مدرن پشتیبانی می‌شود. توسعه‌دهندگان می‌توانند بدون افزونه‌های رندر اضافی، مستقیماً در HTML از آن استفاده کنند.

نمودارهای SVG چگونه کار می‌کنند؟

نمودارهای SVG با استفاده از عناصر SVG ساخته می‌شوند. این عناصر بخش‌های بصری نمودار را تعریف می‌کنند.

ظرف اصلی عبارت است از <svg> عنصر. این عنصر ناحیه ترسیم نمودار را تعریف می‌کند. درون <svg> عنصر، می‌توانید شکل، خط، متن و مسیر اضافه کنید.

<درست> عنصر برای رسم مستطیل استفاده می‌شود. معمولاً برای نمودارهای میله‌ای استفاده می‌شود زیرا هر میله را می‌توان به صورت یک مستطیل با عرض و ارتفاع مشخص نمایش داد.

<خط> عنصر برای رسم خطوط مستقیم استفاده می‌شود. می‌توان از آن برای محورها، خطوط شبکه یا نمودارهای خطی ساده استفاده کرد.

<دایره> عنصر برای رسم دایره استفاده می‌شود. برای نمودارهای پراکندگی، نقاط داده و نشانگرها مفید است.

متن عنصر برای اضافه کردن برچسب‌ها، مقادیر و متن محور به نمودار استفاده می‌شود.

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

در اینجا یک مثال ساده از SVG آورده شده است:

 <svg width="300" height="200"> <rect x="40" y="60" width="50" height="100" fill="steelblue"></rect> <text x="40" y="180">A</text> </svg> در این مثال، <svg width="300" height="200"> <rect x="40" y="60" width="50" height="100" fill="steelblue"></rect> <text x="40" y="180">A</text> </svg>

<svg> عنصر یک ناحیه ترسیم ایجاد می‌کند. <درست> عنصر یک میله رسم می‌کند. متن عنصر یک برچسب زیر نوار اضافه می‌کند.

موقعیت هر عنصر SVG با استفاده از مختصات کنترل می‌شود. ویژگی‌های x و y مشخص می‌کنند که یک عنصر از کجا شروع می‌شود. عرض و ارتفاع اندازه اشکالی مانند مستطیل را مشخص می‌کنند.

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

می‌توانید این نمودار میله‌ای ساده را در CodePen در زیر مشاهده کنید:

یک نمودار میله‌ای SVG ساده که در CodePen رسم شده است

چگونه یک نمودار میله‌ای ساده SVG بسازیم

بیایید یک نمودار میله‌ای SVG ساده با استفاده از HTML و عناصر پایه SVG بسازیم.

فرض کنید داده‌های زیر را داریم:

 const data = [ { label: "Jan", value: 40 }, { label: "Feb", value: 70 }, { label: "Mar", value: 55 }, { label: "Apr", value: 90 } ]; ما می‌توانیم یک نمودار میله‌ای ساده را به صورت دستی با استفاده از SVG ایجاد کنیم: const data = [ { label: "Jan", value: 40 }, { label: "Feb", value: 70 }, { label: "Mar", value: 55 }, { label: "Apr", value: 90 } ];

 <svg width="400" height="250" viewBox="0 0 400 250"> <!-- Chart axis --> <line x1="40" y1="200" x2="360" y2="200" stroke="#333"></line> <line x1="40" y1="30" x2="40" y2="200" stroke="#333"></line> <!-- Bars --> <rect x="70" y="120" width="40" height="80" fill="#3498db"></rect> <rect x="140" y="60" width="40" height="140" fill="#3498db"></rect> <rect x="210" y="90" width="40" height="110" fill="#3498db"></rect> <rect x="280" y="20" width="40" height="180" fill="#3498db"></rect> <!-- Labels --> <text x="78" y="220" font-size="14">Jan</text> <text x="148" y="220" font-size="14">Feb</text> <text x="218" y="220" font-size="14">Mar</text> <text x="288" y="220" font-size="14">Apr</text> </svg> این یک نمودار میله‌ای ساده با چهار میله ایجاد می‌کند. هر کدام <svg width="400" height="250" viewBox="0 0 400 250"> <!-- Chart axis --> <line x1="40" y1="200" x2="360" y2="200" stroke="#333"></line> <line x1="40" y1="30" x2="40" y2="200" stroke="#333"></line> <!-- Bars --> <rect x="70" y="120" width="40" height="80" fill="#3498db"></rect> <rect x="140" y="60" width="40" height="140" fill="#3498db"></rect> <rect x="210" y="90" width="40" height="110" fill="#3498db"></rect> <rect x="280" y="20" width="40" height="180" fill="#3498db"></rect> <!-- Labels --> <text x="78" y="220" font-size="14">Jan</text> <text x="148" y="220" font-size="14">Feb</text> <text x="218" y="220" font-size="14">Mar</text> <text x="288" y="220" font-size="14">Apr</text> </svg>

<درست> عنصر نشان دهنده یک مقدار داده است. ارتفاع مستطیل، ارتفاع میله را کنترل می‌کند، در حالی که مقدار y محل شروع میله را کنترل می‌کند.

برای مثال:

 این نوار از x="140" و y="60" شروع می‌شود. عرض آن 40 و ارتفاع آن 140 است. <rect x="140" y="60" width="40" height="140" fill="#3498db"></rect>

از آنجا که سیستم مختصات SVG از بالا شروع می‌شود، یک میله بلندتر معمولاً به مقدار y کوچکتری نیاز دارد. به همین دلیل است که بلندترین میله در مثال از بالای ناحیه SVG شروع می‌شود.

همچنین می‌توانید با استفاده از CSS جلوه‌های شناور را اضافه کنید:

 rect { transition: opacity 0.2s ease; } rect:hover { opacity: 0.7; cursor: pointer; } این باعث می‌شود وقتی کاربر موس را روی میله‌ها می‌برد، آنها کمی محو شوند. rect { transition: opacity 0.2s ease; } rect:hover { opacity: 0.7; cursor: pointer; }

این نمودار میله‌ای SVG ساده ما در CodePen است:

یک نمودار میله‌ای ساده HTML و SVG که در CodePen ساخته شده است

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

موارد استفاده رایج برای نمودارهای SVG در برنامه‌های وب

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

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

نمودارهای SVG همچنین زمانی مفید هستند که کاربران نیاز به تعامل با بخش‌های خاصی از نمودار داشته باشند. کاربر می‌تواند ماوس را روی یک نوار نگه دارد، روی یک نقطه داده کلیک کند یا جزئیات بیشتری را از طریق یک راهنما مشاهده کند. این امر SVG را برای نمودارهایی که به چیزی بیش از یک تصویر ثابت نیاز دارند، مناسب می‌کند.

با این حال، SVG معمولاً برای مجموعه داده‌های کوچک تا متوسط ​​بهتر است. اگر یک برنامه نیاز به رندر هزاران نقطه داده یا ارائه به‌روزرسانی‌های مکرر در زمان واقعی داشته باشد، توسعه‌دهندگان ممکن است نیاز داشته باشند Canvas یا یک کتابخانه نمودارسازی بهینه‌شده از نظر عملکرد را در نظر بگیرند.

محدودیت‌های ساخت نمودارها به صورت دستی با SVG

اگرچه نمودارهای SVG قدرتمند هستند، اما ساخت دستی آنها محدودیت‌هایی دارد.

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

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

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

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

عملکرد نیز می‌تواند به یک مشکل تبدیل شود. از آنجایی که عناصر SVG بخشی از DOM هستند، نمودارهایی با هزاران عنصر ممکن است کندتر رندر و به‌روزرسانی شوند. برای مجموعه داده‌های بسیار بزرگ، سایر روش‌های رندر ممکن است مناسب‌تر باشند.

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

نمودارهای SVG در مقابل نمودارهای Canvas

SVG و Canvas هر دو برای مصورسازی داده‌های مبتنی بر وب استفاده می‌شوند، اما به روش‌های مختلفی کار می‌کنند.

SVG مبتنی بر بردار و مبتنی بر DOM است. هر عنصر بصری در نمودار SVG به عنوان یک عنصر جداگانه در صفحه وجود دارد. این امر باعث می‌شود SVG به راحتی با استفاده از CSS و JavaScript قابل بررسی، سبک‌دهی و تعامل باشد.

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

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

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

برای مقایسه عمیق‌تر، می‌توانید این راهنما را در مورد نمودارهای Canvas در مقابل SVG مطالعه کنید، که نحوه عملکرد هر دو رویکرد رندر و زمان استفاده از هر کدام را توضیح می‌دهد.

در بسیاری از برنامه‌های وب، انتخاب درست به نوع نمودار، اندازه مجموعه داده‌ها، نیازهای تعاملی و الزامات عملکرد بستگی دارد.

چه زمانی باید از یک کتابخانه نمودار به جای SVG دستی استفاده کنیم؟

نمودارهای SVG دستی برای یادگیری، نمونه‌سازی اولیه و ساخت مصورسازی‌های سفارشی کوچک مفید هستند. آن‌ها به توسعه‌دهندگان کنترل کامل می‌دهند و به توضیح نحوه‌ی رندر نمودار کمک می‌کنند.

با این حال، یک کتابخانه نمودار معمولاً انتخاب بهتری برای برنامه‌های کاربردی تولیدی است.

اگر برنامه شما به چندین نوع نمودار نیاز دارد، توسعه دستی SVG می‌تواند زمان‌بر شود. یک کتابخانه نمودارسازی، نمودارهای آماده، از جمله نمودارهای میله‌ای، خطی، دایره‌ای و منطقه‌ای، و همچنین نقشه‌های حرارتی، گیج‌ها، نقشه‌ها و موارد دیگر را ارائه می‌دهد.

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

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

برای داشبوردهای تجاری، پلتفرم‌های SaaS، ابزارهای تحلیلی و برنامه‌های گزارش‌دهی سازمانی، این می‌تواند یک مزیت بزرگ باشد.

یک نمودار سنکی ساخته شده با یک کتابخانه نمودارسازی

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

نکات پایانی

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

با استفاده از عناصر SVG مانند <svg> ، <درست> ، <خط> ، <دایره> ، متن ، و مسیر توسعه‌دهندگان می‌توانند نمودارها را مستقیماً در HTML بسازند. این امر SVG را به مهارتی مفید برای هر کسی که با مصورسازی داده‌های مبتنی بر وب کار می‌کند، تبدیل می‌کند.

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

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

بهترین رویکرد به پروژه شما بستگی دارد. اگر به یک نمودار سفارشی سبک نیاز دارید، SVG نقطه شروع بسیار خوبی است. اگر به تجسم‌های تعاملی پیشرفته برای تولید نیاز دارید، استفاده از یک کتابخانه نمودار می‌تواند در زمان صرفه‌جویی کرده و پیچیدگی را کاهش دهد. </مسیر> متن </دایره> </line> </rect> </svg> </rect> متن </rect> </svg> </مسیر> متن </دایره> </line> </rect> </svg> </svg> </مسیر> متن </دایره> </line> </rect> </svg>

تست مسدودسازی تبلیغات