شاسی سوادیا

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

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

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

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

برای راحتی خود ، می توانید همه آنها را در Codepen پیدا کنید تا بتوانید بدون محدودیت با کد نمودار خط بازی بازی کنید.

مجموعه داده ما

دو دهه گذشته در دنیای تنیس چیزی جالب نبوده است. The Big Three - راجر فدرر ، رافائل نادال و نواک جوکوویچ - در مسابقات گرند اسلم 63 (از 78 سال گذشته) یک ترکیب شگفت آور را به دست آورده اند. اینها معتبرترین مسابقات هستند.

من تصمیم گرفتم که رقابت برجسته آنها را ترسیم کنم. بنابراین ، نمودارهای JS Line در این آموزش ، مسابقه عنوان Grand Slam Big Three را تجسم می کند. و اولین خدمت در حال آمدن است!

نحوه ساخت نمودارهای خط در 4 مرحله

به طور کلی ، کل فرآیند ایجاد هر نمودار در JavaScript به چهار مرحله تقسیم می شود و یک نمودار خط نیز از این قاعده مستثنی نیست:

1. یک صفحه HTML با یک ظرف درست کنید.
2. شامل پرونده های JavaScript.
3. داده های خود را اضافه کنید.
4. تجسم را کد کنید.

بیایید اکنون هر یک از این مراحل را طی کنیم.

1. یک صفحه HTML با یک ظرف درست کنید

برای شروع ، به مکانی نیاز دارید که بخواهید نمودار شما ظاهر شود.

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

در اینجا ممکن است چنین صفحه ای به نظر برسد:

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

2. پرونده های JavaScript را درج کنید

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

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

برای اهداف تصویرگری ، در این آموزش ، من از نمودارهای Anychart JS استفاده می کنم. این انعطاف پذیر است ، با اسناد گسترده نمودار و منابع API همراه است ، و می توانید از آن به صورت رایگان استفاده کنید (مگر اینکه چیزی برای یک تجارت بسازید.)

برای نمودار خط ، ماژول "پایه" را از CDN اضافه می کنم.(البته ، می توانید آن را بارگیری کنید ، آن را در یک پوشه در وب سایت خود قرار دهید و در آن مورد از لینک خود استفاده کنید.)

کد JavaScript برای نمودار خط بین قرار خواهد گرفتبرچسب های واقع در بخش (ممکن است در صورت تمایل آنها را در این بخش قرار دهید).

3. داده های خود را اضافه کنید

سپس داده هایی را که می خواهید در نمودار خط خود تجسم کنید اضافه کنید.

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

اگر قالب های دیگری را در مورد خاص خود ، مانند JSON ، XML ، CSV یا چیز دیگری ترجیح می دهید ، راه های کار با داده ها را بررسی کنید.

در هر آرایه ، سال اولین پارامتر (ستون شماره 0) است. سپس تعداد عناوین به دست آمده توسط سه بازیکن متعاقباً (تجمعی برای هر یک) به دست می آید.

4- تجسم را کد کنید

اکنون جلسه گرم کردن انجام شده است ، و دادگاه همه تنظیم شده است. بنابراین بیایید مسابقه را شروع کنیم و برنامه نویسی سریع JavaScript را انجام دهیم!

ابتدا ، همانطور که در شکل زیر نشان داده شده است ، Anychart. ondocumentReady را اضافه کنید:

هر چیز دیگری در داخل آن عملکرد قرار می گیرد.

بنابراین ، دوم ، داده ها (از مرحله قبلی) را درج کنید.

سوم ، یک مجموعه داده ایجاد کنید و آن را برای هر سری (یکی برای هر بازیکن) نقشه برداری کنید:

چهارم ، یک نمونه نمودار خط و سه سری با داده های نقشه برداری ایجاد کنید:

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

در آخر ، شناسه Element Container را مرجع کنید و نمودار خط حاصل را ترسیم کنید:

خودشه! یک نمودار خط کاملاً کاربردی ساخته شده با JS آماده است. احساس پیروزی مستقیم می کند ، اینطور نیست؟

نمودار خط که مسابقه Big 3't Title را نشان می دهد - با Anychart ایجاد شده است

