iOS绘制折线图、树状图等图形

项目中需要将数据以折线的形式展示出来,于是乎在网上找了一大堆相关资料,最后觉得还是PNChart这个第三方库可以满足我的需求,并且不是很有难度
1、首先下载PNChart(俩种方法,cocoapods和直接下载导入)
pod search PNChart之后我们直接下载最新的0.8.8版本就可以,
2、将PNChart.h和PNChartDelegate.h头文件引入需要用的类里面
3、直接上代码了。。。
(1)属性
@property (nonatomic, strong)PNLineChart *lineChart;//折线
@property (nonatomic, strong)PNBarChart *barChart;//柱状
@property (nonatomic, strong)PNCircleChart * circleChart; //圆形状态
@property (nonatomic, strong)PNPieChart *pieChart; //饼状图
@property (nonatomic, strong)PNScatterChart *scatterChart; //浮点型
@property (nonatomic, strong)PNRadarChart *radarChart; //雷达状

(2)方法
- (void)initWithChart //绘制折线图
{

 self.lineChart = [[PNLineChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 200.0)];
self.lineChart.yLabelFormat = @"%1.1f";
self.lineChart.backgroundColor = [UIColor clearColor];
[self.lineChart setXLabels:@[@"SEP 1",@"SEP 2",@"SEP 3",@"SEP 4",@"SEP 5",@"SEP 6",@"SEP 7"]];

//控制是否显示坐标轴。默认为无
self.lineChart.showCoordinateAxis = YES;

//当需要最大值时候使用yFixedValueMax和yFixedValueMin来确定最大值和最小值
self.lineChart.yFixedValueMax = 300.0;
self.lineChart.yFixedValueMin = 0.0;
//设置Y轴坐标
[self.lineChart setYLabels:@[
                             @"0 min",
                             @"50 min",
                             @"100 min",
                             @"150 min",
                             @"200 min",
                             @"250 min",
                             @"300 min",
                             ]
 ];

// 线条1
NSArray * data01Array = @[@60.1, @160.1, @126.4, @0.0, @186.2, @127.2, @176.2];
PNLineChartData *data01 = [PNLineChartData new];
data01.dataTitle = @"本期";
data01.color = PNFreshGreen;
data01.alpha = 0.3f;
data01.itemCount = data01Array.count;
data01.inflexionPointStyle = PNLineChartPointStyleTriangle;
data01.getData = ^(NSUInteger index) {
    CGFloat yValue = [data01Array[index] floatValue];
    return [PNLineChartDataItem dataItemWithY:yValue];
};

// 线条2
NSArray * data02Array = @[@0.0, @180.1, @26.4, @202.2, @126.2, @167.2, @276.2];
PNLineChartData *data02 = [PNLineChartData new];
data02.dataTitle = @"上期";
data02.color = PNTwitterColor;
data02.alpha = 0.5f;
data02.itemCount = data02Array.count;
data02.inflexionPointStyle = PNLineChartPointStyleCircle;
data02.getData = ^(NSUInteger index) {
    CGFloat yValue = [data02Array[index] floatValue];
    return [PNLineChartDataItem dataItemWithY:yValue];
};

self.lineChart.chartData = @[data01, data02];
[self.lineChart strokeChart];
self.lineChart.delegate = self;
[self.view addSubview:self.lineChart];

self.lineChart.legendStyle = PNLegendItemStyleStacked;
self.lineChart.legendFont = [UIFont boldSystemFontOfSize:12.0f];
self.lineChart.legendFontColor = [UIColor redColor];

UIView *legend = [self.lineChart getLegendWithMaxWidth:320];
[legend setFrame:CGRectMake(30, 340, legend.frame.size.width, legend.frame.size.width)];
[self.view addSubview:legend];

}

-(void)initWithBarChart //绘制柱状图
{

 static NSNumberFormatter *barChartFormatter;
if (!barChartFormatter){
    barChartFormatter = [[NSNumberFormatter alloc] init];
    barChartFormatter.numberStyle = NSNumberFormatterCurrencyStyle;
    barChartFormatter.allowsFloats = NO;
    barChartFormatter.maximumFractionDigits = 0;
}    
self.barChart = [[PNBarChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 200.0)];
self.barChart.backgroundColor = [UIColor clearColor];
self.barChart.yLabelFormatter = ^(CGFloat yValue){
    return [barChartFormatter stringFromNumber:[NSNumber numberWithFloat:yValue]];
};

self.barChart.yChartLabelWidth = 20.0;
self.barChart.chartMarginLeft = 30.0;
self.barChart.chartMarginRight = 10.0;
self.barChart.chartMarginTop = 5.0;
self.barChart.chartMarginBottom = 10.0;
self.barChart.labelMarginTop = 5.0;
self.barChart.showChartBorder = YES;
[self.barChart setXLabels:@[@"2",@"3",@"4",@"5",@"2",@"3",@"4",@"5"]];
[self.barChart setYValues:@[@10.82,@1.88,@6.96,@33.93,@10.82,@1.88,@6.96,@33.93]];
[self.barChart setStrokeColors:@[PNGreen,PNLightBlue,PNRed,PNMauve,PNBrown,PNYellow,PNDarkBlue,PNBlue]];
//是否显示梯度棒
self.barChart.isGradientShow = NO;
//是否显示数字
self.barChart.isShowNumbers = NO;

[self.barChart strokeChart];

self.barChart.delegate = self;

[self.view addSubview:self.barChart];

}

