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