Charts使用时的基本属性

DGCharts使用

 ///折线图
    lazy var chartView: LineChartView = {
        let chartLineView = LineChartView.init()
        chartLineView.delegate = nhtChartDele;
        self.addSubview(chartLineView);
        chartLineView.backgroundColor = UIColor.clear;
        //        不能这么写，unipp x不行
        //        chartLineView.snp.makeConstraints { make in
        //            make.left.equalTo(10)
        //            make.right.equalTo(-10)
        //            make.top.equalTo(10)
        //            make.bottom.equalTo(-10)
        //        }
        // 是否在左下侧显示每个颜色所代表的的折线以及其名称
        chartLineView.legend.enabled = false;
        chartLineView.frame = self.bounds
        //设置Y轴
        let leftAxis = chartLineView.leftAxis;
        //类表示y轴标签设置及其项
        self.setXYLineInfo(axisBase: leftAxis);
        //        leftAxis.axisMaximum = -40;
        //        leftAxis.axisMinimum = -128;
        #warning("必须设置leftAxis.drawTopYLabelEntryEnabled = true;leftAxis.drawBottomYLabelEntryEnabled = true; ，否则上下放大到一定程度会导致崩溃 ")
        //是否显示底部或顶部刻度
        leftAxis.drawTopYLabelEntryEnabled = true;
        //如果drawBottomYLabelEntryEnabled = NO 可能导致最下面的刻度不显示
        leftAxis.drawBottomYLabelEntryEnabled = true;
        //左侧Y轴刻度位置YAxisLabelPositionOutsideChart
        leftAxis.labelPosition = YAxis.LabelPosition.outsideChart;
        chartLineView.rightAxis.enabled = false;//右侧轴线不显示
        
        //设置X轴
        let xAxis = chartLineView.xAxis;
        self.setXYLineInfo(axisBase: xAxis);
        //设置x轴位置
        xAxis.labelPosition = XAxis.LabelPosition.bottom;
        //手动设至坐标轴上显示信息 可以添加单位等信息 需要遵守 ChartAxisValueFormatter，并实现其方法
        if (self.showXCustomValue){
            xAxis.valueFormatter = nhtChartDele;
        }
        xAxis.labelRotationAngle = self.labelRotationAngle;
        /**
         最右边的坐标或者最上面的坐标被遮盖一半显示不全，设置偏移量避免显示不全
         避免X坐标轴刻度文字显示不全解决方法
         方法一
         */
        //  xAxis.avoidFirstLastClippingEnabled = YES;//方法一 避免X轴文字显示不全
        //     _chartView.extraRightOffset = 20;//方法二 避免X轴文字显示不全
        
        /**
         X轴和Y轴两个刻度数的间距是自动计算的，需要按照你自己的数据来设置_chartView的宽和高
         */
        //网格线
        leftAxis.drawGridLinesEnabled =  true;
        xAxis.drawGridLinesEnabled = true;
        //swift不支持连续赋值
        leftAxis.axisLineColor = UIColor.gray.withAlphaComponent(0.3)
        leftAxis.gridColor = UIColor.gray.withAlphaComponent(0.3)
        xAxis.gridColor = UIColor.gray.withAlphaComponent(0.3)
        leftAxis.gridLineWidth = leftAxis.axisLineWidth;
        xAxis.gridLineWidth = leftAxis.axisLineWidth;
        
        if(self.showMarkerView){
            ///点击选中时出现的泡泡
            let marker = BalloonMarker.init(color: self.markerColorShow, font: UIFont.systemFont(ofSize: 12), textColor: UIColor.white, insets: UIEdgeInsets(top: 8, left: 8, bottom: 20, right: 8));
            marker.chartView = chartLineView;
            marker.minimumSize = CGSize(width: 30, height: 30);
            chartLineView.marker = marker;
        }
        return chartLineView
    }()
    
    ///设置坐标轴信息
    private func setXYLineInfo(axisBase:AxisBase) -> Void {
        //类表示标签设置及其项
        axisBase.removeAllLimitLines()
#warning ("注意 如果不设置axisMaximum axisMinimum，系统会自动根据数据进行显示")
        axisBase.gridLineDashLengths = [3.0, 3.0];
        axisBase.gridLineWidth = 6;
        axisBase.labelTextColor = UIColor.gray.withAlphaComponent(0.5);
        axisBase.gridColor = UIColor.gray.withAlphaComponent(0.5);
        /**
         避免放大到一定级别后坐标轴上出现重复数据，两种方法
         */
        axisBase.granularityEnabled = true;//方法一 设置重复不显示
        //        axisBase.granularity = 1; //方法二 设置坐标轴值之间最小距离，这里是指定相邻标签间最小差，防止重复
        
        //设置轴的 颜色 宽度
        axisBase.axisLineColor = self.axisLineColor;
        axisBase.labelTextColor = self.axisLineColor;
        axisBase.labelFont = UIFont.systemFont(ofSize: 12);
        axisBase.axisLineWidth = 1;
        
        //设置之后就会变成虚线
        //     axisBase.axisLineDashLengths = @[@5.f,@10.f];
        //是否显示轴网格虚线
        axisBase.drawGridLinesEnabled = false;
        axisBase.gridLineWidth = 1.0;
        //        axisBase.gridLineCap = CGLineCap(rawValue: 10)!;
        
        //可以设置网格线长度，@[@(10),@(1),@(16)] 就代表第一个长度为10第二个1第三个16
        //    axisBase.gridLineDashLengths = @[@(10),@(1),@(16)];
        //    axisBase.gridLineDashPhase = 1;
        
        axisBase.drawLimitLinesBehindDataEnabled = true;
        axisBase.gridAntialiasEnabled = false;
        //手动设至坐标轴上显示信息 可以添加单位等信息 需要遵守 ChartAxisValueFormatter，并实现其方法
        //        axisBase.valueFormatter = self;
        
        //        NSNumberFormatter *formatter = [[NSNumberFormatter alloc] init];
        //        formatter.positiveSuffix = @"a";//前缀
        //        formatter.positivePrefix = @"b";//后缀
        //        axisBase.valueFormatter = [[ChartDefaultAxisValueFormatter alloc] initWithFormatter:formatter];
        //显示几个刻度
//            axisBase.labelCount = 5;
        
        /**
         上面是基本设置
         下面是X轴Y轴的特殊属性
         */
        //    //绘制底部 绘制零线
        //    axisBase.drawZeroLineEnabled = YES;
        //    axisBase.zeroLineWidth  = 10;
        //    axisBase.zeroLineColor = [UIColor yellowColor];
        //    //左侧Y轴刻度位置
        //    axisBase.labelPosition = YAxisLabelPositionOutsideChart;
        //    //是否显示底部或顶部刻度
        //    axisBase.drawTopYLabelEntryEnabled = YES;
#warning ("注意 如果drawBottomYLabelEntryEnabled = NO 可能导致最下面的刻度不显示")
        //    axisBase.drawBottomYLabelEntryEnabled = YES;
        //    axisBase.avoidFirstLastClippingEnabled = YES;//方法一 避免X轴文字显示不全
    }
    ///线设置
    private func setDataSet(values:[ChartDataEntry],key:String) -> LineChartDataSet {
        let set1 = LineChartDataSet.init(entries: values, label: key);
        set1.drawIconsEnabled = false;//画点对应的图片
        set1.setColor((self.lineColorAll[key] as? UIColor ?? LineColorDefault))//线的颜色
        
        set1.setCircleColor(UIColor.black) ;//点的颜色
        set1.valueFont = UIFont.systemFont(ofSize: 12);//折线拐点处显示数据的字体
        set1.valueTextColor = UIColor.black;//折线拐点处显示数据的颜色
        set1.drawValuesEnabled = false;
        
        set1.highlightColor = UIColor.gray;//选中线条颜色
        //        set1.highlightLineWidth = 0;//选择点画的十字线宽度，设置为0就不显示十字线
        //        set1.circleRadius = 3.0;//拐点的圆的半径
        set1.highlightEnabled = true;//选中拐点,是否开启高亮效果(显示十字线)
        set1.drawCirclesEnabled = false;//是否绘制拐点
        set1.mode = .cubicBezier;//线条的样式
        return set1;
    }

