ساختن یک نمودار شمعدانی ساده با استفاده از Docker ، Fastapi و Vue 3 - قسمت 10

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

اینها را می توان به دو مؤلفه جداگانه تقسیم کرد ، اما ما ابتدا باید کتابخانه نمودار را برای این کار نصب کنیم. گزینه های بسیاری وجود دارد که می توانید برای نمودار انتخاب کنید اما موردی که ما در اینجا می خواهیم از آن استفاده کنیم ، نسخه VUE از ApexCharts است ، به نام (خلاقانه) ، Vue-Apexcharts. برای نصب این کار به سادگی اجرا می کنیم

npm i apexcharts vue3-apexcharts 

و سپس ما دو مؤلفه برای تقسیم عملکرد ایجاد می کنیم.

jvpcandlestick. vue

نمودار اول شامل عملکرد Candlestick است که JVPCandLestick. vue نامیده می شود. ApexCharts دارای یک نمودار شمعدانی داخلی است که ما از آن استفاده خواهیم کرد تا خود این مؤلفه نسبتاً ساده باشد. در پیوندی که می توانید فرمی را مشاهده کنید که داده ها باید باشد ، که قبلاً در یک پست قبلی به آن پرداخته ایم.

راه اندازی مؤلفه

بخش الگوی مؤلفه نسبتاً مستقیم خواهد بود:

 قالب> دارایی نوع="شمعدان" عرض="100 ٪" قد="80 ٪" :سلسله="سلسله" :گزینه ها="ChartOptions">دارایی>قالب> 

جایی که مقادیر سری و ChartOptions کمی تنظیم می شوند. با این حال ، قبل از انجام هر کار دیگری ، باید Main. js خود را به روز کنیم تا در سطح جهانی مؤلفه ApexChart را اعلام کنیم.

// src/main. js وارد كردن از جانب 'vue'; وارد كردنبرنامهاز جانب './app. vue'; وارد كردن './index. css'; وارد كردنشبهاز جانب 'vue3-apexcharts'؛CreateApp (برنامه) . use (vueapexcharts) . mount ('#APP'); 

شما می توانید در بالا مشاهده کنید که ما VueApexCharts را وارد کرده ایم و از آن در برنامه خود استفاده می کنیم. حال باید بخش اسکریپت مؤلفه JVPCandLestick را اداره کنیم. برای نمایش داده ها ، و همچنین اطلاعات دیگری که می خواهیم از جمله نماد و فاصله ، باید این سری را درج کنیم ، که همه آنها باید به عنوان غرفه اعلام شوند. سپس عنوان نمودار را به عنوان یک ویژگی محاسبه شده تنظیم می کنیم که اگر هیچ داده ای سری نداشته باشیم اما هر زمان که داده داشته باشیم ، تیک و فاصله را نمایش می دهیم. سرانجام ، ما برخی از گزینه های نمودار را برای نمایش عنوان ، قالب محورهای X و Y و همچنین ابزار ابزار تنظیم خواهیم کرد.

وارد كردن از جانب 'vue'; صادر کردن پیش فرضقطعات مشخص (<غرفه: <سمبل: <نوع: رشته, ضروری: درست است، واقعی,>, فاصله: <نوع: رشته, ضروری: درست است، واقعی,>, سلسله: <نوع: آرایه, ضروری: درست است، واقعی,>,>، تنظیم (PROPs)<محاصره کردنفاصله = محاسبه شده (() =>props. interval) ؛محاصره کردننماد = محاسبه شده (() =>props. symbol) ؛محاصره کردنسری = محاسبه شده (() =>props. series) ؛محاصره کردنعنوان = محاسبه شده (() =>! series. value. l طول؟'' : `نمودار $ $$ ` ); محاصره کردنChartOptions = محاسبه شده (() => (<چارت سازمانی: <نوع: "شمعدان", id: 'شمع ها', بزرگنمایی: <فعال: دروغ,>,>, عنوان: <متن: title. value ،تراز کردن: 'ترک کرد', شناور: درست است، واقعی, خارج: 25, OffsetX: 10, سبک: <اندازه فونت: '2rem',>,>, XAXIS: <نوع: 'زمان قرار',>, یدک: <نوک ابزار: <فعال: درست است، واقعی,>, برچسب ها: <سازنده: (دره) =>val. tofixed (0),>,>,>)); برگشت ;>,>); 

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

قالب> قسمت> jvpcandlestick :سلسله="سلسله" : فاصله="فاصله" :سمبل="سمبل" />قسمت>قالب> 

اکنون یک جستجوی ساده از هر تیکت باید موارد زیر را ارائه دهد:

توجه داشته باشید

