iOS-Charts的使用
填充数据
定义了表格的基本属性之后我们就要填充数据了。在这里我仅以折线图表为例。
我们先介绍两个概念:set和data,LineChartData就是折线图的data类，它可以由很多组set组成，一组就是一条折线。因此我们可以定义set的属性，从而绘制各种各样的折线。示例如下:
//是否绘制图标
set1.drawIconsEnabled = NO;
//折线颜色
[set1 setColor:UIColor.blackColor];
//折线点的颜色
[set1 setCircleColor:UIColor.blackColor];
//折线的宽度
set1.lineWidth = 1.0;
//折线点的宽度
set1.circleRadius = 3.0;
//是否画空心圆
set1.drawCircleHoleEnabled = NO;
//折线点的值的大小
set1.valueFont = [UIFont systemFontOfSize:9.f];
//图例的线宽
set1.formLineWidth = 1.0;
//图例的字体大小
set1.formSize = 15.0;
下面具体介绍如何填充数据:
//定义一个数组承接数据
//对应Y轴上面需要显示的数据
NSMutableArray *yVals = [[NSMutableArray alloc] init];
for (int i = 0; i < self.financeLineDotDataList.count; i++) {
BTCTrenddata *dotData = (BTCTrenddata *)[self.financeLineDotDataList objectAtIndex:i];
//将横纵坐标以ChartDataEntry的形式保存下来，注意横坐标值一般是i的值，而不是你的数据 //里面具体的值，如何将具体数据展示在X轴上我们下面将会说到。
ChartDataEntry *entry = [[ChartDataEntry alloc] initWithX:i y:dotData.price];
[yVals addObject:entry];
}
LineChartDataSet *set1 = nil;
//请注意这里，如果你的图表以前绘制过，那么这里直接重新给data赋值就行了。
//如果没有，那么要先定义set的属性。
if (self.financeLineChartsView.data.dataSetCount > 0) {
LineChartData *data = (LineChartData *)self.financeLineChartsView.data;
set1 = (LineChartDataSet *)data.dataSets[0];
// set1.yVals = yVals;
set1 = (LineChartDataSet *)self.financeLineChartsView.data.dataSets[0];
set1.values = yVals;
//通知data去更新
[self.financeLineChartsView.data notifyDataChanged];
//通知图表去更新
[self.financeLineChartsView notifyDataSetChanged];
}else{
//创建LineChartDataSet对象
set1 = [[LineChartDataSet alloc] initWithValues:yVals];
//自定义set的各种属性
//设置折线的样式
set1.drawIconsEnabled = NO;
set1.formLineWidth = 1.1;//折线宽度
set1.formSize = 15.0;
set1.drawValuesEnabled = YES;//是否在拐点处显示数据
set1.valueColors = @[[UIColor whiteColor]];//折线拐点处显示数据的颜色
[set1 setColor:RGBCOLOR(248, 144, 28)];//折线颜色
//折线拐点样式
set1.drawCirclesEnabled = NO;//是否绘制拐点
//第二种填充样式:渐变填充
set1.drawFilledEnabled = YES;//是否填充颜色
NSArray *gradientColors = @[(id)RGBACOLOR(218,168,42,0).CGColor,
(id)RGBACOLOR(248,223,91,1).CGColor];
CGGradientRef gradientRef = CGGradientCreateWithColors(nil, (CFArrayRef)gradientColors, nil);
set1.fillAlpha = 1.0f;//透明度
set1.fill = [ChartFill fillWithLinearGradient:gradientRef angle:90.0f];//赋值填充颜色对象
CGGradientRelease(gradientRef);//释放gradientRef
//点击选中拐点的交互样式
set1.highlightEnabled = YES;//选中拐点,是否开启高亮效果(显示十字线)
set1.highlightColor = RGBCOLOR(125, 125, 125);//点击选中拐点的十字线的颜色
set1.highlightLineWidth = 1.1/[UIScreen mainScreen].scale;//十字线宽度
set1.highlightLineDashLengths = @[@5, @5];//十字线的虚线样式
//将 LineChartDataSet 对象放入数组中
NSMutableArray *dataSets = [[NSMutableArray alloc] init];
[dataSets addObject:set1];
//创建 LineChartData 对象, 此对象就是lineChartView需要最终数据对象
LineChartData *data = [[LineChartData alloc] initWithDataSets:dataSets];
[data setValueFont:[UIFont systemFontOfSize:8.f]];//文字字体
[data setValueTextColor:[UIColor whiteColor]];//文字颜色
self.financeLineChartsView.data = data;
//这里可以调用一个加载动画即1s出来一个绘制点
[self.financeLineChartsView animateWithXAxisDuration:1.0f];
}
以上就是填充数据的基本方法。到这里，大家就已经掌握了用charts绘制图表的基本方法了。下面我们来看一下一些比较难的用法。
重难点解析
需求一:两个表格联动，即拖拽或者一个，另一个需要跟着动。
这个需求可以用协议解决:
- (void)chartScaled:(ChartViewBase *)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY {
CGAffineTransform srcMatrix = chartView.viewPortHandler.touchMatrix;
[self.combinedChartView.viewPortHandler refreshWithNewMatrix:srcMatrix chart:self.combinedChartView invalidate:YES];
[self.barChartView.viewPortHandler refreshWithNewMatrix:srcMatrix chart:self.barChartView invalidate:YES];
}
- (void)chartTranslated:(ChartViewBase *)chartView dX:(CGFloat)dX dY:(CGFloat)dY {
CGAffineTransform srcMatrix = chartView.viewPortHandler.touchMatrix;
[self.combinedChartView.viewPortHandler refreshWithNewMatrix:srcMatrix chart:self.combinedChartView invalidate:YES];
[self.barChartView.viewPortHandler refreshWithNewMatrix:srcMatrix chart:self.barChartView invalidate:YES];
}
需求二：在一个图表上绘制多种类型的线表，例如K线图+柱状图
这个需求会用到另一个ChartView类型:CombinedChartView
CombinedChartData *combinedData = [[CombinedChartData alloc] init];
combinedData.lineData = [self generateLineData];
combinedData.candleData = [self generateCandleData];
需求三：希望在X轴上显示出具体的数值
我刚才说过，绘制表格的时候X值是i的值，即从0到i，那么我们如何显示服务器给我们的X值呢？这里需要引入一个协议:IChartAxisValueFormatter,声明一个NSObject类，如BTCDepthXAxisFormatter遵循IChartAxisValueFormatter协议，重写-(NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis方法，然后进行赋值，xAxis.valueFormatter = [[BTCDepthXAxisFormatter alloc] init]即可。
至此，iOS-Charts的基本用法就介绍完了，如果还有不理解的问题，可以加我的微信(justlikeitRobert)，欢迎Star，作为对我码字的鼓励与奖赏。
原文链接：http://www.cocoachina.com/ios/20180209/22232.html