{"id":3489,"date":"2020-09-05T16:02:19","date_gmt":"2020-09-05T13:02:19","guid":{"rendered":"https:\/\/furkansandal.com\/?p=3489"},"modified":"2022-12-19T10:34:10","modified_gmt":"2022-12-19T07:34:10","slug":"swift-uikit-charts-ile-pie-chart-yapimi","status":"publish","type":"post","link":"https:\/\/furkansandal.com\/swift-uikit-charts-ile-pie-chart-yapimi\/","title":{"rendered":"Swift UIKit + Charts ile Pie Chart Yap\u0131m\u0131"},"content":{"rendered":"\r\n
\r\n
\r\n

Selamlar, Swift ile UIKit arac\u0131l\u0131\u011f\u0131la yapt\u0131\u011f\u0131m\u0131z bir proje i\u00e7erisinde Pie Chart – Pasta Grafi\u011fi ihtiyac\u0131 s\u0131ras\u0131nda gelen verilere g\u00f6re y\u00fczdelik olarak dilim pay\u0131 ve bo\u015fluklu olmas\u0131n\u0131 hedefledik. Aray\u0131\u015flar\u0131m i\u00e7erisinde Swift, Java ve Kotlin ayn\u0131 k\u00fct\u00fcphaneyi kullan\u0131yordu. Eski s\u00fcr\u00fcmler ile ilgili \u00e7\u00f6p bilgi \u00e7ok fazlayd\u0131. Sizler i\u00e7in daha fazla uzatmadan kullan\u0131ma ge\u00e7ireyim;<\/p>\r\n

Xcode i\u00e7in CacaoPods ile kurulumunu anlatm\u0131yorum a\u015fa\u011f\u0131daki adresten kurulumuna ula\u015fabilirsiniz;<\/p>\r\n

\r\n

https:\/\/cocoapods.org\/pods\/Charts<\/a><\/p>\r\n<\/blockquote>\r\n

Charts k\u00fct\u00fcphanesinin GitHub linki;<\/p>\r\n

\r\n

https:\/\/github.com\/danielgindi\/Charts<\/a><\/p>\r\n<\/blockquote>\r\n

Kurulumu tamamlad\u0131ktan sonra Pie Chart i\u00e7in i\u015flem yapaca\u011f\u0131n\u0131z Storyboard’a yeni bir UIView ekleyelim ve konumunu ayarlayal\u0131m.<\/p>\r\n

<\/p>\r\n

Ekledim ve konumunu ayarlad\u0131m. 394×240 boyut verdim. Siz istedi\u011finiz gibi verebilirsiniz.<\/p>\r\n

<\/p>\r\n

Ard\u0131ndan olu\u015fturdu\u011funuz View’i i\u015flem yapaca\u011f\u0131m\u0131z swift s\u0131n\u0131f\u0131m\u0131za tan\u0131mlayal\u0131m.<\/p>\r\n

Renkler i\u00e7in \u00f6ncelikle yeni bir Extension olu\u015ftural\u0131m. \u00c7\u00fcnk\u00fc NSUIColor kullanaca\u011f\u0131z, hex de\u011feri ile rengi verebilecek extension’unumuzu olu\u015ftural\u0131m.<\/p>\r\n

\r\n

NSUIColor+Hex.swift dosyas\u0131n\u0131 olu\u015ftural\u0131m.<\/p>\r\n<\/blockquote>\r\n

<\/pre>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n
\r\nimport Foundation\r\nimport Charts\r\n\r\nextension NSUIColor {\r\n    \r\n    convenience init(red: Int, green: Int, blue: Int) {\r\n        assert(red >= 0 && red <= 255, "Bilinmeyen K\u0131rm\u0131z\u0131 Komponent")\r\n        assert(green >= 0 && green <= 255, "Bilinmeyen Ye\u015fil Komponent")\r\n        assert(blue >= 0 && blue <= 255, "Bilinmeyen Mavi Komponent")\r\n        \r\n        self.init(red: CGFloat(red) \/ 255.0, green: CGFloat(green) \/ 255.0, blue: CGFloat(blue) \/ 255.0, alpha: 1.0)\r\n    }\r\n    \r\n    convenience init(hex: Int) {\r\n        self.init(\r\n            red: (hex >> 16) & 0xFF,\r\n            green: (hex >> 8) & 0xFF,\r\n            blue: hex & 0xFF\r\n        )\r\n    }\r\n    \r\n}\r\n<\/pre><\/div>\r\n\r\n\r\n
Devam\u0131nda i\u015flem yapaca\u011f\u0131m\u0131z dosyam\u0131za gelelim. Ve a\u015fa\u011f\u0131daki kodlar\u0131 buna g\u00f6re ayarlayal\u0131m.<\/p>\r\n\r\n\r\n
\r\nimport UIKit\r\nimport Charts\r\n\r\nclass ViewController: UIViewController {\r\n\r\n    @IBOutlet private weak var pieView: PieChartView!\r\n    \r\n    \r\n    override func viewDidLoad() {\r\n        super.viewDidLoad()\r\n        setupPieChart()\r\n        \r\n    }\r\n    \r\n        func setupPieChart(){\r\n            pieView.drawHoleEnabled = false\r\n            pieView.rotationAngle = 0\r\n            pieView.rotationEnabled = false\r\n            pieView.drawSlicesUnderHoleEnabled = true\r\n            pieView.drawEntryLabelsEnabled = false\r\n            pieView.usePercentValuesEnabled = true\r\n            pieView.highlightPerTapEnabled = false\r\n            pieView.legend.enabled = false\r\n            pieView.holeRadiusPercent = 100\r\n            pieView.setExtraOffsets(left: 5, top: 0, right: 5, bottom: 0)\r\n            \r\n            var entries : [PieChartDataEntry] = Array()\r\n            entries.append(PieChartDataEntry(value:  70))\r\n            entries.append(PieChartDataEntry(value: 30))\r\n            \r\n            let dataSet = PieChartDataSet(entries: entries, label : "")\r\n            dataSet.sliceSpace = 0\r\n            dataSet.yValuePosition = .outsideSlice\r\n            dataSet.xValuePosition = .outsideSlice\r\n            \r\n            let x_pie_color = NSUIColor(hex: 0xEAE2F2)\r\n            let c_pie_color = NSUIColor(hex: 0xA87EC9)\r\n            let x_text_color = NSUIColor(hex: 0x4a0ca0)\r\n            let c_text_color = NSUIColor(hex: 0xAAFFFF)\r\n            let value_line_color = NSUIColor(hex: 0xCCCFFF)\r\n            \r\n            dataSet.colors = [x_pie_color, c_pie_color]\r\n            dataSet.valueColors =  [x_text_color, c_text_color]\r\n            let pFormatter = NumberFormatter()\r\n            pFormatter.numberStyle = .percent\r\n            pFormatter.maximumFractionDigits = 1\r\n            pFormatter.multiplier = 1\r\n            pFormatter.percentSymbol = "%"\r\n            dataSet.valueFormatter = DefaultValueFormatter(formatter: pFormatter)\r\n            \r\n            dataSet.valueFont = NSUIFont(name: "HelveticaNeue-Medium", size: CGFloat(18.0))!\r\n            dataSet.drawValuesEnabled = true\r\n            dataSet.selectionShift = 0\r\n            dataSet.valueLinePart1Length = 0.5\r\n            dataSet.valueLinePart2Length = 0.5\r\n            dataSet.valueLineColor = value_line_color\r\n            pieView.data = PieChartData(dataSet: dataSet)\r\n        }\r\n}\r\n\r\n<\/pre><\/div>\r\n\r\n\r\n
Burada entries.append() k\u0131sm\u0131na verilerimizi ekleyebiliriz. dataSet.colors ve dataSet.valueColors’a s\u0131ras\u0131yla append ettiklerimizin renklerini verebiliriz.<\/p>\r\n\r\n\r\n\r\n
pFormatter.percentSybol ile y\u00fczde i\u015fareti verdim.<\/p>\r\n\r\n\r\n\r\n
let x_pie_color ve di\u011ferleriyle hex kodu ile NSUIColor rengi olu\u015fturup tan\u0131mlayabilirsiniz.<\/p>\r\n\r\n\r\n\r\n
Ancak b\u00f6yle yapt\u0131\u011f\u0131m\u0131zda y\u00fczdeleri d\u0131\u015far\u0131 yazd\u0131raca\u011f\u0131z. \u00c7\u00fcnk\u00fc a\u015fa\u011f\u0131daki k\u0131s\u0131m ile d\u0131\u015far\u0131da g\u00f6sterilmesini sa\u011fl\u0131yoruz.<\/p>\r\n\r\n\r\n
\r\n        dataSet.yValuePosition = .outsideSlice\r\n        dataSet.xValuePosition = .outsideSlice\r\n<\/pre><\/div>\r\n\r\n\r\n
\"\"<\/figure>\r\n\r\n\r\n\r\n
\u0130\u00e7eride y\u00fczdeleri yazd\u0131rmak i\u00e7in ise a\u015fa\u011f\u0131daki gibi g\u00fcncellemelisiniz.<\/p>\r\n\r\n\r\n
\r\n        dataSet.yValuePosition = .insideSlice\r\n        dataSet.xValuePosition = .insideSlice\r\n<\/pre><\/div>\r\n\r\n\r\n
\"\"<\/figure>\r\n\r\n\r\n\r\n
\u0130\u00e7erisine label eklemek i\u00e7in ise a\u015fa\u011f\u0131daki gibi drawEntryLabelsEnabled’\u0131 true yapmam\u0131z ve entries’e append etti\u011fimiz PieChartDataEntry’e label de\u011ferini eklememiz gerekiyor.<\/p>\r\n\r\n\r\n
\r\n        pieView.drawEntryLabelsEnabled = true\r\n        entries.append(PieChartDataEntry(value:  70, label: "70 i\u00e7in label"))\r\n        entries.append(PieChartDataEntry(value: 30, label: "30 i\u00e7in label"))\r\n<\/pre><\/div>\r\n\r\n\r\n
\"\"<\/figure>\r\n\r\n\r\n\r\n
E\u011fer i\u00e7erisine spacing eklemek isterseniz<\/p>\r\n\r\n\r\n
\r\n        dataSet.sliceSpace = 5\r\n<\/pre><\/div>\r\n\r\n\r\n
veya istedi\u011finiz bir boyutta se\u00e7ebilirsiniz. Sonucu a\u015fa\u011f\u0131daki gibi olacakt\u0131r.<\/p>\r\n\r\n\r\n\r\n
\"\"<\/figure>\r\n\r\n\r\n\r\n
Olabildi\u011fince k\u0131sa bi\u00e7imde kullan\u0131m\u0131n\u0131 anlatt\u0131m. Tak\u0131ld\u0131\u011f\u0131n\u0131z veya de\u011fi\u015fmesini istedi\u011finiz bir yer olursa buradan mail atabilir, destek alabilirsiniz.<\/p>\r\n\r\n\r\n","protected":false},"excerpt":{"rendered":"
Selamlar, Swift ile UIKit arac\u0131l\u0131\u011f\u0131la yapt\u0131\u011f\u0131m\u0131z bir proje i\u00e7erisinde Pie Chart – Pasta Grafi\u011fi ihtiyac\u0131 s\u0131ras\u0131nda gelen verilere g\u00f6re y\u00fczdelik…<\/p>\n","protected":false},"author":1,"featured_media":3500,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","footnotes":""},"categories":[1,160,232,155],"tags":[],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/furkansandal.com\/wp-content\/uploads\/2020\/09\/image-3.png?fit=766%2C818&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6BM7I-Uh","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/furkansandal.com\/wp-json\/wp\/v2\/posts\/3489"}],"collection":[{"href":"https:\/\/furkansandal.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/furkansandal.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/furkansandal.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/furkansandal.com\/wp-json\/wp\/v2\/comments?post=3489"}],"version-history":[{"count":10,"href":"https:\/\/furkansandal.com\/wp-json\/wp\/v2\/posts\/3489\/revisions"}],"predecessor-version":[{"id":3892,"href":"https:\/\/furkansandal.com\/wp-json\/wp\/v2\/posts\/3489\/revisions\/3892"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/furkansandal.com\/wp-json\/wp\/v2\/media\/3500"}],"wp:attachment":[{"href":"https:\/\/furkansandal.com\/wp-json\/wp\/v2\/media?parent=3489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/furkansandal.com\/wp-json\/wp\/v2\/categories?post=3489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/furkansandal.com\/wp-json\/wp\/v2\/tags?post=3489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}