Charts使用的经验总结

最近刚刚完成了一个关于基金的app,这里把最近的所得汇总一下,主要是一些平时工作没遇到的bug以及一些关于基金用的三方库的使用。

三方库Charts的导入

首先吧charts添加到你的项目下,并指定它的版本为3.2.0 【对应swift的4.2版本】

charts.png

然后在对应的文件夹下pod install 成功以后打开target,开始配置

1537329139944.jpg

而后新建一个swift文件,并生成一个桥接文件,在桥接文件中添加Charts即可

1537336207776.jpg
1537336294478.jpg

线性表格的绘制

charts中的表格有许多种,这里主要拿线表LineChartView来举个

首先需要准备X轴和Y轴的两个formatter 一般X轴是日期

DateValueFormatter.h

#import 
@import Charts;
@interface DateValueFormatter : NSObject
-(id)initWithArr:(NSArray *)arr;
@end

DateValueFormatter.m

#import "DateValueFormatter.h"

@interface DateValueFormatter()
{
    NSArray * _arr;
}
@end
@implementation DateValueFormatter
-(id)initWithArr:(NSArray *)arr{
    self = [super init];
    if (self)
    {
        _arr = arr;
        
    }
    return self;
}
- (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis
{
    return _arr[(NSInteger)value];
}


@end

SymbolsValueFormatter.h

#import 
@import Charts;
@interface SymbolsValueFormatter : NSObject

@end

SymbolsValueFormatter.m

#import "SymbolsValueFormatter.h"


@interface SymbolsValueFormatter()

@end

@implementation SymbolsValueFormatter

-(id)init{
    if (self = [super init]) {
        
    }
    return self;
}
//返回y轴的数据
- (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis
{
    
    return [NSString stringWithFormat:@"%.2f",(float)value];
}


@end

然后是关键的图标绘制VC

ViewController.m


#import "ViewController.h"
#import "SymbolsValueFormatter.h"
#import "DateValueFormatter.h"

@import Charts;

@interface ViewController ()

@property (nonatomic, strong) LineChartView *lineChartView;
@property (nonatomic, strong) NSArray *valueArray;

@property (nonatomic, strong) UILabel *showLabel;
@property (nonatomic, strong) NSMutableArray *turnovers;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    NSMutableArray *mArray = [NSMutableArray new];
    for (int i = 1; i < 30; i ++) {
        NSString *date = [NSString stringWithFormat:@"08-%d",i];
        NSDictionary *value = @{@"xLineValue":date,@"yValue1":@(i+1).stringValue,@"yValue2":@(i+6).stringValue};
        [mArray addObject:value];
    }
    _valueArray = mArray.copy;
    
    self.lineChartView = [[LineChartView alloc] initWithFrame:CGRectMake(0, 0, 300, 400)];
    self.lineChartView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:self.lineChartView];
    
    self.lineChartView.doubleTapToZoomEnabled = NO;//禁止双击缩放 有需要可以设置为YES
    self.lineChartView.gridBackgroundColor = [UIColor orangeColor];//表框以及表内线条的颜色以及隐藏设置 根据自己需要调整
    self.lineChartView.borderColor = [UIColor redColor];
    self.lineChartView.chartDescription.enabled = false;
    self.lineChartView.noDataText = @"暂无数据";
    self.lineChartView.dragEnabled = NO;
    [self.lineChartView setScaleEnabled:NO];
    self.lineChartView.pinchZoomEnabled = NO;
    self.lineChartView.highlightPerDragEnabled = true;
    self.lineChartView.highlightPerTapEnabled = true;
    self.lineChartView.backgroundColor = [UIColor whiteColor];
    self.lineChartView.legend.enabled = NO;
    self.lineChartView.delegate = self;
    //设置动画时间
    [self.lineChartView animateWithXAxisDuration:1];
    
    ChartXAxis *xAxis = self.lineChartView.xAxis;
    xAxis.labelPosition = XAxisLabelPositionBottom;
    xAxis.axisLineColor = [UIColor clearColor];
    xAxis.labelFont = [UIFont systemFontOfSize:11];
    xAxis.labelTextColor = [UIColor blackColor];
    xAxis.drawGridLinesEnabled = false;
    xAxis.granularity = 86400;
    [xAxis setLabelCount:3 force:true];
    xAxis.avoidFirstLastClippingEnabled = true;
    
    ChartYAxis *leftAxis = self.lineChartView.leftAxis;
    leftAxis.drawGridLinesEnabled = NO;
    leftAxis.labelFont = [UIFont systemFontOfSize:11];
    leftAxis.labelTextColor = [UIColor grayColor];
    leftAxis.valueFormatter = [[SymbolsValueFormatter alloc]init];
    leftAxis.axisLineColor = [UIColor clearColor];
    
    self.lineChartView.rightAxis.enabled = false;
    self.lineChartView.legend.form = 5;
    
    [self loadData];
    
    self.showLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 450, 300, 20)];
    [self.view addSubview:self.showLabel];
}

