آموزش رسم نمودار خطی با JS + سورس کد
سلام
با کمک کتابخانه Chart JS در جاوا اسکریپت به راحتی میتوانید انواع نمودار خطی را رسم کنید، کار با این کتابخانه بسیار ساده است در ادامه همراه بپرسم باشید تا کار با این کتابخانه را یاد بگیریم.
مثال ساده با Chart JS
کتابخانه Chart JS به ۳ مورد نیاز دارد که باید به HTML صفحه وب اضافه شود تا نمودار ارائه شود.
- فایل کتابخانه Chart JS را به صفحه HTML مورد نظر اضافه کنید.
- یک عنصر بوم HTML ایجاد کنید تا نمودار خطی را ارائه کنید.
- تابع کتابخانه Chart JS را با داده ها و سایر گزینه های مورد نیاز شروع کنید.
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ |
<canvas id="line-chart"></canvas> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.0.1/dist/chart.umd.min.js"></script> <script> new Chart(document.getElementById("line-chart"), { type : 'line', data : { labels : [ ۱۵۰۰, ۱۶۰۰, ۱۷۰۰, ۱۷۵۰, ۱۸۰۰, ۱۸۵۰, ۱۹۰۰, ۱۹۵۰, ۱۹۹۹, ۲۰۵۰ ], datasets : [ { data : [ ۱۸۶, ۲۰۵, ۱۳۲۱, ۱۵۱۶, ۲۱۰۷, ۲۱۹۱, ۳۱۳۳, ۳۲۲۱, ۴۷۸۳, ۵۴۷۸ ], label : "America", borderColor : "#۳cba9f", fill : false }] }, options : { title : { display : true, text : 'Chart JS Line Chart Example' } } }); </script> |
اسکریپت بالا به عنصر canvas هدف در شروع کلاس کتابخانه اشاره دارد.
خوانش نمودارها را با ویژگیهای داده مشخص میکند. علاوه بر این، برچسب خط و رنگ حاشیه را نیز مشخص می کند. این مثال سریع نمودار خطی زیر را به مرورگر خروجی میدهد.
نمونه کد بالا:
نمودار خطی بهترین راه برای نمایش تجزیه و تحلیل به شکل یک نمودار خطی جذاب است. همچنین به مقایسه یک یا چند خط تحلیلی کمک می کند.
نمونه های بیشتری از نمودارهای خطی با استفاده از Chart JS
Chart JS از ایجاد انواع نمودارهای خطی برای رسم دیدگاه های مختلف نقاط داده پشتیبانی می کند.sd
- از ترسیم چندین خط از نقاط داده در نمودار خطی که مقایسه داده ها را نشان می دهد، پشتیبانی می کند.
- از ایجاد نمودار خطی خطی با استفاده از فرمول هایی با مختصات x و y پشتیبانی می کند.
در بخش های زیر نمونه هایی از ایجاد نوع نمودارهای خطی زیر را با استفاده از کتابخانه Chart JS مشاهده خواهیم کرد.
- چندین خط در نمودار خطی
- خطوط شبکه – نمودار خطی
نمودار JS چند خط مثال
یک نمودار Chart JS با دو نمودار خطی را خروجی می دهد. اسکریپت آرایه مجموعه داده را برای دو خط تنظیم می کند تا در نمودار نمایش داده شوند.
مجموعه داده جدا از نقاط داده نمودار خطی، با ویژگی های نمایش زیر پیکربندی می شود.
- label: برای نشان دادن با یک نکته ابزار در نشان دادن ماوس روی نقطه داده.
- borderColor: رنگ حاشیه خط.
- fill: برای فعال یا غیرفعال کردن هایلایت کردن ناحیه نمودار.
در این نمودار چند خطی، ویژگی fill روی نادرست تنظیم میشود، زیرا دو ناحیه نمودار روی هم همپوشانی دارند.
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ |
<canvas id="line-chart"></canvas> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.0.1/dist/chart.umd.min.js"></script> <script> new Chart(document.getElementById("line-chart"), { type : 'line', data : { labels : [ ۱۵۰۰, ۱۶۰۰, ۱۷۰۰, ۱۷۵۰, ۱۸۰۰, ۱۸۵۰, ۱۹۰۰, ۱۹۵۰, ۱۹۹۹, ۲۰۵۰ ], datasets : [ { data : [ ۱۸۶, ۲۰۵, ۱۳۲۱, ۱۵۱۶, ۲۱۰۷, ۲۱۹۱, ۳۱۳۳, ۳۲۲۱, ۴۷۸۳, ۵۴۷۸ ], label : "America", borderColor : "#۳cba9f", fill : false }] }, options : { title : { display : true, text : 'Chart JS Line Chart Example' } } }); </script> |
نمودار JS Gridlines – نمودار خطی مثال
این اسکریپت JS همان تنظیمات را مانند مثال نمودار چند خطی بالا پیکربندی می کند. علاوه بر این، ویژگی های مقیاس نمودار JS را برای ترسیم شبکه در محور x و y پیکربندی می کند.
برای نشان دادن شبکه در هر دو محور از ویژگی های نمایش زیر استفاده می شود.
- display: یک مقدار بولی برای فعال یا غیرفعال کردن نمایش گرید روی نمودار.
- color: مرز خط مشبک رنگ.
- lineWidth: اندازه ضربه خط شبکه.
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ ۳۸ ۳۹ ۴۰ ۴۱ ۴۲ ۴۳ ۴۴ ۴۵ ۴۶ ۴۷ ۴۸ ۴۹ ۵۰ ۵۱ ۵۲ ۵۳ ۵۴ ۵۵ ۵۶ ۵۷ ۵۸ ۵۹ ۶۰ ۶۱ ۶۲ ۶۳ ۶۴ ۶۵ ۶۶ |
<!DOCTYPE html> <html> <head> <title>Chart JS Gridlines - Line Chart Example</title> <link rel='stylesheet' href='style.css' type='text/css' /> </head> <body> <div class="phppot-container"> <h1>Chart JS Gridlines - Line Chart Example</h1> <div> <canvas id="line-chart"></canvas> </div> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.0.1/dist/chart.umd.min.js"></script> <script> new Chart( document.getElementById("line-chart"), { type : 'line', data : { labels : [ ۱۵۰۰, ۱۶۰۰, ۱۷۰۰, ۱۷۵۰, ۱۸۰۰, ۱۸۵۰, ۱۹۰۰, ۱۹۵۰, ۱۹۹۹, ۲۰۵۰ ], datasets : [ { data : [ ۱۸۶, ۲۰۵, ۱۳۲۱, ۱۵۱۶, ۲۱۰۷, ۲۱۹۱, ۳۱۳۳, ۳۲۲۱, ۴۷۸۳, ۵۴۷۸ ], label : "America", borderColor : "#۳cba9f", fill : false }, { data : [ ۱۲۸۲, ۱۳۵۰, ۲۴۱۱, ۲۵۰۲, ۲۶۳۵, ۲۸۰۹, ۳۹۴۷, ۴۴۰۲, ۳۷۰۰, ۵۲۶۷ ], label : "Europe", borderColor : "#e43202", fill : false } ] }, options : { title : { display : true, text : 'Chart JS Gridlines - Line Chart Example' }, scales : { x : { grid : { display : true, color: "#۰۰۴۶ff", lineWidth: ۲ } }, y : { grid : { display : true, color: "#۰۰۴۶ff" } } } } }); </script> </body> </html> |
جزئیات بیشتر در مورد اصول اولیه کتابخانه نمودار JS
دانستن بیشتر در مورد این کتابخانه بسیار خوب JS برای استفاده مطمئن از این نمودار در تولید مفید خواهد بود.
بدون تعیین گزینه های مجموعه داده یا ویژگی های نمایش، گزینه های پیش فرض اعمال خواهند شد. لیست زیر سطح گزینه های Chart.js را نشان می دهد که در مورد زمینه حل می شوند.
مجموعه داده ها و ویژگی های عنصر با توجه به داده ها و گزینه ها
- data.datasets[index] – گزینههایی فقط برای این مجموعه دادهها.
- options.datasets.line – گزینههایی برای تمام مجموعههای داده خط.
- options.elements.line – گزینه هایی برای تمام عناصر خط.
- options.elements.point – گزینه هایی برای همه عناصر نقطه.
- options – گزینههایی برای کل نمودار.
نمایش ویژگی ها
- رنگ پس زمینه
- رنگ لبه
- عرض مرز
- پر کردن
- hoverBorderColor
- برچسب
- pointStyle
- xAxisID
گزینه های سفارشی
Chart JS یک callback سفارشی را می پذیرد تا در رندر هر نقطه داده فراخوانی شود.
تابع callback مرجع زمینه را می پذیرد تا دامنه UI را بدست آورد. سلسله مراتب بافت در نمودار زیر نشان داده شده است.
گزینه های قابل نمایه سازی
گزینههای قابل نمایهسازی برای تعریف ویژگیهای آیتم داده chart.js در یک شاخص خاص استفاده میشوند.
دارای یک آرایه نگاشت برای پیوند یک ویژگی در یک شاخص خاص به نقطه داده نمودار در همان شاخص.
اگر طول آرایه ویژگی گزینه های آرایه کمتر از آرایه داده باشد، این ویژگی به صورت حلقه ای باز می شود.
کد زیر شامل گزینه های تنظیم رنگ نقطه نمودار خط است. فقط سه نقطه BackgroundColor در آرایه دارد. به آرایه داده ۱۰ عنصری حلقه می شود.
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ |
datasets : [{ data : [ ۱۸۶, ۲۰۵, ۱۳۲۱, ۱۵۱۶, ۲۱۰۷, ۲۱۹۱, ۳۱۳۳, ۳۲۲۱, ۴۷۸۳, ۵۴۷۸ ], label : "America", borderColor : "#۳cba9f", pointBackgroundColor: [ '#۳۵۴abb', '#bb3c43' ], pointBorderColor: [ '#۳۵۴abb', '#bb3c43' ], fill: false, borderWidth: ۱۲ }] |
انواع نمودارهای دیگر که توسط کتابخانه Chart.js پشتیبانی می شوند
کتابخانه Chart JS همچنین از ایجاد انواع دیگر نمودارهای فهرست شده در زیر پشتیبانی می کند. اجازه دهید نمونه ای از ایجاد چند نمودار زیر را در آینده ببینیم.
- Area chart
- Bar chart
- Bubble chart
- Doughnut chart
- Line chart
- Mixed chart
- Polar Area chart
- Radar chart
- Scatter chart
این بود توضیحات کامل نمودار Chart Js که در ادامه سورس کد را میتوانید رایگان دریافت کنید.
موفق باشید.
ارسال نظر
شما باید وارد شوید یا عضو شوید تا بتوانید نظر ارسال کنید