یک جزء نمودار OHLC برای D3

تام سیمونز

به روز رسانی 2017

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

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

ما از کنوانسیون مایک بوستوک خالق D3 برای ایجاد اجزای قابل استفاده مجدد در D3 استفاده خواهیم کرد. اساساً این بدان معنی است که مؤلفه ما با روش های گیرنده-ستر بسته خواهد شد. این از همان الگوی استفاده شده توسط سایر مؤلفه ها و پلاگین های D3 پیروی می کند، بنابراین به ما این امکان را می دهد که با مؤلفه OHLC خود مانند سایر مؤلفه های D3 رفتار کنیم. فرض می کنیم داده های ما آرایه ای از اشیاء هستند که به شکل زیر هستند: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 خود را بهبود می دهیم تا برای حرکت و زوم کردن بهینه شود.