//圆圈⭕️
- (void)initWithCircleChart
{

self.circleChart = [[PNCircleChart alloc] initWithFrame:CGRectMake(0,150.0, SCREEN_WIDTH, 100.0)
                                                  total:@100
                                                current:@60
                                              clockwise:YES];

self.circleChart.backgroundColor = [UIColor clearColor];

[self.circleChart setStrokeColor:[UIColor clearColor]];
[self.circleChart setStrokeColorGradientStart:[UIColor blueColor]];
[self.circleChart strokeChart];

[self.view addSubview:self.circleChart];

}

//饼状图
- (void)initWithPieChart

NSArray *items = @[[PNPieChartDataItem dataItemWithValue:20 color:PNFreshGreen description:@"WWDC"],
                   [PNPieChartDataItem dataItemWithValue:15 color:PNDeepGreen description:@"GOOG I/O"],
                   [PNPieChartDataItem dataItemWithValue:40 color:PNLightGreen description:@"Google"],
                   [PNPieChartDataItem dataItemWithValue:15 color:PNLightBlue description:@"Baibu"],
                   [PNPieChartDataItem dataItemWithValue:10 color:PNLightYellow description:@"AliPay"]];

self.pieChart = [[PNPieChart alloc] initWithFrame:CGRectMake(SCREEN_WIDTH /2.0 - 100, 135, 200.0, 200.0) items:items];
self.pieChart.descriptionTextColor = [UIColor whiteColor];
self.pieChart.descriptionTextFont  = [UIFont fontWithName:@"Avenir-Medium" size:11.0];
self.pieChart.descriptionTextShadowColor = [UIColor clearColor];
self.pieChart.showAbsoluteValues = NO;
self.pieChart.showOnlyValues = NO;
[self.pieChart strokeChart];


self.pieChart.legendStyle = PNLegendItemStyleStacked;
self.pieChart.legendFont = [UIFont boldSystemFontOfSize:12.0f];

UIView *legend = [self.pieChart getLegendWithMaxWidth:200];
[legend setFrame:CGRectMake(130, 350, legend.frame.size.width, legend.frame.size.height)];
[self.view addSubview:legend];

[self.view addSubview:self.pieChart];

}

//浮点状
- (void)initWithScatterChart
{

self.scatterChart = [[PNScatterChart alloc] initWithFrame:CGRectMake(SCREEN_WIDTH /6.0 - 30, 135, 280, 200)];
[self.scatterChart setAxisXWithMinimumValue:20 andMaxValue:100 toTicks:6];
[self.scatterChart setAxisYWithMinimumValue:30 andMaxValue:50 toTicks:5];
[self.scatterChart setAxisXLabel:@[@"x1", @"x2", @"x3", @"x4", @"x5", @"x6"]];
[self.scatterChart setAxisYLabel:@[@"y1", @"y2", @"y3", @"y4", @"y5"]];

NSArray * data01Array = [self randomSetOfObjects];
PNScatterChartData *data01 = [PNScatterChartData new];
data01.strokeColor = PNGreen;
data01.fillColor = PNFreshGreen;
data01.size = 2;
data01.itemCount = [[data01Array objectAtIndex:0] count];
data01.inflexionPointStyle = PNScatterChartPointStyleCircle;
__block NSMutableArray *XAr1 = [NSMutableArray arrayWithArray:[data01Array objectAtIndex:0]];
__block NSMutableArray *YAr1 = [NSMutableArray arrayWithArray:[data01Array objectAtIndex:1]];

data01.getData = ^(NSUInteger index) {
    CGFloat xValue = [[XAr1 objectAtIndex:index] floatValue];
    CGFloat yValue = [[YAr1 objectAtIndex:index] floatValue];
    return [PNScatterChartDataItem dataItemWithX:xValue AndWithY:yValue];
};

[self.scatterChart setup];
self.scatterChart.chartData = @[data01];

self.scatterChart.delegate = self;
[self.view addSubview:self.scatterChart];

}

//雷达状
- (void)initWithRadarChart
{

NSArray *items = @[[PNRadarChartDataItem dataItemWithValue:3 description:@"Art"],
                   [PNRadarChartDataItem dataItemWithValue:2 description:@"Math"],
                   [PNRadarChartDataItem dataItemWithValue:8 description:@"Sports"],
                   [PNRadarChartDataItem dataItemWithValue:5 description:@"Literature"],
                   [PNRadarChartDataItem dataItemWithValue:4 description:@"Other"],
                   ];
self.radarChart = [[PNRadarChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 300.0) items:items valueDivider:1];
[self.radarChart strokeChart];

[self.view addSubview:self.radarChart];

}

-(NSArray *) randomSetOfObjects
{

NSMutableArray *array = [NSMutableArray array];
NSString *LabelFormat = @"%1.f";
NSMutableArray *XAr = [NSMutableArray array];
NSMutableArray *YAr = [NSMutableArray array];
for (int i = 0; i < 25 ; i++) {
    [XAr addObject:[NSString stringWithFormat:LabelFormat,(((double)arc4random() / ARC4RANDOM_MAX) * (self.scatterChart.AxisX_maxValue - self.scatterChart.AxisX_minValue) + self.scatterChart.AxisX_minValue)]];
    [YAr addObject:[NSString stringWithFormat:LabelFormat,(((double)arc4random() / ARC4RANDOM_MAX) * (self.scatterChart.AxisY_maxValue - self.scatterChart.AxisY_minValue) + self.scatterChart.AxisY_minValue)]];
}
[array addObject:XAr];
[array addObject:YAr];
return (NSArray*) array;

}

以上分别是:折线图、柱状图、圆圈、饼状图、浮点图和雷达图,都是用PNChart实现的,如果有问题希望我们可以共同交流

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值