یک مؤلفه در انتخاب وجود دارد. در روش PostprocessData ، مقدار state. enddate ، اگر همیشه یک نمودار روزانه را واگذار می کند ، دائماً مقدار enddate را دوباره تنظیم می کند تا یک روز زودتر باشد. رفع سریع در اطراف این ، به سادگی جایگزین کردن state. enddate = formatDate (تاریخ [تاریخ. طول - 1]) است. با

if(! state. enddate)1]);> 

jvpvolume. vue

در مرحله بعد ، ما باید نمودار حجم را تنظیم کنیم که زیر نمودار شمعدان قرار می گیرد و JVPVolume. vue نامیده می شود. این به همین ترتیب ساده است ، زیرا ما فقط از یک نمودار نوار از Vue3-Apexcharts استفاده خواهیم کرد.

قالب> دارایی نوع="بار" عرض="100 ٪" قد="20 ٪" :سلسله="سلسله" :گزینه ها="ChartOptions">دارایی>قالب> 

سپس ما به سادگی سریال Volume را می کشیم و سری را به عنوان یک ویژگی محاسبه شده تنظیم می کنیم و به طور مشابه برخی از گزینه های نمودار را تنظیم می کنیم.

وارد كردن از جانب 'vue'; صادر کردن پیش فرضقطعات مشخص (<غرفه: <جلد: <نوع: آرایه, ضروری: درست است، واقعی,>,>، تنظیم (PROPs)<محاصره کردنسری = محاسبه شده (() =>props. volume) ؛محاصره کردنChartOptions = محاسبه شده (() => (<نوع: 'بار', قلم مو: <فعال: درست است، واقعی, هدف: 'شمع ها',>, دیتاalabels: <فعال: دروغ,>, توطئه: <بار: <عرض ستون: '80 ٪ ',>,>, سکته: <عرض: 0,>, XAXIS: <نوع: 'زمان قرار', محور: <OffsetX: 13,>, دسته بندی ها: props. volume [0] ؟.. data. map ((e) => e.x.getTime()) ?? [],>,>)); برگشت ;>,>); 

سپس می توانیم مؤلفه jvpvolume. vue را در نمودار قرار دهیم.

قالب> قسمت> jvpcandlestick :سلسله="سلسله" : فاصله="فاصله" :سمبل="سمبل" /> jvpvolume :جلد="جلد" />قسمت>قالب> 

و واکشی داده ها برای یک تیک نتیجه زیر را می دهد که مسلماً نسبتاً زشت به نظر می رسد. برای مقابله با این ، ما مقداری یک ظاهر طراحی شده به مؤلفه Chart. vue اضافه خواهیم کرد تا چیزها کمی بهتر به نظر برسند.

نمودار. یک ظاهر طراحی شده

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

 قالب> قسمت طبقه="MX-AUTO H-1/2 SM: H-4/6"> jvpcandlestick :سلسله="سلسله" : فاصله="فاصله" :سمبل="سمبل"/> jvpvolume :جلد="جلد" />قسمت>قالب> 

تنظیم این باعث می شود نمودار حاصل بسیار بهتر به نظر برسدThe problem, though, is that when the page first loads and there is no data the page looks somewhat ugly.

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

قالب> قسمت طبقه="MX-AUTO H-1/2 SM: H-4/6 LG: H-5/6" : کلاس="سری. طول؟" ":" Flex Attems-Center توجیه-مرکز "> قسمت v-if="series. l طول" طبقه="H-full"> jvpcandlestick :سلسله="سلسله" : فاصله="فاصله" :سمبل="سمبل" /> jvpvolume :جلد="جلد" />قسمت> قسمت V-Egese id="چارت سازمانی" طبقه="TEXT-4XL FLEX Attems-Center توجیه-مرکز">یک شرکت ، فاصله و تاریخ های زیر Div را انتخاب کنید>قسمت>قالب> 

ویژگی: ویژگی کلاس در Div بسته بندی به ما امکان می دهد سبک ها را به صورت پویا تنظیم کنیم. این عملکرد مشابه ویژگی کلاس عمومی بالای آن است ، اما این به ما امکان می دهد کلاس را به صورت برنامه ای به چیزی متصل کنیم. با استفاده از این تنظیم ، صفحه اولیه ، قبل از بارگیری داده ها ، به این شکل است

خلاصه

با این کار ، ما یک برنامه ساده داریم که از FastAPI در سرور استفاده می کند تا داده ها را با Vuelidate و Apexcharts واکشی کند تا داده ها را در قسمت جلوی نمایش داده شود. کل repo را می توان در github. com/jvp-design/stock-chart-fastapi-vue یافت