نمودار XY - نمودار شمعدان

این مثال نحوه پیکربندی نمودار شمعدان را نشان می دهد.

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

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

برای دیدن JSON RAW اینجا را کلیک کنید.

1. یک مؤلفه نمودار XY ایجاد کنید و آن را انتخاب کنید.
2. ما با تنظیم Legend. Enabled به False ، افسانه را حذف خواهیم کرد.
3. تغییر نام Xaxes. 0. name به dateaxis.
4. xaxes. 0. label. text را به روز تنظیم کنید تا برچسب را در محور x تغییر دهید.
5. نمودار ما فقط به یک Yaxis واحد احتیاج دارد ، بنابراین Yaxes. 1 را حذف کنید.
6. yaxes. 0. name را تنظیم کنید.
7. yaxes. 0. label. text را روی مقدار تنظیم کنید.
8. بعد به غرفه های سریال خواهیم پرداخت. ما فقط به یک سری واحد احتیاج داریم ، بنابراین سری 1 را حذف کنید.
9. سری . 0. data. x را روی کلید تاریخ ما تنظیم کنید
10. سری . 0. data. y را روی کلید نزدیک ما تنظیم کنید.
11. سری . 0. render را به شمعدان تنظیم کنید.
12. series. 0. data. xaxis را به Xaxis ، dateaxis ما تنظیم کنید.
13. سری . 0. data. yaxis را روی Yaxis ، ارزیابی ما تنظیم کنید.
14. در ابتدا داده ها را برای کلید Close در سری خود تنظیم می کنیم. اکنون باید کلیدهای باز ، بالا و پایین را به همراه کلید تاریخ خود تنظیم کنیم. در زیر سری . 0. candlestick. open ، x را به روز تنظیم کنید و y را باز کنید.
15. در زیر سری . 0. candlestick. high ، x را به روز تنظیم کنید ، و y را به بالا.
16. در زیر سری . 0. candlestick. low ، تنظیم x ، تا به امروز و y به پایین.

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

پیکربندی مثال

از رشته JSON در زیر می توان برای تکرار مثال فوق استفاده کرد. به سادگی محتویات بلوک کد را در زیر کپی کنید (برای انتخاب همه آن بر روی هر قسمت از JSON کلیک کنید) و آن را در یک ظرف در طراح خود بچسبانید.

برای دیدن JSON RAW اینجا را کلیک کنید.