Charts使用

#pragma mark---折线图 遵循代理 <ChartViewDelegate,IChartAxisValueFormatter,IChartFillFormatter,IChartValueFormatter>

#pragma mark---折线图
///添加限制线
-(ChartLimitLine *)createLilitLineLine:(CGFloat)limit label:(NSString *)label{
    //最高 最大限制线
    ChartLimitLine *limitLine = [[ChartLimitLine alloc] initWithLimit:limit label:label];
    //线条描述文字 位置 字体 颜色
    limitLine.labelPosition = ChartLimitLabelPositionTopLeft;
    limitLine.valueFont = [UIFont systemFontOfSize:9];
    //文字颜色
    limitLine.valueTextColor = rgba(90, 107, 200, 1);
    //线条高度
    limitLine.lineWidth = 1.0;
    //线条颜色
    limitLine.lineColor = rgba(236, 105, 65, 1);
    //@[@5.f, @15.f] 宽度 间隔
    limitLine.lineDashLengths = @[@5.f, @5.f];
    return limitLine;
}
-(void)showChart{
    /**
     一个刻度的宽度是35，x轴显示9格，y轴显示5格
     */
    _chartView = [[LineChartView alloc] init];
    _chartView.delegate = self;
    _chartView.frame = CGRectMake(WMAKENEW(7), WMAKENEW(25), SCREEN_WIDTH-WMAKENEW(12)-WMAKENEW(12)-WMAKENEW(12), self.oneSpaceWidth*5);
    [self.backView addSubview:_chartView];
    _chartView.chartDescription.enabled = NO;
    
    _chartView.dragEnabled = YES;
    [_chartView setScaleEnabled:YES];
    _chartView.pinchZoomEnabled = YES;
    _chartView.drawGridBackgroundEnabled = NO;
       //设置初始可见数量，需要在设置数据之后调用，设置后可滑动查看内容，避免第一次显示太多内容以免显示出现问题
       // [_chartView setVisibleXRangeMaximum:10];
    
    //类表示y轴标签设置及其项。
    ChartYAxis *leftAxis = _chartView.leftAxis;
    [self setXYLineInfo:leftAxis];
#pragma mark---特殊部分
    //添加 标识线
    [leftAxis addLimitLine:[self createLilitLineLine:90.0 label:@"上面的线"]];
    //是否显示底部或顶部刻度
    leftAxis.drawTopYLabelEntryEnabled = YES;
#warning 注意 如果drawBottomYLabelEntryEnabled = NO 可能导致最下面的刻度不显示
    leftAxis.drawBottomYLabelEntryEnabled = YES;
    //左侧Y轴刻度位置
    leftAxis.labelPosition = YAxisLabelPositionOutsideChart;
    _chartView.rightAxis.enabled = NO;//右侧轴线不显示
    ///点击选中时出现的泡泡
    BalloonMarker *marker = [[BalloonMarker alloc]
                             initWithColor: rgba(87, 174, 255, 1)
                             font: FONT(12)
                             textColor: UIColor.whiteColor
                             insets: UIEdgeInsetsMake(8.0, 8.0, 20.0, 8.0)];
    marker.chartView = _chartView;
    marker.minimumSize = CGSizeMake(40.f, 40.f);
    _chartView.marker = marker;
    
    // 是否在左下侧显示每个颜色所代表的的折线以及其名称
    _chartView.legend.form = ChartLegendFormNone;
    _chartView.legend.enabled = NO;
    //多长时间加载完成数据
    [_chartView animateWithXAxisDuration:1];
    
    ChartXAxis *xAxis = _chartView.xAxis;
    [self setXYLineInfo:xAxis];
    //设置x轴位置
    xAxis.labelPosition = XAxisLabelPositionBottom;
    //手动设至坐标轴上显示信息 可以添加单位等信息 需要遵守 ChartAxisValueFormatter，并实现其方法
    xAxis.valueFormatter = self;
    xAxis.labelFont = FONT(10);
    xAxis.labelRotationAngle = 25;//放不下时是否斜着放的角度
    
    /**
     最右边的坐标或者最上面的坐标被遮盖一半显示不全，设置偏移量避免显示不全
     避免X坐标轴刻度文字显示不全解决方法
     方法一
     */
    xAxis.avoidFirstLastClippingEnabled = YES;//方法一 避免X轴文字显示不全
    _chartView.extraRightOffset = WMAKENEW(20);//方法二 避免X轴文字显示不全
    
    /**
     X轴和Y轴两个刻度数的间距是自动计算的，需要按照你自己的数据来设置_chartView的宽和高
     */
    
    // 画刻度线  自己把网格线改成了刻度线
    leftAxis.drawGridLinesEnabled =  xAxis.drawGridLinesEnabled = YES;
    leftAxis.gridColor =  xAxis.gridColor = leftAxis.axisLineColor;
    leftAxis.gridLineWidth = xAxis.gridLineWidth = leftAxis.axisLineWidth;
    
    _chartView.noDataText = @"暂无数据";
    _chartView.noDataTextColor = UIColor.redColor;
    _chartView.noDataFont = FONT(14);
}
///设置坐标轴信息
-(void)setXYLineInfo:(ChartAxisBase *)axisBase{
    //类表示标签设置及其项。
    [axisBase removeAllLimitLines];
#warning 注意 如果不设置axisMaximum axisMinimum，系统会自动根据数据进行显示
    //    axisBase.axisMaximum =100;
    //    axisBase.axisMinimum = -100;
    axisBase.gridLineDashLengths = @[@5.f, @5.f];
    axisBase.gridLineWidth = 6;
    axisBase.gridColor = rgba(90, 107, 200, 1);
    axisBase.labelTextColor = rgba(90, 107, 200, 1);
    /**
     避免放大到一定级别后坐标轴上出现重复数据，两种方法
     */
    axisBase.granularityEnabled = YES;//方法一 设置重复不显示
    axisBase.granularity = 1; //方法二 设置坐标轴值之间最小距离，这里是指定相邻标签间最小差，防止重复
    
    //设置轴的 颜色 宽度
    axisBase.axisLineColor = rgba(90, 107, 200, 1);
    axisBase.axisLineWidth = 1;
    
    //设置之后就会变成虚线
    //     axisBase.axisLineDashLengths = @[@5.f,@10.f];
    //是否显示轴网格虚线
    axisBase.drawGridLinesEnabled = NO;
    axisBase.gridLineWidth = 1;
    axisBase.gridLineCap = 10;
    
    //可以设置网格线长度，@[@(10),@(1),@(16)] 就代表第一个长度为10第二个1第三个16
    //    axisBase.gridLineDashLengths = @[@(10),@(1),@(16)];
    //    axisBase.gridLineDashPhase = 1;
    
    axisBase.drawLimitLinesBehindDataEnabled = YES;
    axisBase.gridAntialiasEnabled = NO;
    //手动设至坐标轴上显示信息 可以添加单位等信息 需要遵守 ChartAxisValueFormatter，并实现其方法
    axisBase.valueFormatter = self;
    //显示几个刻度
    // axisBase.labelCount = 5;
    
    /**
     上面是基本设置
     下面是X轴Y轴的特殊属性
     */
    //    //绘制底部 绘制零线
    //    axisBase.drawZeroLineEnabled = YES;
    //    axisBase.zeroLineWidth  = 10;
    //    axisBase.zeroLineColor = [UIColor yellowColor];
    //    //左侧Y轴刻度位置
    //    axisBase.labelPosition = YAxisLabelPositionOutsideChart;
    //    //是否显示底部或顶部刻度
    //    axisBase.drawTopYLabelEntryEnabled = YES;
#warning 注意 如果drawBottomYLabelEntryEnabled = NO 可能导致最下面的刻度不显示
    //    axisBase.drawBottomYLabelEntryEnabled = YES;
    //    axisBase.avoidFirstLastClippingEnabled = YES;//方法一 避免X轴文字显示不全
}

