نمودار
نمودار میله‌ای عمودی

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

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="w-auto h-[400px]"HTMLCloseTag
    HTMLOpenTagcanvas
    class="chart vertical-bar-chart vertical-bar-chart"
HTMLCloseTagHTMLOpenTag/canvasHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
            
        

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

نمودار میله‌ای افقی

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

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="w-auto h-[400px]"HTMLCloseTag
    HTMLOpenTagcanvas
    class="chart horizontal-bar-chart horizontal-bar-chart"
HTMLCloseTagHTMLOpenTag/canvasHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
            
        

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

نمودار دونات

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

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="w-auto h-[400px]"HTMLCloseTag
    HTMLOpenTagcanvas
    class="chart donut-chart donut-chart"
HTMLCloseTagHTMLOpenTag/canvasHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
            
        

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

نمودار میله‌ای توده‌ای

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

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="w-auto h-[400px]"HTMLCloseTag
    HTMLOpenTagcanvas
    class="chart stacked-bar-chart stacked-bar-chart"
HTMLCloseTagHTMLOpenTag/canvasHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
            
        

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

نمودار خطی

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

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="w-auto h-[400px]"HTMLCloseTag
    HTMLOpenTagcanvas
    class="chart line-chart line-chart"
HTMLCloseTagHTMLOpenTag/canvasHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
            
        

برای تطابق با داده‌ها و نیازهای طراحی خاص خود می‌توانید به طور موثر نمودارهای خطی را به برنامه وب خود برای تصویرسازی داده‌ها گنجانید. با رعایت نیازهای طراحی، می‌توانید به طور موثر نمودارهای خطی را به برنامه وب خود برای تصویرسازی داده گنجانید.

نمودار دایره‌ای

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

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="w-auto h-[400px]"HTMLCloseTag
    HTMLOpenTagcanvas
    class="chart pie-chart pie-chart"
HTMLCloseTagHTMLOpenTag/canvasHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
            
        

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

رابط اجزاء

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

در زیر لیستی از ویژگی‌هایی که می‌توان به اجزاء منتقل کرد، آمده است:

نمودار
پراپ (Prop) نوع (Type) شرح
`type` `string` نوع نمودار (مانند "line"، "bar"، "pie"). پیش‌فرض به "line".
`data` `ChartConfiguration['data']` پیکربندی داده‌ها برای نمودار.
`options` `ChartConfiguration['options']` پیکربندی گزینه‌ها برای نمودار.
`width` `number`, `auto` عرض کانوس نمودار به پیکسل یا "auto" برای استفاده از عرض مخزن والد. پیش‌فرض به "auto".
`height` `number`, `auto` ارتفاع کانوس نمودار به پیکسل یا "auto" برای استفاده از ارتفاع مخزن والد. پیش‌فرض به "auto".
`getRef` `(el: ChartElement | null) => void` یک تابع که یک مرجع به نمودار عنصر کانوس.