PNChart:一个简洁高效的 iOS 图表库

1,936 阅读2分钟
原文链接: www.jianshu.com

1.要求

PNChart 依赖于下列框架,在使用前请导入这些框架(ps:至于怎么导入,这里就不说了):

  • Foundation.framework
  • UIKit.framework
  • CoreGraphics.framework
  • QuartzCore.framework
    切记:这个框架依赖于第三方框架:UICountingLabel 请自行去github.com下载,并添加到这个框架中。

2.使用

2.1 折线图使用


折线图.png
PNLineChart * lineChart = [[PNLineChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 200.0)];
    // 设置x轴上坐标内容
    [lineChart setXLabels:@[@"1",@"2",@"3",@"4",@"5"]];
    // 设置好像没什么用
    lineChart.xLabelColor = [UIColor orangeColor];

    lineChart.showLabel = YES;
    // 是否显示Y轴的数值
    lineChart.showGenYLabels = YES;
    // 是否显示横向虚线
    lineChart.showYGridLines = YES;
    // 是否平滑的曲线
    lineChart.showSmoothLines = NO;
    // 是否显示xy 坐标轴
    lineChart.showCoordinateAxis = YES;
    // 轴的颜色
    lineChart.axisColor = [UIColor orangeColor];
    // 轴的宽度
    lineChart.axisWidth = 2.0f;

    NSLog(@"%f",lineChart.chartMarginLeft);

    //    lineChart.thousandsSeparator = YES;
    // 设置y轴坐标的颜色
    lineChart.yLabelColor = [UIColor redColor];

    // Line Chart No.1
    NSArray * data01Array = @[@60.1, @160.1, @126.4, @262.2, @186.2];
    PNLineChartData *data01 = [PNLineChartData new];
    data01.color = PNFreshGreen;
    data01.dataTitle = @"Hello World";
    // 设置点的格式
    data01.inflexionPointStyle = PNLineChartPointStyleCircle;
    data01.inflexionPointColor = [UIColor purpleColor];
    // 是否点label
    data01.showPointLabel = YES;
    data01.pointLabelColor = [UIColor redColor];
    data01.pointLabelFont = [UIFont systemFontOfSize:12];
    data01.pointLabelFormat = @"%1.1f";
    // 设置折线有几个值
    data01.itemCount = lineChart.xLabels.count;
    data01.getData = ^(NSUInteger index) {
        CGFloat yValue = [data01Array[index] floatValue];

        // 设置x轴坐标对应的y轴的值
        return [PNLineChartDataItem dataItemWithY:yValue];
    };
    // Line Chart No.2
    NSArray * data02Array = @[@20.1, @180.1, @26.4, @202.2, @126.2];
    PNLineChartData *data02 = [PNLineChartData new];
    data02.color = PNTwitterColor;
    data02.itemCount = lineChart.xLabels.count;
    data02.getData = ^(NSUInteger index) {
        CGFloat yValue = [data02Array[index] floatValue];
        return [PNLineChartDataItem dataItemWithY:yValue];
    };
    // 设置line的数据数组
    lineChart.chartData = @[data01, data02];
    // 绘制出来
    [lineChart strokeChart];

    [self.view addSubview:lineChart];

2.2 柱状图使用


柱状图.png
PNBarChart *barChart = [[PNBarChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 200.0)];
    // 是否显示xy 轴的数字
    barChart.showLabel = YES;
    // 是否显示水平线 但把柱子压低上移了
    //    barChart.showLevelLine = YES;
    //是否显示xy 轴
    barChart.showChartBorder = YES;
    // 是否显示柿子的数值
    barChart.isShowNumbers = YES;
    // 立体显示
    barChart.isGradientShow = YES;
    // 设置柱子的圆角
    barChart.barRadius = 5;
    // 设置bar color
    barChart.strokeColor = [UIColor redColor];

    barChart.xLabels = @[@"1",@"2",@"3",@"4",@"5"];

    barChart.yValues = @[@"2",@"4",@"1",@"10",@"9"];

    barChart.yLabelFormatter = ^ (CGFloat yLabelValue) {

        return [NSString stringWithFormat:@"%f",yLabelValue];
    };

    [barChart strokeChart];

    [self.view addSubview:barChart];

2.3 circle charet 使用


circle Chart.png
// 设置圆状图
    PNCircleChart *circleChart = [[PNCircleChart alloc]initWithFrame:CGRectMake(100, 50, 200, 200) total:@100 current:@10 clockwise:NO shadow:YES shadowColor:[UIColor grayColor] displayCountingLabel:YES overrideLineWidth:@15];

    circleChart.chartType = PNChartFormatTypePercent;
    circleChart.strokeColor = [UIColor greenColor];

    [circleChart strokeChart];

    [self.view addSubview:circleChart];

2.4 饼状图使用


饼状图.png
NSArray *items = @[[PNPieChartDataItem dataItemWithValue:30 color:PNBrown description:@"cat"],[PNPieChartDataItem dataItemWithValue:20 color:PNDarkBlue description:@"pig"], [PNPieChartDataItem dataItemWithValue:50 color:PNGrey description:@"dog"]];

    PNPieChart *pieChart = [[PNPieChart alloc] initWithFrame:CGRectMake(100, 100, 200, 200) items:items];

    pieChart.delegate = self;
    [pieChart strokeChart];
    // 加到父视图上
    [self.view addSubview:pieChart];

    // 显示图例
    pieChart.hasLegend = YES;
    // 横向显示
    pieChart.legendStyle = PNLegendItemStyleSerial;
    // 显示位置
    pieChart.legendPosition = PNLegendPositionTop;
    // 获得图例 当横向排布不下另起一行
    UIView *legend = [pieChart getLegendWithMaxWidth:100];
    legend.frame = CGRectMake(100, 300, legend.bounds.size.width, legend.bounds.size.height);
    [self.view addSubview:legend];