این مقاله نحوه ایجاد شاخص های فنی سفارشی، در این مورد، رگرسیون خطی را نشان می دهد. برای مطالعه بیشتر در مورد شاخص های فنی ارائه شده توسط Highcharts اینجا را کلیک کنید.
مطمئن شوید که حداقل نسخه 6 Highcharts را داشته باشید، زیرا نسخه های قبلی Highcharts از شاخص های فنی پشتیبانی نمی کنند.
سری نشانگر فنی#
دو مرحله اصلی برای ایجاد یک سری شاخص فنی وجود دارد:
- ساختار شاخص فنی را تنظیم کنید.
- عملکرد نشانگر فنی را ایجاد کنید.
1. ساختار# را تنظیم کنید
هر اندیکاتور فنی نیاز به پیاده سازی متد getValues() دارد. این متد دو آرگومان می گیرد و یک شی را برمی گرداند. آرگومان ها سری اصلی و پارامترها هستند. پارامترها مختص یک نشانگر فنی هستند. ساختار متد getValues() را بررسی کنید:
تمام اندیکاتورهای فنی از نوع سری هستند و برای ایجاد سری جدید در Highcharts از روش زیر Highcharts. seriesType() استفاده می شود.
متد getLinearRegression() شامل عملکرد شاخص فنی (محاسبه ریاضی) است. توجه داشته باشید که ماژول نشانگرها indicators. js هنگام ایجاد نشانگرهای فنی گنجانده شده است، زیرا شامل منطق اصلی برای همه اندیکاتورها است.
اکنون ساختار تنظیم شده است، مرحله بعدی ایجاد عملکرد شاخص اصلی است.
2. عملکرد نشانگر فنی#
عملکرد نشانگر فنی با روش زیر ()getLinearRegression نشان داده می شود که نقاط رگرسیون را بر اساس xData و yData محاسبه می کند.
در اینجا یک نمایش ریاضی ساده از رگرسیون خطی وجود دارد:
جایی که شیب است:
نمایش جاوا اسکریپت فرمول های بالا به شرح زیر است:
توجه داشته باشید که سریهای رگرسیون خطی در این مثال هنوز یک سری خطی هستند و این بدان معناست که دادهها باید به صورت صعودی بر اساس مقادیر x مرتب شوند.
خودشه؛نشانگر فنی آماده استفاده است. به خاطر داشته باشید که نشانگر فنی توسط گزینه linkedTo به سری اصلی متصل می شود:
برای دموهای زنده لینک های زیر را بررسی کنید:
تذکر دهید
برای بهبود تجربه کاربر هنگام استفاده از سری رگرسیون خطی، سعی کنید راهنمای ابزار و/یا نشانگرها را غیرفعال کنید. به seriesType() بروید و گزینه های پیش فرض را به صورت زیر تنظیم کنید:
ماژول اندیکاتور به عنوان یک ماژول اصلی indicators/trendline. js در دسترس است.
3. نشانگر با چندین خط#
سهام Highcharts بسیاری از شاخص های آماده برای استفاده را ارائه می دهد. برخی از آنها با استفاده از چندین خط (به عنوان مثال باندهای بولینگر) ترسیم شده اند. در این بخش ، نحوه ساخت یک شاخص سفارشی متشکل از 5 خط را یاد خواهید گرفت.
بیایید فرض کنیم که ما می خواهیم یک شاخص با یک خط اصلی رگرسیون خطی از مثال قبلی بسازیم ، اما این بار با چهار خط محدوده اضافی که به تجسم تفاوت بین خط سری اصلی و خط رگرسیون ما کمک می کند. برای این کار ، 4 خط اضافی را اضافه خواهیم کرد که به عنوان منطقه تحت درمان قرار می گیرند. مقادیر این خطوط مطابق با 90 ٪ ، 95 ٪ ، 105 ٪ و 110 ٪ از مقادیر خط رگرسیون ضرب می شوند (نسبت مرحله برای تغییر در سری امکان پذیر است).
البته داده های مثال قبلی باید اصلاح شود:
برای ترسیم یک نشانگر با چندین خط ، می توانیم از Mixlines Mixin HighCharts استفاده کنیم که پس از اضافه کردن هر یک از شاخص های HighCharts که چندین خط را اجرا می کنند ، قابل دسترسی است ، به عنوان مثال. گروههای بولینگر:
حال ، هنگام دسترسی به Multiplelines Mixin ، می توانیم با رونویسی از روشهای نمونه اولیه سری پیش فرض ، چندین خط را برای ترسیم چندین خط آماده کنیم. ما همچنین می توانیم هر خط اضافی را نامگذاری کنیم و سبک های خاص خود را تعریف کنیم. در داخل روش Highcharts. Seriestype می توانیم خواص زیر را تعریف کنیم (* - مورد نیاز):
- پارامترها * - پارامترهای شاخص. در مورد ما ، تفاوت پیش فرض بین خطوط را به 5 ٪ تعیین می کنیم. این را می توان در گزینه های سری نشانگر تغییر داد.
- CLOVERANGEBOTTOMLINE ، HIGHRANGEBOTTOMLINE ، CLOSERANGETOPLINE ، HIGHRANGETOPLINE - سبک های پیش فرض جداگانه برای هر خط اضافی. این را می توان در گزینه های سری نشانگر تغییر داد.
- LinesApinames * - آرایه ای که حاوی نام خطوط اضافی است.
- NameBase - نام شاخص نمایش داده شده در افسانه.
- NameComponents - آرایه ای حاوی نام خواصی که مقادیر باید در پرانتز در افسانه کنار نام شاخص نمایش داده شوند.
- PointArraymap * - آرایه ای که حاوی کلیدهای مقادیر نقاط است.
- PointValkey * - مقدار پیش فرض برای PointValkey
- Drawgraph ، GetTranslateLateLinesNames ، ترجمه ، Toydata - روشهای اصلی Highcharts را که مسئول ترسیم چندین خط هستند ، بازنویسی کنید.
در اینجا نحوه آرگومان های روش Seriestype به نظر می رسد:
نسخه ی نمایشی زنده از شاخص چند لایه فوق را می توان در اینجا یافت.
برای نمونه های دقیق تر و مستندات API را بررسی کنید.
4- شاخص های محاسبه شده در رویدادها.#
ایده ایجاد یک اندیکاتور سفارشی که پس از برخی رویدادهای نمودار محاسبه می شود (به عنوان مثال afterSetExtremes) مشابه مواردی است که قبلاً با چند اضافات ذکر شد.
مهمترین شیء برای اضافه کردن هنگام ایجاد اندیکاتورها محاسبه On است که در آن دو ویژگی مشخص شده است:
- نمودار - در کدام رویداد نمودار باید اندیکاتور محاسبه شود، عمدتاً می توانید از init (قبل از پردازش سری پیوند شده) و رندر (پس از پردازش سری پیوند شده) را انتخاب کنید.
- xAxis - در کدام رویداد xAxis شاخص باید دوباره محاسبه شود (به عنوان مثال afterSetExtremes)،
پیکربندی نمونه باید به این صورت باشد:
یک نسخه ی نمایشی زنده از مثال بالا را می توانید در اینجا پیدا کنید.
5. نشانگر ستون سفارشی.#
اصل ایجاد نشانگر ستون سفارشی مشابه نمونه معمولی است. با این حال، روش getValues برای محاسبه موقعیت امتیاز مورد نیاز است. علاوه بر آن، برای رندر کردن ستون، برخی از روشهای دیگر مانند crispCol، drawPoints، getColumnMetrics، translate باید از نمونه اولیه سری ستون و نشانگرAttribs، drawGraph با یک تابع خالی بازنویسی شوند، همانطور که در قطعه کد نشان داده شده است. زیر
علاوه بر این، برای ارائه صحیح آن نشانگر، باید خصوصیات آستانه، groupPadding و pointPadding تعریف شوند.