[ <"type": "ia.chart.xy", "version": 0, "props": <"legend": <"enabled": false>، "xaxes": [<"name": "dateAxis", "label": <"enabled": true, "text": "Date", "color": "">، "قابل مشاهده": واقعی ، "ابزار ابزار":<"enabled": true, "text": "", "coerRadius": 3, "pointerLength": 4, "background": <"color": "", "opacity": 1>>، "معکوس": دروغ ، "رندر": "تاریخ" ، "دسته":<"break": <"enabled": false, "startCategory": "", "endCategory": "", "size": 0.05>>، "تاریخ":<"baseInterval": <"enabled": false, "timeUnit": "hour", "count": 1, "skipEmptyPeriods": false>، "دامنه":<"max": "", "min": "", "useStrict": false>، "زنگ تفريح":<"enabled": false, "startDate": "", "endDate": "", "size": 0.05>, "inputFormat": "yyyy-MM-dd kk:mm:ss", "format": "M/d">، "ارزش":<"range": <"max": "", "min": "", "useStrict": false>، "لگاریتمی": false ، "break":<"enabled": false, "startValue": 0, "endValue": 100, "size": 0.05>، "قالب": "#,###.##">، "ظاهر":<"opposite": false, "inside": false, "labels": <"color": "", "opacity": 1>، "توری":<"color": "", "opacity": 1, "dashArray": "", "minDistance": 60, "position": 0.5>، "قلم":<"size": "", "weight": 500>>>] ، "yaxes": [<"name": "valuation", "label": <"enabled": true, "text": "Value", "color": "">، "قابل مشاهده": واقعی ، "ابزار ابزار":<"enabled": true, "text": "", "coerRadius": 3, "pointerLength": 4, "background": <"color": "", "opacity": 1>>، "معکوس": نادرست ، "ارائه": "ارزش" ، "دسته":<"break": <"enabled": false, "startCategory": "", "endCategory": "", "size": 0.05>>، "تاریخ":<"baseInterval": <"enabled": false, "timeUnit": "hour", "count": 1, "skipEmptyPeriods": false>، "دامنه":<"max": "", "min": "", "useStrict": false>، "زنگ تفريح":<"enabled": false, "startDate": "", "endDate": "", "size": 0.05>, "inputFormat": "yyyy-MM-dd kk:mm:ss", "format": "M/d/yyyy HH:mm:ss">، "ارزش":<"range": <"max": "", "min": "", "useStrict": false>، "لگاریتمی": false ، "break":<"enabled": false, "startValue": 0, "endValue": 100, "size": 0.05>، "قالب": "#,###.##">، "ظاهر":<"opposite": false, "inside": false, "labels": <"color": "", "opacity": 1>، "توری":<"color": "", "opacity": 1, "dashArray": "", "minDistance": null, "position": 0.5>، "قلم":<"size": "", "weight": 500>>>]، "سلسله": [<"name": "process temp", "label": <"text": "Process Temp">، "قابل مشاهده": درست ، "HiddenInLegend": false ، "DefaultState":<"visible": true>، "داده ها":<"source": "example", "x": "date", "y": "close">، "Xaxis": "Dateaxis" ، "Yaxis": "ارزیابی" ، "Zindex": 0 ، "Tooltip":<"enabled": true, "text": ": [bold][/]", "coerRadius": 3, "pointerLength": 4, "background": <"color": "", "opacity": 1>>، "رندر": "شمعدان" ، "شمعدان":<"open": <"x": "date", "y": "open">، "بالا":<"x": "date", "y": "high">، "کم":<"x": "date", "y": "low">، "ظاهر":<"fill": <"color": "", "opacity": 1>، "سکته":<"color": "", "opacity": 1, "width": 1>، "انباشته": دروغ ، "derivefieldsfromdata":<"fill": <"color": "", "opacity": "">، "سکته":<"color": "", "opacity": "", "width": "">>، "Heatrules":<"enabled": false, "max": "", "min": "", "dataField": "">>>، "ستون":<"open": <"x": "", "y": "">، "ظاهر":<"fill": <"color": "", "opacity": 1>، "سکته":<"color": "", "opacity": 1, "width": 1>، "انباشته": دروغ ، "عرض": تهی ، "ارتفاع": تهی ، "derivefieldsfromdata":<"fill": <"color": "", "opacity": "">، "سکته":<"color": "", "opacity": "", "width": "">>، "Heatrules":<"enabled": false, "max": "", "min": "", "dataField": "">>>، "خط":<"open": <"x": "", "y": "">، "ظاهر":<"coect": true, "tensionX": 1, "tensionY": 1, "minDistance": 0.5, "stroke": <"width": 3, "opacity": 1, "color": "", "dashArray": "">، "پر":<"opacity": 0, "color": "">، "گلوله": [<"enabled": false, "render": "circle", "width": 10, "height": 10, "label": <"text": "", "position": <"dx": 0, "dy": 0>>، "پر":<"color": "", "opacity": 1>، "سکته":<"color": "", "opacity": 1, "width": 1>، "چرخش": 0 ، "ابزار ابزار":<"enabled": true, "text": ": [bold][/]", "coerRadius": 3, "pointerLength": 4, "background": <"color": "", "opacity": 1>>، "derivefieldsfromdata":<"fill": <"color": "", "opacity": "">، "سکته":<"color": "", "opacity": "", "width": "">, "rotation": "">، "Heatrules":<"enabled": false, "max": 100, "min": 2, "dataField": "">> ]>>، "استیلین":<"open": <"x": "", "y": "">، "ظاهر":<"coect": true, "tensionX": 1, "tensionY": 1, "minDistance": 0.5, "stroke": <"width": 3, "opacity": 1, "color": "", "dashArray": "">، "پر":<"opacity": 0, "color": "">، "گلوله": [<"enabled": true, "render": "circle", "width": 10, "height": 10, "label": <"text": "", "position": <"dx": 0, "dy": 0>>، "پر":<"color": "", "opacity": 1>، "سکته":<"color": "", "opacity": 1, "width": 1>، "چرخش": 0 ، "ابزار ابزار":<"enabled": true, "text": ": [bold][/]", "coerRadius": 3, "pointerLength": 4, "background": <"color": "", "opacity": 1>>، "derivefieldsfromdata":<"fill": <"color": "", "opacity": "">، "سکته":<"color": "", "opacity": "", "width": "">, "rotation": "">، "Heatrules":<"enabled": false, "max": 100, "min": 2, "dataField": "">> ]>>>]، "منابع اطلاعات":<"example": [ <"close": 6, "date": "2021-8-12 15:37:19", "high": 7, "low": 2, "open": 5>, <"close": 7, "date": "2021-8-13 15:37:19", "high": 9, "low": 5, "open": 6>, <"close": 5, "date": "2021-8-14 15:37:19", "high": 7, "low": 4, "open": 7>]>>، "متا":<"name": "XYChart_0">، "موقعیت":<"x": 141, "y": 103, "height": 375, "width": 435>، "سفارشی":<>> ]