عضویت در سایت

ورود

فراموشی رمز عبور

رمز عبور خود را فراموش کرده اید؟ ایمیل خود را وارد کنید

ورود

عضویت در سایت

رایگان ثبت نام کنید و سوالات خود را بپرسید، همچنین میتوانید در پاسخگویی به سوالات دیگر کاربران نیز سهیم باشید، هر مشکلی در ثبت نام یا ورود داشتید با ایمیل beporsam@gmail.com در ارتباط باشید

در بین 1170 آموزش و 2021 پرسش به دنبال چه هستید؟

ویندوز
نصب آنلاین ویندوز

ویندوز 7,8,10,11
مشاوره
مشاوره خرید لپ تاپ و کامپیوتر

مشاوره حرفه ای دریافت کن
بلاگ
مقالات آموزشی

1k+
پشتیبانی آنلاین

سخت افزار/نرم افزار

آموزش رسم نمودار خطی با JS + سورس کد

سلام

با کمک کتابخانه Chart JS در جاوا اسکریپت به راحتی میتوانید انواع نمودار خطی را رسم کنید، کار با این کتابخانه بسیار ساده است در ادامه همراه بپرسم باشید تا کار با این کتابخانه را یاد بگیریم.

مثال ساده با Chart JS

کتابخانه Chart JS به ۳ مورد نیاز دارد که باید به HTML صفحه وب اضافه شود تا نمودار ارائه شود.

  • فایل کتابخانه Chart JS را به صفحه HTML مورد نظر اضافه کنید.
  • یک عنصر بوم HTML ایجاد کنید تا نمودار خطی را ارائه کنید.
  • تابع کتابخانه Chart JS را با داده ها و سایر گزینه های مورد نیاز شروع کنید.

اسکریپت بالا به عنصر canvas هدف در شروع کلاس کتابخانه اشاره دارد.

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

نمونه کد بالا:

نمودار Chart JS

نمودار Chart JS

نمودار خطی بهترین راه برای نمایش تجزیه و تحلیل به شکل یک نمودار خطی جذاب است. همچنین به مقایسه یک یا چند خط تحلیلی کمک می کند.

نمونه های بیشتری از نمودارهای خطی با استفاده از Chart JS

Chart JS از ایجاد انواع نمودارهای خطی برای رسم دیدگاه های مختلف نقاط داده پشتیبانی می کند.sd

  • از ترسیم چندین خط از نقاط داده در نمودار خطی که مقایسه داده ها را نشان می دهد، پشتیبانی می کند.
  • از ایجاد نمودار خطی خطی با استفاده از فرمول هایی با مختصات x و y پشتیبانی می کند.
مطلب پیشنهادی:  آموزش ویرایش اکسل - قسمت اول(درج داده)

در بخش های زیر نمونه هایی از ایجاد نوع نمودارهای خطی زیر را با استفاده از کتابخانه Chart JS مشاهده خواهیم کرد.

  • چندین خط در نمودار خطی
  • خطوط شبکه – نمودار خطی

نمودار JS چند خط مثال

یک نمودار Chart JS با دو نمودار خطی را خروجی می دهد. اسکریپت آرایه مجموعه داده را برای دو خط تنظیم می کند تا در نمودار نمایش داده شوند.

مجموعه داده جدا از نقاط داده نمودار خطی، با ویژگی های نمایش زیر پیکربندی می شود.

  • label: برای نشان دادن با یک نکته ابزار در نشان دادن ماوس روی نقطه داده.
  • borderColor: رنگ حاشیه خط.
  • fill: برای فعال یا غیرفعال کردن هایلایت کردن ناحیه نمودار.

در این نمودار چند خطی، ویژگی fill روی نادرست تنظیم می‌شود، زیرا دو ناحیه نمودار روی هم همپوشانی دارند.

نمودار چند خطی JS

نمودار چند خطی JS

نمودار JS Gridlines – نمودار خطی مثال

این اسکریپت JS همان تنظیمات را مانند مثال نمودار چند خطی بالا پیکربندی می کند. علاوه بر این، ویژگی های مقیاس نمودار JS را برای ترسیم شبکه در محور x و y پیکربندی می کند.

برای نشان دادن شبکه در هر دو محور از ویژگی های نمایش زیر استفاده می شود.

  • display: یک مقدار بولی برای فعال یا غیرفعال کردن نمایش گرید روی نمودار.
  • color: مرز خط مشبک رنگ.
  • lineWidth: اندازه ضربه خط شبکه.
مطلب پیشنهادی:  آموزش پایه اندروید استودیو – قسمت دوم(اجزای برنامه)

مطلب پیشنهادی:  آموزش Css - قسمت دهم(Box Model)

نمودار چند خطی JS

نمودار چند خطی JS

جزئیات بیشتر در مورد اصول اولیه کتابخانه نمودار 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 در آرایه دارد. به آرایه داده ۱۰ عنصری حلقه می شود.

گزینه های قابل نمایه سازی

گزینه های قابل نمایه سازی

انواع نمودارهای دیگر که توسط کتابخانه Chart.js پشتیبانی می شوند

کتابخانه Chart JS همچنین از ایجاد انواع دیگر نمودارهای فهرست شده در زیر پشتیبانی می کند. اجازه دهید نمونه ای از ایجاد چند نمودار زیر را در آینده ببینیم.

  1. Area chart
  2. Bar chart
  3. Bubble chart
  4. Doughnut chart
  5. Line chart
  6. Mixed chart
  7. Polar Area chart
  8. Radar chart
  9. Scatter chart

این بود توضیحات کامل نمودار Chart Js که در ادامه سورس کد را میتوانید رایگان دریافت کنید.

موفق باشید.


دانلود: سورس نمودار JS


پيش نمايش: کليک کنيد


حجم: 4 کیلوبایت


رمز فايل فشرده: www.beporsam.ir



اگر در رابطه با مطلب بالا سوالي يا مشکلي داريد ميتوانيد سوال خود را در سايت بپرسيد، کاربران سايت پاسخگوي سوالات شما خواهند بود.


عضويت در سايت


پرسيدن سوال


درباره احمد آخوندیمدیر سایت

همیشه در تلاش برای یادگیری :) ارتباط با من: 09159352892

دنبال کردن

ارسال نظر

رفتن به بالا

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

اولین وب سایت آموزشی و پرسش و پاسخ در ایران

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