本文为ORCharts:环形图、饼状图、扇形图部分，做详细说明

效果预览

Ring.png

Config

安装

pod 'ORCharts/Ring'

使用

Use Interface Builder

1、在XIB或Storyboard拖拽一个 UIView 到你需要展示的位置
2、修改Class为 ORRingChartView
3、设置 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  *)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

配置修改方式

_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

ORCharts:环形图、饼状图、扇形图

相关连接