可定制性较强，使用简单的 环形图、饼状图、扇形图

• 效果预览

  
  

写在前面

---

很久没有更新文章了，最近一年 996，前段时间偶感风寒，差点就进ICU了(手动笑脸)。各位还在深夜狂撸代码的老铁们一定要注意身体啊。

• swfit 版本预计下月更新 （预计...）

• 2019-06-12

ORRingChartView

---

ORRingChartView 集环形图、饼状图、扇形图（似乎与传统扇形有所偏差，只是一个名字啦）于一身，通过style对应设置即可。数据方面，一个中心视图展示总体信息，每一个数据支持设置填充色、线条色，以及最多两个视图展示详细信息。基本上满足大部分此类图表的功能需求。
使用上，类似于tableview 通过dataSource代理配置数据。config 配置图标属性，具体配置和使用见本文以及Demo

• ORRingChartView相关属性图解

  
  view.png

使用及配置

---

具体使用及配置方式 参考 Demo, 下文 针对代理及配置项 做简要说明

• 基础代码

  ORRingChartView *ringView = [ORRingChartView new];
  ringView.dataSource = self;

  //datasource method
  - (NSInteger)numberOfRingsOfChartView:(ORRingChartView *)chartView {
      return _datasource.count;
  }

  - (CGFloat)chartView:(ORRingChartView *)chartView valueAtRingIndex:(NSInteger)index {
      return [_datasource[index] floatValue];
  }

• style

  ORRingChartStyleRing：环形图（默认）
  ORRingChartStylePie：饼状图
  ORRingChartStyleFan：扇形图

    _ringChart.style = ORRingChartStylePie;

• dataSource - ORRingChartViewDatasource

必须实现方法numberOfRingsOfChartView: 及 chartView: valueAtRingIndex:
graidentColors：默认为随机色
ringLineColor：默认为白色
infoLineColor：默认为graidentColors的第一个颜色
centerView：默认无，将展示在最外层，必须设置视图大小
topInfoView：默认无，必须设置视图大小
bottomInfoView：默认无，必须设置视图大小

@protocol ORRingChartViewDatasource <NSObject>

@required

//return the number of values.
- (NSInteger)numberOfRingsOfChartView:(ORRingChartView *)chartView;

//return the value at index
- (CGFloat)chartView:(ORRingChartView *)chartView valueAtRingIndex:(NSInteger)index;

@optional

//return the graident colors at index
- (NSArray <UIColor *> *)chartView:(ORRingChartView *)chartView graidentColorsAtRingIndex:(NSInteger)index;

//return the ring line color at index
- (UIColor *)chartView:(ORRingChartView *)chartView lineColorForRingAtRingIndex:(NSInteger)index;

//return the info line color at index
- (UIColor *)chartView:(ORRingChartView *)chartView lineColorForInfoLineAtRingIndex:(NSInteger)index;

//return the centerView. The view will be displayed on the top layer, you need to set the bounds
- (UIView *)viewForRingCenterOfChartView:(ORRingChartView *)chartView;

//return the top info view. you need to set the bounds
- (UIView *)chartView:(ORRingChartView *)chartView viewForTopInfoAtRingIndex:(NSInteger)index;

//return the bottom info view. you need to set the bounds
- (UIView *)chartView:(ORRingChartView *)chartView viewForBottomInfoAtRingIndex:(NSInteger)index;

@end

• 配置（可定制性）

使用

    _ringChart.config.clockwise = YES;

• 总体配置说明

clockwise：图标绘制方向 顺时针、逆时针，默认 顺时针
animateDuration：动画时长 ，设置0，则没有动画，默认1
neatInfoLine：infoLine 两边对齐、等宽，默认 等宽
startAngle：图标绘制起始角度，默认 M_PI * 3 / 2
ringLineWidth：ringLine宽度，默认2
infoLineWidth：infoLine宽度，默认2

//The direction in chart.  
@property (nonatomic, assign) BOOL clockwise;

//The duration of animation, If set to 0, there is no animation. default 1
@property (nonatomic, assign) NSTimeInterval animateDuration;

//neatInfoLine. if YES infoLines alignment chartview, if NO infoLines has same width. default NO
@property (nonatomic, assign) BOOL neatInfoLine;

//The starting angle of the chart. default M_PI * 3 / 2
@property (nonatomic, assign) CGFloat startAngle;

//ringLine width. default 2
@property (nonatomic, assign) CGFloat ringLineWidth;

//infoLine width. default 2
@property (nonatomic, assign) CGFloat infoLineWidth;

• 偏移、边距配置

minInfoInset：infoView的偏移，值越大，infoView越宽，默认0
infoLineMargin：infoLine 至 周边 的距离，默认10
infoLineInMargin：infoLine 至 环形图的距离，默认 10
infoLineBreakMargin：infoLine折线距离，默认 15
infoViewMargin：infoLine 至 infoView的距离，默认5

//minInset Of infoView. This value will make the infoView show wider. default 0
@property (nonatomic, assign) CGFloat minInfoInset;

//the margin between infoline and chartView. default 10
@property (nonatomic, assign) CGFloat infoLineMargin;

//the margin between infoline and inner circle. default 10
@property (nonatomic, assign) CGFloat infoLineInMargin;

//distance from the turning point to the infoline. default 15
@property (nonatomic, assign) CGFloat infoLineBreakMargin;

//the margin between infoView and infoView. default 5
@property (nonatomic, assign) CGFloat infoViewMargin;

• 其他配置

pointWidth：infoline 末尾圆点宽度，默认 5
ringWidth：环形图，圆环宽度， 如果设置了 centerView 则无效，默认60

//infoline pointWidth default 5
@property (nonatomic, assign) CGFloat pointWidth;

/*
 * if _dataSource responds To Selector 'viewForRingCenterOfChartView:' OR style != ORChartStyleRing. This value will be invalid
 */
@property (nonatomic, assign) CGFloat ringWidth;

文末

GitHub传送门
有任何问题，请在本文下方评论，或是GitHub上提出issue
如有可取之处， 记得 star

转载请注明出处

完