iOS使用Charts框架绘制折线图

除了可以用以上这些属性来设置样式以外, 还有其它很多属性, 可以自行尝试. 由于以上这些属性较简单, 从属性名就可以看出其含义, 而且在代码后面也大都有注释, 在这里就不对这些属性作一一解释了.

三、为折线图提供数据

为折线图提供数据, 和柱形图差不多, 唯一不同的是设置折线图的折线线条样式, 在设置线条样式时, 我们可以设置折线的类型, 有阶梯类型和一般类型. 我们也可以设置折线拐点的样式, 拐点的大小, 拐点是否可以是空心类型等. 此外还可以对折线图进行颜色填充, 以此来美化图表. 由于样式太多, 在这里就不多说了, 直接看代码:

- (LineChartData *)setData{
 int xVals_count = 12;//X轴上要显示多少条数据
 double maxYVal = 100;//Y轴的最大值
 //X轴上面需要显示的数据
 NSMutableArray *xVals = [[NSMutableArray alloc] init];
 for (int i = 0; i < xVals_count; i++) {
 [xVals addObject:[NSString stringWithFormat:@"%d月", i+1]];
 }
 //对应Y轴上面需要显示的数据
 NSMutableArray *yVals = [[NSMutableArray alloc] init];
 for (int i = 0; i < xVals_count; i++) {
 double mult = maxYVal + 1;
 double val = (double)(arc4random_uniform(mult));
 ChartDataEntry *entry = [[ChartDataEntry alloc] initWithValue:val xIndex:i];
 [yVals addObject:entry];
 }
 LineChartDataSet *set1 = nil;
 if (self.LineChartView.data.dataSetCount > 0) {
 LineChartData *data = (LineChartData *)self.LineChartView.data;
 set1 = (LineChartDataSet *)data.dataSets[0];
 set1.yVals = yVals;
 return data;
 }else{
 //创建LineChartDataSet对象
 set1 = [[LineChartDataSet alloc] initWithYVals:yVals label:@"lineName"];
 //设置折线的样式
 set1.lineWidth = 1.0/[UIScreen mainScreen].scale;//折线宽度
 set1.drawValuesEnabled = YES;//是否在拐点处显示数据
 set1.valueColors = @[[UIColor brownColor]];//折线拐点处显示数据的颜色
 [set1 setColor:[self colorWithHexString:@"#007FFF"]];//折线颜色
 set1.drawSteppedEnabled = NO;//是否开启绘制阶梯样式的折线图
 //折线拐点样式
 set1.drawCirclesEnabled = NO;//是否绘制拐点
 set1.circleRadius = 4.0f;//拐点半径
 set1.circleColors = @[[UIColor redColor], [UIColor greenColor]];//拐点颜色
 //拐点中间的空心样式
 set1.drawCircleHoleEnabled = YES;//是否绘制中间的空心
 set1.circleHoleRadius = 2.0f;//空心的半径
 set1.circleHoleColor = [UIColor blackColor];//空心的颜色
 //折线的颜色填充样式
 //第一种填充样式:单色填充
// set1.drawFilledEnabled = YES;//是否填充颜色
// set1.fillColor = [UIColor redColor];//填充颜色
// set1.fillAlpha = 0.3;//填充颜色的透明度
 //第二种填充样式:渐变填充
 set1.drawFilledEnabled = YES;//是否填充颜色
 NSArray *gradientColors = @[(id)[ChartColorTemplates colorFromString:@"#FFFFFFFF"].CGColor,
     (id)[ChartColorTemplates colorFromString:@"#FF007FFF"].CGColor];
 CGGradientRef gradientRef = CGGradientCreateWithColors(nil, (CFArrayRef)gradientColors, nil);
 set1.fillAlpha = 0.3f;//透明度
 set1.fill = [ChartFill fillWithLinearGradient:gradientRef angle:90.0f];//赋值填充颜色对象
 CGGradientRelease(gradientRef);//释放gradientRef
 //点击选中拐点的交互样式
 set1.highlightEnabled = YES;//选中拐点,是否开启高亮效果(显示十字线)
 set1.highlightColor = [self colorWithHexString:@"#c83c23"];//点击选中拐点的十字线的颜色
 set1.highlightLineWidth = 1.0/[UIScreen mainScreen].scale;//十字线宽度
 set1.highlightLineDashLengths = @[@5, @5];//十字线的虚线样式
 //将 LineChartDataSet 对象放入数组中
 NSMutableArray *dataSets = [[NSMutableArray alloc] init];
 [dataSets addObject:set1];
 //添加第二个LineChartDataSet对象
// LineChartDataSet *set2 = [set1 copy];
// NSMutableArray *yVals2 = [[NSMutableArray alloc] init];
// for (int i = 0; i < xVals_count; i++) {
//  double mult = maxYVal + 1;
//  double val = (double)(arc4random_uniform(mult));
//  ChartDataEntry *entry = [[ChartDataEntry alloc] initWithValue:val xIndex:i];
//  [yVals2 addObject:entry];
// }
// set2.yVals = yVals2;
// [set2 setColor:[UIColor redColor]];
// set2.drawFilledEnabled = YES;//是否填充颜色
// set2.fillColor = [UIColor redColor];//填充颜色
// set2.fillAlpha = 0.1;//填充颜色的透明度
// [dataSets addObject:set2];
 //创建 LineChartData 对象, 此对象就是lineChartView需要最终数据对象
 LineChartData *data = [[LineChartData alloc] initWithXVals:xVals dataSets:dataSets];
 [data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:8.f]];//文字字体
 [data setValueTextColor:[UIColor grayColor]];//文字颜色
 NSNumberFormatter *formatter = [[NSNumberFormatter alloc] init];
 //自定义数据显示格式
 [formatter setNumberStyle:NSNumberFormatterDecimalStyle];
 [formatter setPositiveFormat:@"#0.0"];
 [data setValueFormatter:formatter];
 return data;
 }
}								 
 2/3   首页 上一页 1 2 3 下一页 尾页