این نسخه اصلی نمودار خط را با کد HTML/CSS/JS کامل در Codepen بررسی کنید. در مورد ، کد نیز در اینجا آمده است:

چگونه نمودارهای خط خود را سفارشی کنیم

نمودار خط اصلی که با دنبال کردن چهار مرحله بالا در حال حاضر ایجاد کردیم خوب به نظر می رسد. اما اگر می خواهید آن را سفارشی کنید چه می کنید؟

بگذارید به شما نشان دهم که چگونه می توانید با همان روش سریع و آسان تغییراتی ایجاد کنید.

1. محورها را نام ببرید

همیشه ایده خوبی است که توضیح دهید که هر محور نمودار خط چه چیزی را نشان می دهد ، حتی اگر کاملاً واضح به نظر برسد. برای افزودن عناوین به هر دو محور x و y ، از موارد زیر استفاده کنید:

2. نشانگرها را سفارشی کنید

به طور پیش فرض، هنگامی که نشانگر ماوس را روی نمودار حرکت می دهید، نشانگرها در هر سری خط ظاهر می شوند و شکل آنها متفاوت است. چرا به نشانگرها شکل یکسانی نمی دهید؟بعلاوه، کوچکتر کردن آنها عالی خواهد بود.

ببینید چگونه می توانید ظاهر نشانگرهای سری خط را سفارشی کنید:

3. crosshairs را فعال کنید

خطوط متقاطع یک جفت خط عمود بر روی نشانگر ماوس هستند تا به شما در درک بهتر مقادیر X و Y در هر نقطه ای که در حال حاضر شناور شده است کمک کند.

در این مورد، برای برجسته کردن سال، فقط یک خط عمودی به دست می آید. در اینجا نحوه انجام آن آمده است:

4. موقعیت راهنمای ابزار را تغییر دهید

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

برای دستیابی به چنین رفتاری، فقط حالت موقعیت راهنمای ابزار نمودار خطی را به عنوان "نقطه" تعریف کنید و سایر تنظیمات موقعیت را به دلخواه خود تنظیم کنید. مثلا:

بررسی کنید که نمودار خطی جاوا اسکریپت پس از این همه سفارشی سازی اکنون چگونه به نظر می رسد.(آن را به صورت زنده با کد کامل در CodePen مشاهده کنید.)

5. رنگ ها را تغییر دهید

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

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

6. عنوان و متن افسانه را بهبود بخشید

آخرین تغییراتی که می خواهم در این آموزش نشان دهم - و کامل کردن نمودار خط تعاملی - سفارشی سازی عنوان و افسانه است.

می توانید یک زیرنویس اضافه کنید تا زمینه بیشتری را فراهم کنید، و می توانید با چند ترفند سریع با کمک HTML استایل متن را جذاب تر کنید:

برای افسانه نمودار، تغییر اندازه فونت و بالشتک آسان است:

ببین چی داریم!(این نمودار خطی JS را در CodePen بررسی کنید.)

نحوه ایجاد نمودار خطی مرحله ای

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

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

فقط تابع line() را به stepLine() تغییر دهید تا نمودار خطی شما به نمودار خط پله ای شما تبدیل شود:

از نمودار خط پله ای با قدرت JavaScript Elegant لذت ببرید و در مسابقه عنوان Grand Slam Title بین The Big Three در تنیس تجسم کنید.(احساس راحتی کنید که با کد منبع کامل آن در Codepen بازی کنید و به بازی خود ادامه دهید.)

و در اینجا کد کامل وجود دارد:

نتیجه

همانطور که در این آموزش مشاهده می کنید ، ایجاد نمودارهای خط تعاملی (و خط پله) با JavaScript می تواند بسیار ساده باشد. اگر سوالی یا پیشنهادی دارید به من اطلاع دهید.

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

بیایید از این الهام استفاده کنیم تا با ساختن نمودارها و نمودارهای حتی بیشتر (و همه جذاب تر) در زمینه توسعه تجسم داده ها پیش برویم!< SPAN> از نمودار خط پله ای با قدرت جاوا اسکریپت لذت ببرید و تجسم مسابقه عنوان Grand Slam بین The Big Three در تنیس را تجربه کنید.(احساس راحتی کنید که با کد منبع کامل آن در Codepen بازی کنید و به بازی خود ادامه دهید.)