نمودار شمعدانی تعاملی با استفاده از یک عنصر بوم HTML و جاوا اسکریپت وانیلی

با برخی از سوابق قیمت اخیر بیت کوین و سایر ارزهای رمزپایه و همچنین فشارهای کوتاه GameStop و AMC Reddit ، نمودارهای قیمت در تمام اخبار بوده است. به خصوص وقتی به داده های بازار زنده نگاه می کنید ، یک روش مشترک برای نمایش اطلاعات ، نمودارهای شمعدانی است.

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

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

نمودارهای شمعدانی چیست؟

من فرض می کنم ، بیشتر شما می دانید که نمودارهای شمعدانی چیست و چگونه آنها را بخوانید ، اما در اینجا یک مرور سریع به هر حال وجود دارد: یک شمع خلاصه آنچه را که برای یک سهام/cryptocurrency در یک بازه زمانی ثابت مانند 1 روز ، 1 ساعت یا 5 اتفاق افتاده است ، خلاصه می کنددقایق.

بدنه اصلی شمع ، قیمت افتتاح و بسته شدن را نشان می دهد (قیمت در ابتدای بازه زمانی و قیمت در پایان). اگر قیمت بسته شدن بالاتر از قیمت باز باشد ، یعنی قیمت افزایش یافته است ، اگر قیمت کاهش یابد ، شمع سبز خواهد بود ، شمع قرمز خواهد بود.

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

پیاده سازی

من به جای استفاده از یک راه حل شخص ثالث برای ترسیم نمودارهای شمعدانی (به عنوان مثال ، نمودارهای Google می توانند Candlestick Chars را ترسیم کنند) ، تصمیم گرفتم راه حل خودم را از ابتدا پیاده سازی کنم. در حالی که اجرای سفارشی ویژگی های کمتری نسبت به یک کتابخانه بزرگ خواهد داشت ، از افزودن وابستگی دیگر به یک پروژه جلوگیری می کند. همچنین ، می توانید راه حل خود را تا حد بیشتری سفارشی کنید تا آن را برای پروژه های خود مناسب کنید.

بهترین گزینه برای عناصر وب سایت تعاملی بوم است. شما به راحتی می توانید شکل ها و متن های ساده 2D را ترسیم کنید ، و این تنها چیزی است که ما به نمودارهای شمعدانی نیاز داریم.

بخش دشوار در ایجاد نمودارها تبدیل مختصات است. ما باید از یک زمان و ارزش قیمت به مختصات X و Y برویم و برعکس. برای تبدیل یک ارزش قیمت به مختصات Y خود ، ما باید کمترین قیمت جهانی را کم کنیم ، سپس با ارتفاع بوم تقسیم شده بر محدوده قیمت جهانی ، مقیاس می کنیم و در نهایت ارزش را معکوس می کنیم زیرا نمودار شمعدان ما دارای محور y است که می روددر حالی که مختصات Y یک بوم پایین می رود. معادله کامل همچنین شامل حاشیه هایی در لبه ها است و به نظر می رسد: این را برگردانید. بشرتبدیل مقادیر دیگر بسیار مشابه به نظر می رسد ، کد کامل زیر را مشاهده کنید.

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

استفاده

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

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

یک نمونه استفاده از کلاس نمودار شمعدان من ، داده ها از API Binance ، کد کامل در زیر آمده است.

یکی از ویژگی هایی که من هنوز آزمایش نکرده ام ، استفاده از کلاس Candlestick Chart برای داده های بازار زنده است. Binance یک API WebSocket را برای دریافت به روزرسانی های Live Candlestick ارائه می دهد و من می خواهم در آینده تیکت قیمت بیت کوین خود را با آن بسازم. با کمی منطق اضافی برای رسیدگی به به روزرسانی های زنده ، کلاس Candlestick Chart برای این کار مفید خواهد بود.

ایجاد نمودارهای شمعدانی در JavaScript آسان و راحت است و بوم های HTML یک راه حل عالی برای عناصر کوچک و تعاملی در یک وب سایت است.

من عاشق انواع داده ها ، نمودارها و نمودارها هستم ، بنابراین داشتن راه حل نمودار شمعدان خودم برای پروژه های آینده مفید خواهد بود.

منابع

• کلاس کامل شمعدانی
• Canvas API
• API Binance

آیا از این قبیل لذت می برید؟دسترسی نامحدودی به همه داستان ها داشته باشید و با پیوستن به Medium از من و سایر نویسندگان پشتیبانی کنید. اگر از طریق این لینک ثبت نام کنید ، بخشی از هزینه عضویت شما به من می رود.