برای نمایش JSON از نمودار Candlestick و DataSource برای iOS استفاده کنید

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

از تئوری تا تمرین - مسیری طولانی برای طی کردن. یا خیلی طولانی نیست

تا کنون ، ما می دانیم که نمودار شمعدان راحت و مفید است ، و ما آن را دوست داریم ، اما چگونه می توانیم آن را به سرعت ، به راحتی و بدون اینکه یک ستاره ریاضی باشیم ، پیاده سازی کنیم. نگران نباشید ، UI Telerik برای iOS به نجات می آید! با استفاده از مؤلفه tkchart ، تنها کاری که باید انجام دهیم این است که داده ها را منتقل کنیم و نمودار ما آماده خواهد شد-هیچ ریاضی ، حتی یک محاسبه واحد. قول میدهم!

مصرف داده های ساده

بیایید آن را امتحان کنیم و برخی از داده ها را برای نمودار تولید کنیم.

اجازه دهید OpenPrices = [100 ، 125 ، 69 ، 99 ، 140 ، 125] اجازه دهید clospprices = [85 ، 65 ، 135 ، 120 ، 80 ، 136] اجازه دهید Lowprices = [50 ، 60 ، 65 ، 55 ، 75 ، 90] اجازه دهید Highprices = [129 ، 142 ، 141 ، 123 ، 150 ، 161] var datenow = nsdate () var financialdatapoints = [tkchartfinancialdatapoint] () برای var i = 0 ؛منFinancialDatapoints. Append (tkchartfinancialdatapoint (x: date ، باز: OpenPrices [i] ، بالا: Highprices [i] ، پایین: Lowprices [i] ، Close: ClosePrices [i]))

اکنون ما باید یک TKCHART ایجاد کنیم و TkchartCandlestickSeries را با داده های خود اضافه کنیم. اجازه دهید نمودار = tkchart (قاب: cgrectinset (self. view. bounds ، 15 ، 15)) Chart. AutoresizingMask = UIViewAutoresizing. FlexibleWidth |uiviewautoresizing. FlexibleHeight self. view. addsubview (نمودار) اجازه دهید candlestickseries = tkchartcandlestickseries (موارد: FinancialDatapoints) Chart. Ddseries (CandlestickSeries) اجازه دهید Xaxis = Chart. xaxis AS! tkchartdateTimeAxis xaxis. minortickintervalunit = tkchartdateTimeAxisIntervalUnit. days xaxis. setplotmode (tkchartaxisplotmode. betweenticks) xaxis. majortickinterval = 1

یک تکه کیک! چند خط کد ، و ما یک نمودار شمعدان براق داریم.

حال ، اگر داده های ما از یک سرویس وب تهیه شود ، چه می شود؟

مصرف داده های JSON از یک سرویس WebService با tkdatasource

نتیجه این درخواست معمولاً در قالب JSON حاصل می شود ، بنابراین ما فقط باید اشیاء JSON مورد نیاز خود را بدست آوریم ، آنها را رها کنیم و آنها را به اشیاء TkchartDataPoint تبدیل کنیم. پس از آن می توانیم آنها را به نمودار منتقل کنیم. مدیریت همه این عملیات یک مانع نمایش نیست ، اما اگر بتوانیم از یک مؤلفه برای مدیریت همه آنها استفاده کنیم ، خیلی بهتر خواهد بود. خوشبختانه ، مؤلفه Tkdatasource در اینجا برای راحت تر کردن مدیریت داده ها از همیشه است. این یک مؤلفه غیر بصری است که داده ها را از منابع مختلف از جمله خدمات وب مصرف می کند. همچنین از عملیات شکل گیری مانند مرتب سازی ، فیلتر و گروه بندی پشتیبانی می کند. سرانجام ، کاملاً با کنترل های بصری فعال شده با داده کار می کند. ما می توانیم از tkdatasource همراه با Tkchart استفاده کنیم تا داده ها را از یک سرویس وب دریافت کنیم ، آن را تغییر شکل داده و آن را تجسم کنیم. اول از همه ، ما یک tkchart را به همان روشی که در بالا انجام دادیم ایجاد می کنیم.

اجازه دهید نمودار = tkchart (قاب: cgrectinset (self. view. bounds ، 20 ، 20)) Chart. AutoresizingMask = UIViewAutoresizing. FlexibleWidth |uiviewautoresizing. FlexibleHeight self. view. addsubview (نمودار)

سپس Tkdatasource را ایجاد می کنیم و آن را تنظیم می کنیم تا داده ها را از سرویس وب دریافت کنیم. برای این نسخه ی نمایشی ، من قصد دارم از Yahoo! API های مالی و آمار شرکت نرم افزار پیشرفت را بین 10/03/2015 و 20/03/2015 دریافت کنید.

