ORCharts:環形圖、餅狀圖、扇形圖

本文爲ORCharts:環形圖、餅狀圖、扇形圖 部分， 作詳細說明

相關鏈接

• GitHub
• ORCharts
• ORCharts:曲線圖、折線圖
  

效果預覽

---

安裝

---

pod 'ORCharts/Ring'  
複製代碼

使用

---

Use Interface Builder

一、 在XIB或Storyboard拖拽一個 UIView 到你須要展現的位置 二、 修改Class爲 ORRingChartView 三、 設置 dataSource

代碼

@property (nonatomic, strong) ORRingChartView *ringChartView;
複製代碼

_ringChartView = [[ORRingChartView alloc] initWithFrame:CGRectMake(0, 0, 375, 375)];
_ringChartView.dataSource = self;
[self.view addSubview:_ringChartView];
複製代碼

在數據改變或是配置改變的時候reloadData

[_ringChartView reloadData];
複製代碼

style

---

ORRingChartStyleRing：環形圖（默認） ORRingChartStylePie：餅狀圖 ORRingChartStyleFan：扇形圖

_ringChart.style = ORRingChartStylePie;
複製代碼

代理相關

---

ORRingChartViewDatasource

• @required 必須實現方法，數據個數以及對應數據，相似tableView

- (NSInteger)numberOfRingsOfChartView:(ORRingChartView *)chartView;
- (CGFloat)chartView:(ORRingChartView *)chartView valueAtRingIndex:(NSInteger)index;
複製代碼

• @optional 對應Index數據視圖的漸變色，默認爲隨機色

- (NSArray <UIColor *> *)chartView:(ORRingChartView *)chartView graidentColorsAtRingIndex:(NSInteger)index;
複製代碼

對應Index數據視圖的線條顏色，默認爲白色

- (UIColor *)chartView:(ORRingChartView *)chartView lineColorForRingAtRingIndex:(NSInteger)index;
複製代碼

對應Index數據的信息線條顏色，默認爲graidentColors的第一個顏色

- (UIColor *)chartView:(ORRingChartView *)chartView lineColorForInfoLineAtRingIndex:(NSInteger)index;
複製代碼

中心視圖，默認nil，返回的時候須要設置視圖大小

- (UIView *)viewForRingCenterOfChartView:(ORRingChartView *)chartView;
複製代碼

對應Index數據的頂部信息視圖，默認nil，返回的時候須要設置視圖大小

- (UIView *)chartView:(ORRingChartView *)chartView viewForTopInfoAtRingIndex:(NSInteger)index;
複製代碼

對應Index數據的底部信息視圖，默認nil，返回的時候須要設置視圖大小

- (UIView *)chartView:(ORRingChartView *)chartView viewForBottomInfoAtRingIndex:(NSInteger)index;
複製代碼

配置相關

---

如下是配置中部分屬性圖解

配置修改方式

_ringChart.config.neatInfoLine = YES;
_ringChart.config.ringLineWidth = 2;
_ringChart.config.animateDuration = 1;
[_ringChart reloadData];
複製代碼

如下爲配置具體說明

• 總體 clockwise：圖表繪製方向是否爲順時針，默認YES
  animateDuration：動畫時長 ，設置0，則沒有動畫，默認1
  neatInfoLine：infoLine 兩邊對齊、等寬，默認NO
  startAngle：圖表繪製起始角度，默認 M_PI * 3 / 2
  ringLineWidth：ringLine寬度，默認2
  infoLineWidth：infoLine寬度，默認2

• 偏移、邊距配置 minInfoInset：infoView的內容偏移，值越大，infoView越寬，默認0
  infoLineMargin：infoLine 至 周邊 的距離，默認10
  infoLineInMargin：infoLine 至 環形圖的距離，默認 10
  infoLineBreakMargin：infoLine折線距離，默認 15
  infoViewMargin：infoLine 至 infoView的距離，默認5

• 其餘 pointWidth：infoline 末尾圓點寬度，默認 5
  ringWidth：環形圖，圓環寬度， 若是設置了 centerView 則無效，默認60

文末

---

GitHub傳送門

有任何問題，可在本文下方評論，或是GitHub上提出issue 若有可取之處， 記得 star