در مورد React ، نمودارهای تعاملی و کار با API در این آموزش بیاموزید

مقدمه

به داستان پشتی اهمیتی نمی دهید؟در اینجا یک نسخه ی نمایشی زنده از نمودار قیمت بیت کوین است که من از آن عبور خواهم کرد (توجه داشته باشید: هنوز هم دوستانه موبایل نیست-استقبال از روابط عمومی). مخزن GitHub با تمام کد در پایین مقاله مرتبط است.

هفته گذشته من یک آموزش در مورد تجسم داده های ساده با React JS منتشر کردم. این آموزش شما را از طریق ساختن یک نمودار خط ساده طی کرد:

بله ، خوب ، خسته کننده استاما نکته این آموزش این نبود که چیزی را بسازد ، بلکه یادگیری اصول SVG در React بود.

در این نظرات ، کریس مورف پرسید که چگونه می توان منطقه ای را به نمودار اضافه کرد و نمودارهای موجود در Coinbase را به عنوان نمونه به من نشان داد. در اینجا این نمودارها به نظر می رسد:

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

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

این چیزی است که من ساختم ، و آنچه را که در این مقاله به شما پیاده روی خواهم کرد:

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

توجه داشته باشید جانبی: اگر آموزش هایی مانند این مورد علاقه شما هستند و می خواهید یاد بگیرید که چگونه با React چیزهای جالب بیشتری بسازید ، 3 دوره بهترین React JS را بررسی کنید.

ساختار پروژه

در اینجا ساختار پروژه من به نظر می رسد. چهار مؤلفه React وجود دارد.

• App. JS - مؤلفه والدین.
• infobox. js - قیمت های بیت کوین در زمان واقعی ما را تغییر می دهد و از ماه گذشته تغییر می کند.
• Tooltip. js - نوک ابزار را نشان می دهد که تاریخ و قیمت مکان شناور را نشان می دهد
• linechart. js - نمودار خط واقعی را نشان می دهد. یک عنصر SVG را برمی گرداند.

API

برای این پروژه ، بهترین API که می توانم پیدا کنم API Coindesk است. اگر API بیت کوین بهتری دارید ، لطفاً در من صدای جیر جیر کنید و به من اطلاع دهید!

Coindesk API داده های قیمت بیت کوین در زمان واقعی و تاریخی را ارائه می دهد. برای این پروژه ، قیمت بیت کوین زمان واقعی را در گوشه بالا سمت چپ (infobox. js) نمایش می دهم. هر 90 ثانیه به روز می شود.

قیمت تاریخی همان چیزی است که من برای تهیه داده های نمودار استفاده می کنم. نقطه پایانی داده های تاریخی: https://api. coindesk. com/v1/bpi/historical/close. json

API شیئی را که به نظر می رسد برمی گرداند:

"BPI":"2017-06-24":2619. 1188 ،"2017-06-25":2594. 4538 ،"2017-06-26":2485. 3588 ،"2017-06-27":2593. 17 ،"2017-06 28":2584. 5638 ،// .  >> 

هنگامی که داده ها را برگردانم ، از طریق آن حلقه می کنم و آن را در مجموعه ای از اشیاء قالب بندی می کنم:

برای (اجازه دهید تاریخ در bitcoindata. bpi) sorteddata. push (d: moment (date) . format ('mmm dd') ،پ: Bitcoindata. bpi [تاریخ] . Tolocalestring () ،X: شمارش ،Y: Bitcoindata. bpi [تاریخ]>);>

• د: تاریخ فرمت شده (سابق: 31 ژوئیه)
• پ: رشته ارزی فرمت شده (مثال: 2000. 46 دلار)
• X: Count (عددی ، شروع با 0)
• Y: قیمت بدون شکل (2000. 46738 - برای نمودار استفاده می شود)

سپس داده ها به یک مؤلفه کودک ارسال می شود که نمودار را می سازد. در اینجا یک نمای کلی بالاتری از جریان داده ها آورده شده است.

جریان داده های اساسی

جریان داده های پروژه کاملاً مستقیم به جلو است:

1. App. JS داده های تاریخی را از API Coindesk بدست می آورد و آن را به مجموعه ای از اشیاء می رساند.
2. داده ها به مؤلفه linechart. js منتقل می شوند که نمودار را بر اساس داده های ارائه شده از App. js ارائه می دهد.
3. هنگامی که مؤلفه SVG که در linechart. js ارائه شده است ، 3 مورد اتفاق می افتد: linechart. js یک خط عمودی را روی مختصات مکان نما ترسیم می کند. نزدیکترین نقطه داده به مکان نما را تعیین می کند و دایره ای را برای برجسته کردن آن نقطه داده ترسیم می کند. سرانجام ، داده ها به App. js منتقل می شوند که محل شناور و نزدیکترین نقطه را نشان می دهد.
4. App. JS داده ها را به Tooltip. js ارسال می کند تا نوک ابزار بتواند در مکان صحیح و با داده های صحیح ارائه شود.
5. infobox. js به طور مستقل از سایر مؤلفه ها اجرا می شود و داده های زمان واقعی را از API Coindesk هر 90 ثانیه دریافت می کند. داده ها فرمت شده و سپس به کاربر نمایش داده می شوند.

شکستن نمودار

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

این. makeaxis ()محور نمودار را ایجاد می کنداین. makePath ()خط نمودار را ایجاد می کنداین.makearea ()منطقه نمودار سایه دار (زیر خط)این. makelabels ()برچسب های نمودار را ایجاد می کنداین.GetCoords (E)هنگامی که Hovered مختصات شناور می شوداین.FreeLine ()هنگام شناور خط عمودی ایجاد می کنداین.makeactivepoint ()وقتی Hovered نزدیکترین نقطه را پیدا می کنداین.stophover ()خط و نقطه را هنگام متوقف کردن شناور پاک می کند

بیایید به یک مثال نگاه کنیم. اگر همه چیز را حذف کنیم و فقط MakePath را اجرا کنیم () ما فقط با یک خط SVG در امتداد نقاط داده خود باقی مانده ایم. در اینجا به نظر می رسد:

به همین ترتیب ، ما می توانیم همه چیز را به جز Makearea () و makeaxis () حذف کنیم. این دو خط محور ما و شکل سایه دار را به خود جلب می کند. نتیجه اینجاست:

تا زمانی که ما شروع به اضافه کردن چندین شکل و خط با هم نمی کنیم ، نمودار ما جالب به نظر می رسد. از تأثیرات شناور ، نمودار ما با makeaxis () ، makepath () ، makelabels () و makearea ():

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

1. محل نمودار SVG در صفحه
2. محل موش

در اینجا این کد به نظر می رسد:

در همین حال ، من می توانم به سادگی از مختصات موجود در نمودار خود حلقه کنم تا مشخص کنم کدام یک از مقدار X نزدیک به موش است:

let = this. props ؛اجازه دهید نقطه نزدیک =<>; برای (اجازه دهید i = 0 ، c = svgwidth ؛ iCLOSTPOINT = svgdata [i] ؛> >

توجه: همانطور که Francesco Zuppichini در نظرات اشاره کرد ، یک جستجوی باینری می تواند یک راه حل بهتر از دور زدن آرایه باشد

پس از پیدا کردن نزدیکترین مقدار X ، ما یک دایره SVG را در آن نقطه ترسیم می کنیم:

MakeActivePoint () const = this. props ؛برگشت (classname = 'linechart_point'style=> r= cx =cy =/> );>

نتیجه این است:

نکته ابزار

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

1. محل فعلی ماوس
2. نزدیکترین نقطه داده

هر دوی این اطلاعات از linechart. js دریافت می شوند. Tooltip. js سپس به سادگی یک عنصر متمرکز بر بالای موش را برمی گرداند. با داده های فرمت شده از نزدیکترین نقطه داده.

اجازه دهید<>; اجازه دهید عرض = 100 ؛PlaceMetionStyles. Width = عرض + 'px' ؛PlaclementStyles. left = hoverloc + svglocation. left - (عرض/2) ؛برگشت (>   ). 

کد کجاست؟

خوشحالم که پرسیدیدتمام کد این پروژه منبع باز و در repo github من موجود است. نسخه ی نمایشی زنده ، یک بار دیگر ، اینجا است.

اگر عناصر SVG این پروژه به شما علاقه مند باشد ، من در مقاله قبلی خود به جزئیات بیشتری در مورد نمودار می پردازم: تجسم داده ساده با React JS. اگر واقعاً می خواهید به React شیرجه بزنید و یاد بگیرید که چگونه چیزهای جالب را بسازید ، 3 دوره برتر React JS من را بررسی کنید.

اگر این پست مفید بود ، لطفاً چند بار روی Clap - Button زیر کلیک کنید تا پشتیبانی خود را نشان دهید!⬇⬇

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