اجازه دهید dataSource = tkdatasource ()

dataSource. LoadDatafromurl (url ، dataformat: tkdatasourcedataformat. json ، rootitemkeypath: "query. results. quote")<(error:NSError!) >باطل در

if (خطا! = صفر)< NSLOG ("نمی توان با سرور ارتباط برقرار کرد")

ما داده های JSON را بدست آوردیم ، اما سرویس وب اطلاعات کمی بیشتر از آنچه لازم است برای جمع آوری نمودار خود برگردانده شود ، بنابراین مشخص می کنیم که می خواهیم فقط اشیاء موجود در query. results. quote را رها کنیم. شیء DataSource اکنون شامل مجموعه ای از آمار برای هر روز که سرویس برگشته است. همانطور که می بینید آنها دفع شده و آماده استفاده هستند.

برای راحتی شما ، ما در مورد موارد موجود در مورد داده ها تکرار می کنیم و در حال تبدیل ویژگی تاریخ از NSString به NSDATE هستیم. این لازم است که داده های ما به درستی تجسم شوند.

DataSource. map<(item:AnyObject!) >هر اوبکت! که در let dateformatter = nsdateformatter () dateformatter. dateformat = "yyyy-mm-dd" اجازه دهید تاریخ: nsdate = dateformatter. datefromstring (item. valueforkey ("تاریخ") as! string)! item. setValue (تاریخ ، forkey: "تاریخ") آیتم بازگشت

حال ما باید به DataSource نحوه تجسم داده ها بگوییم. در روش CreateSeries ، ما نوع سری را تعریف می کنیم که نمودار با آن کار می کند ، در این مورد tkchartcandlestickseries.

DataSource. map<(item:AnyObject!) >هر اوبکت! که در let dateformatter = nsdateformatter () dateformatter. dateformat = "yyyy-mm-dd" اجازه دهید تاریخ: nsdate = dateformatter. datefromstring (item. valueforkey ("تاریخ") as! string)! item. setValue (تاریخ ، forkey: "تاریخ") آیتم بازگشت

با استفاده از روش CreatePoint ، ما داده ها را از هر مورد سریالی دریافت می کنیم و آن را به یک شی TkchartfinancialDatapoint تبدیل می کنیم ، که می تواند توسط نمودار شمعدان تجسم شود.

dataSource. settings. chart. CreateSeries<(group: AnyObject!) >tkchartseries! که در let series = tkchartcandlestickseries () سری بازگشت اجازه دهید formatter = nsnumberformatter () formatter. numberstyle = nsnumberformatterstyle. decimalStyle dataSource. settings. chart. CreatePoint<( seriesIndex:Int, dataIndex:Int, item:AnyObject!) >tkchartdata! که در

var point = tkchartfinancialdatapoint (x: item. valueforkey ("تاریخ") ، باز: formatter. numberfromstring (item. valueforkey ("باز") به عنوان رشته) ، high: formatter. numberfromstring (item. valueueforkey ("high") به عنوان! رشته) ، کم: formatter. numberfromstring (item. valueforkey ("کم") به عنوان رشته) ، بستن: formatter. numberfromstring (item. valueforkey ("بستن") به عنوان رشته) ، جلد: formatter. numberfromstring (مورد. ValueForKey ("حجم") as! string))

نقطه بازگشت

سرانجام ، ما باید ویژگی DataSource نمودار را روی شیء DataSource خود تنظیم کنیم و Xaxis را برای نمایش اشیاء تاریخ تنظیم کنیم.

Chart. Datasource = DataSource اجازه دهید Xaxis = Chart. xaxis AS! tkchartdateTimeAxis xaxis. minortickintervalunit = tkchartdateTimeAxisIntervalUnit. days xaxis. setplotmode (tkchartaxisplotmode. betweenticks) xaxis. majortickinterval = 2 اجازه دهید yaxis = chart. yaxis as! tkchartnumericaxis yaxis. range. minimum = 25 yaxis. majortickinterval = 1

این نتیجه نهایی است:

You can set your imagination free and explore the other great options the TKChart and TKDataSource offer. In case you want to continue where we left off, here is the full code of the example in Objective-C and Swift. To run the projects, download and install a free trial ​Telerik UI for iOS. Enjoy!

درباره نویسنده

سوفیا لازاروا

سوفیا لازاروا یک توسعه دهنده جوان در تیم Telerik IOS است. او به تازگی از آکادمی Telerik با رنگ های پرواز فارغ التحصیل شده است تا به تیم بپیوندد و شروع به افزودن ارزش به مجموعه بهترین کنترل های iOS کند. او علاقه مند به توسعه نرم افزار در فن آوری های مختلف است.