#pragma mark - ChartViewDelegate

- (void)chartValueSelected:(ChartViewBase * __nonnull)chartView entry:(ChartDataEntry * __nonnull)entry highlight:(ChartHighlight * __nonnull)highlight
{
    NSLog(@"chartValueSelected");
}

- (void)chartValueNothingSelected:(ChartViewBase * __nonnull)chartView
{
    NSLog(@"chartValueNothingSelected");
}
#pragma mark - IChartValueFormatter delegate (折线值) 自定义显示所画的每个点的值
- (NSString *)stringForValue:(double)value entry:(ChartDataEntry *)entry dataSetIndex:(NSInteger)dataSetIndex viewPortHandler:(ChartViewPortHandler *)viewPortHandler {
    if (value>60 || value<20) {
        return nil;
    }else{
        return nil;
    }
    
}

#pragma mark - IChartAxisValueFormatter delegate (y轴值) (x轴的值写在DateValueFormatter类里, 都是这个协议方法)
- (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis {
    if ([axis isKindOfClass:[ChartYAxis class]]) {
        return [NSString stringWithFormat:@"%.f", value];
    }else{
        return [NSString stringWithFormat:@"%.f", value];
    }
}

-(CGFloat)getFillLinePositionWithDataSet:(id<ILineChartDataSet>)dataSet dataProvider:(id<LineChartDataProvider>)dataProvider{
    return 1;
}
-(void)showNeedData:(NSArray *)values{
    NSArray *oldDataSet = [_chartView.data.dataSets mutableCopy];
    if (oldDataSet.count>0) {
        for (LineChartDataSet *subData in oldDataSet) {
            [_chartView.data removeDataSet:subData];
        }
        [_chartView setNeedsDisplay];
    }
   //每次新修改
    NSMutableArray *dataSets = [[NSMutableArray alloc] init];
    for (NSArray *subArr in values) {
        [dataSets addObject:[self setDataSet:subArr]];
    }
    LineChartData *data = [[LineChartData alloc] initWithDataSets:dataSets];
    _chartView.data = data;
    if (self.isFirstShow) {
        self.oneTimer.fireDate = [NSDate distantPast];
    }
    [_chartView setNeedsDisplay];
}
-(LineChartDataSet *)setDataSet:(NSArray *)values{
    LineChartDataSet *set1 = nil;
    set1.mode = LineChartModeCubicBezier;//线条的样式  平滑曲线、直线
    //设置点
    set1 = [[LineChartDataSet alloc] initWithEntries:values label:@""];
    set1.drawIconsEnabled = NO;//画点对应的图片
    [set1 setColor:rgba(87, 174, 255, 1)];//线的颜色
    [set1 setCircleColor:rgba(87, 174, 255, 1)];//点的颜色
    set1.drawValuesEnabled = false;//是否绘制拐点的值
    set1.valueFont = FONT(9);//折线拐点处显示数据的字体
    set1.valueTextColor = rgba(87, 174, 255, 1);//折线拐点处显示数据的颜色
    //        set1.lineDashLengths = @[@5.f, @2.5f];
    //        set1.highlightLineDashLengths = @[@5.f, @2.5f];
    //        set1.valueColors = @[UIColor.redColor,UIColor.blackColor,UIColor.clearColor];//折线拐点处显示数据的颜色,自定义每个点的颜色
    //        set1.fillFormatter = self;
    //左下角 线条以及文字描述
    //        set1.label = @"我的名字";
    //        set1.formLineDashLengths = @[@5.f, @2.5f];
    //    set1.formLineWidth = 0.0;//设置成0不显示
    //        set1.formSize = 15.0;
    set1.valueFormatter = self;//自定义显示所画的每个点的值，需要遵循IChartValueFormatter协议
    set1.lineWidth = 1.0;
    set1.circleRadius = 3;//拐点的圆的半径
    set1.drawCircleHoleEnabled = NO;//是否绘制中间的空心
    set1.circleHoleRadius = 1.0f;//空心的半径
    set1.circleHoleColor = rgba(87, 174, 255, 1);//空心的颜色
    set1.drawFilledEnabled = NO;//是否填充颜色，就是折线下方覆盖部分的颜色
    //    set1.axisDependency = AxisDependencyRight;//轴线方向 可能会导致Y轴刻度显示出错不知道为什么？
    set1.highlightColor = [UIColor yellowColor];//选中线条颜色
    set1.highlightLineWidth = 1.00f;
    
    
    if (values.count==1) {
        set1.drawCirclesEnabled = YES;//是否绘制拐点
    }else{
        set1.drawCirclesEnabled = NO;//是否绘制拐点
    }
    
    return set1;
}
- (void)setDataCount:(int)count range:(double)range
{
    NSMutableArray *values = [[NSMutableArray alloc] init];
    for (int i = 0; i < 0+count; i++){

#warning 如果可能是负数，不能直接将Y或者X的值写到初始化方法上
        /**
         这样不行
         [[ChartDataEntry alloc] initWithX:nowX y:(100 - arc4random_uniform(150)) icon: [UIImage imageNamed:@"icon"]];
         这样才可以
         [ChartDataEntry alloc] initWithX:nowX y:nnnnn icon: [UIImage imageNamed:@"icon"]];
         */
        NSInteger nowX = i*3;
        if (i%10) {
            [values addObject:[[ChartDataEntry alloc] initWithX:nowX y:-i icon: [UIImage imageNamed:@"icon"]]];
        }else{
            [values addObject:[[ChartDataEntry alloc] initWithX:nowX y:i+10 icon: [UIImage imageNamed:@"icon"]]];
        }
    }
    self.chartView.xAxis.axisMinimum = 0;
    self.chartView.leftAxis.axisMinimum = -100;
    self.chartView.leftAxis.axisMaximum = 100;

    [self showNeedData:@[values]];
}