یک مؤلفه نمودار OHLC برای D3

تام سیمونز

بروزرسانی 2017

از زمان نگارش این پست ، در دنیای جاوا اسکریپت و D3 تغییر کرده است. پروژه D3FC را بررسی کنید تا ببینید برخی از ایده های این پست به چه چیزی تبدیل شده است! یک نمودار با سرعت بالا نزدیک (OHLC) نوعی نمودار مالی است که برای نشان دادن حرکات قیمت و کمک به شناسایی روند یک ابزار مالی به مرور زمان استفاده می شود. برای هر واحد از زمان ، یک خط عمودی ترسیم شده است که بالاترین و کمترین قیمت را در آن زمان نشان می دهد. علائم کنه افقی در هر طرف خط ترسیم شده است - قیمت باز برای آن دوره در سمت چپ و قیمت بسته شدن در سمت راست. معمولاً یک خط OHLC به رنگ سبز رنگ خواهد بود اگر در آن روز قیمت بسته شدن از قیمت افتتاح ("روز بالا") و اگر نه ("روز پایین") به رنگ قرمز رنگ. D3 یک کتابخانه JavaScript برای تجسم داده ها در وب است. این یک کتابخانه نمودار نیست. درعوض ، این انعطاف پذیری را برای اتصال داده ها به گرافیک های وب ، با استفاده از استانداردهای وب مدرن مانند SVG ، HTML5 و CSS3 به ما می دهد. نمودارها فقط یک نوع تجسم هستند که می توانیم با آن بسازیم. این پست با D3 آشنایی دارد. در صورت نیاز به سرعت گرفتن ، آموزش های مقدماتی بسیار خوبی در ویکی D3 وجود دارد. در حالی که D3 یک مؤلفه برای ترسیم یک سری خط بر روی یک نمودار دارد (اینجا را ببینید) ، یک جزء داخلی ندارد که بتوانیم از آن استفاده کنیم تا یک سری OHLC را ارائه دهیم. در این پست ، ما یکی را می سازیم.

اجزای نمودار قابل استفاده مجدد

ما از کنوانسیون مایک بوستوک سازنده D3 برای ایجاد اجزای قابل استفاده مجدد در D3 استفاده خواهیم کرد. اساساً این بدان معنی است که مؤلفه ما با روش های تنظیم کننده تعطیل خواهد بود. این به دنبال همان الگویی است که توسط سایر مؤلفه ها و افزونه های D3 استفاده شده است ، بنابراین به ما امکان می دهد مانند هر مؤلفه دیگر D3 ، مؤلفه OHLC خود را درمان کنیم. فرض خواهیم کرد که داده های ما مجموعه ای از اشیاء است که به این شکل هستند:We’ll need to style the fill property of the rectangles to get the right colours. The sl.series.candlestick component is identical to the sl.series.ohlc component, but its create/update function calls rectangle instead of openCloseTicks . Since the components share a lot of code, we could have a function which contains the common code, takes rectangle or openCloseTicks as input, and produces the required component (we’ll leave out the details for now). We can use the same code we used to create the OHLC chart. We just have to replace sl.series.ohlc with sl.series.candlestick when creating the series. Here’s what our candlestick chart looks like:

نتیجه

ما 2 مؤلفه قابل استفاده مجدد برای نمودارهای مالی با D3 ساخته ایم. این واقعاً فقط آغاز چیزی است که ما برای یک نمودار مالی کاملاً برجسته به آن نیاز داریم. مؤلفه های بسیاری وجود دارد که ما می توانیم با استفاده از این الگوی ، از جمله مطالعات فنی ، سری مقایسه و ناوگان نمودار ، تهیه کنیم. با این حال ، با این نمونه های ساده ، ما می توانیم قدرت ویژگی های شکستن نمودار را به اجزای قابل استفاده مجدد مشاهده کنیم. همچنین این مهم است که ببینیم این نمودارها برای مجموعه داده های بزرگ چگونه عملکرد خوبی دارند. در حالت ایده آل ، ما باید بتوانیم یک نمودار OHLC را که چندین سال از قیمت ها را نشان می دهد ، یکنواخت و زوم کنیم. ما در یک پست دیگر به آن خواهیم پرداخت ، جایی که مؤلفه OHLC خود را بهبود می بخشیم تا به منظور استفاده از آن بهینه شود.