- (void)loadData{
    NSMutableArray *line1Array = [NSMutableArray new];
    NSMutableArray *line2Array = [NSMutableArray new];
    
    //用于存放多个折线数据的数组
    NSMutableArray *sets = [NSMutableArray array];
    
    //turnovers是用于存放模型的数组
    self.turnovers = [NSMutableArray array];
    //横轴数据
    NSMutableArray *xValues = [NSMutableArray array];
    //纵轴数据
    NSMutableArray *yValues1 = [NSMutableArray array];
    NSMutableArray *yValues2 = [NSMutableArray array];

    [_valueArray enumerateObjectsUsingBlock:^(NSDictionary * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        NSDictionary *dic = obj;

        [self.turnovers addObject:dic];
        [xValues addObject:dic[@"xLineValue"]];
        
        CGFloat a = [dic[@"yValue1"] floatValue];
        CGFloat b = [dic[@"yValue2"] floatValue];
        ChartDataEntry *entry1 = [[ChartDataEntry alloc] initWithX:idx y:a];
        ChartDataEntry *entry2 = [[ChartDataEntry alloc] initWithX:idx y:b];
        [yValues1 addObject:entry1];
        [yValues2 addObject:entry2];
    }];
    // 此处是用于处理只有一个点的情况。
    if (yValues1.count == 1) {
        ChartDataEntry *entry = yValues1[0];
        [yValues1 addObject:[[ChartDataEntry alloc] initWithX:entry.x + 1 y:entry.y]];
    }
    if (yValues2.count == 1) {
        ChartDataEntry *entry = yValues2[0];
        [yValues2 addObject:[[ChartDataEntry alloc] initWithX:entry.x + 1 y:entry.y]];
    }
    
    if (xValues.count == 1) {
        [xValues addObject:xValues[0]];
    }
    
    //设置横轴数据给chartview
    self.lineChartView.xAxis.valueFormatter = [[DateValueFormatter alloc]initWithArr:xValues];
    
    //创建LineChartDataSet对象
    LineChartDataSet *set1 = [[LineChartDataSet alloc] initWithValues:yValues1 label:@"label"];
    set1.valueColors = @[[UIColor clearColor]];
    set1.drawCirclesEnabled = false;
    set1.valueFont = [UIFont systemFontOfSize:12];
    set1.circleRadius = 0.5;
    set1.circleHoleRadius = 2.0;
    [set1 setColor:[UIColor redColor]];
    set1.mode = LineChartModeLinear;
    set1.drawValuesEnabled = true;
    
    LineChartDataSet *set2 = [[LineChartDataSet alloc] initWithValues:yValues2 label:@"label"];
    set2.circleRadius = 0.5;
    set2.circleHoleRadius = 2.0;
    [set2 setColor:[UIColor blueColor]];
    set2.mode = LineChartModeLinear;
    set2.drawValuesEnabled = NO;
    
    //sets内存放所有折线的数据 多个折线创建多个LineChartDataSet对象即可
    [sets addObject:set1];
    [sets addObject:set2];
    
    LineChartData *data = [[LineChartData alloc] initWithDataSets:sets];
    self.lineChartView.data = data;
}

-(void)chartValueSelected:(ChartViewBase *)chartView entry:(ChartDataEntry *)entry highlight:(ChartHighlight *)highlight {
//    NSLog(@"X值:%f  Y值:%ld", entry.y, (NSInteger)entry.x);
    _showLabel.text = [NSString stringWithFormat:@"X值:%f  Y值:%ld", entry.y, (NSInteger)entry.x];
}



@end


这里的样式是两条线,每多一条线就多加一个LineChartDataSet即可。点击对应的点返回数据的方法就是chartValueSelected,如果想给线添加别的样式,只要对应的加上formatter即可,这里暂时就不多说了。

你可能感兴趣的:(Charts使用的经验总结)