美文网首页
ZFChart之雷达图改进版

ZFChart之雷达图改进版

作者: 心情的蛊惑 | 来源:发表于2019-06-13 11:18 被阅读0次

    最近有个需求要求做雷达图,在github上搜索第三方,发现ZFChart还不错,但达不到公司的需求,于是动手研究修改了下第三方。效果如下:

    原始版:


    屏幕快照 2019-06-13 上午10.53.13.png

    改进版:


    WechatIMG1.jpeg
    在ZFRadarChart.m声明
    @property (nonatomic, strong) NSMutableArray * describeArray;
    @property(nonatomic, strong) ZFPolygon *polygon;
    
    - (void)setDescribeOnChart{
        for (NSInteger i = 0; i < self.describeArray.count; i++) {
            
            CGPoint labelCenter = [self.polygon.describePointArray[i] CGPointValue];
            //        labelCenter.b
            //效果微调
            //
            //        if (i == 0) labelCenter.y -= 10;
            //        if (i == 1) labelCenter.y -= 10;
            //        if (i == 2) labelCenter.y += 5;
            //        if (i == 3) labelCenter.y += 5;
            //        if (i == 4) labelCenter.y -= 10;
            
            
            
            
            
            ZFLabel * itemLabel = [[ZFLabel alloc] initWithFrame:CGRectMake(0, 0, 10, 10)];
            itemLabel.center = CGPointMake(labelCenter.x, labelCenter.y);
            itemLabel.font = [UIFont systemFontOfSize:12.f];
    //        itemLabel.text = self.describeArray[i];
    //        itemLabel.textColor = [UIColor colorWithRed:73/255.0 green:73/255.0  blue:73/255.0  alpha:1];
    //        itemLabel.transform = CGAffineTransformMakeRotation(-_finalRotationAngle);
            itemLabel.backgroundColor = _colorPointArray[i];
            itemLabel.layer.masksToBounds = YES;
            itemLabel.layer.cornerRadius = itemLabel.height/2;
            [self.polygon addSubview:itemLabel];
            
        }
    }
    

    注意,在这里我其实放的是label,让它们圆角化了。

    在ZFPolygon.m中,声明数组describePointArray

    - (UIBezierPath *)fill{
    [self.describePointArray removeAllObjects];
        _startAngle = -90.f;
        //获取第一个item半径
        _currentRadius = [_radiusArray.firstObject floatValue];
        UIBezierPath * bezier = [UIBezierPath bezierPath];
        [bezier moveToPoint:CGPointMake(_polygonCenter.x, _polygonCenter.y - _currentRadius)];
          [self.describePointArray addObject:[NSValue valueWithCGPoint:CGPointMake(_polygonCenter.x, _polygonCenter.y - _currentRadius)]];
        for (NSInteger i = 1; i < _radiusArray.count; i++) {
            _currentRadarAngle = _averageRadarAngle * i;
            //计算每个item的角度
            _endAngle = _startAngle + _averageRadarAngle;
            //获取当前item半径
            _currentRadius = [_radiusArray[i] floatValue];
            
            if (_endAngle > -90.f && _endAngle <= 0.f) {
                _endXPos = _polygonCenter.x + fabs(-(_currentRadius * ZFSin(_currentRadarAngle)));
                _endYPos = _polygonCenter.y - fabs(_currentRadius * ZFCos(_currentRadarAngle));
                
            }else if (_endAngle > 0.f && _endAngle <= 90.f){
                _endXPos = _polygonCenter.x + fabs(-(_currentRadius * ZFSin(_currentRadarAngle)));
                _endYPos = _polygonCenter.y + fabs(_currentRadius * ZFCos(_currentRadarAngle));
                
            }else if (_endAngle > 90.f && _endAngle <= 180.f){
                _endXPos = _polygonCenter.x - fabs(-(_currentRadius * ZFSin(_currentRadarAngle)));
                _endYPos = _polygonCenter.y + fabs(_currentRadius * ZFCos(_currentRadarAngle));
                
            }else if (_endAngle > 180.f && _endAngle < 270.f){
                _endXPos = _polygonCenter.x - fabs(-(_currentRadius * ZFSin(_currentRadarAngle)));
                _endYPos = _polygonCenter.y - fabs(_currentRadius * ZFCos(_currentRadarAngle));
            }
    
            [bezier addLineToPoint:CGPointMake(_endXPos, _endYPos)];
            //记录下一个item开始角度
            _startAngle = _endAngle;
              [self.describePointArray addObject:[NSValue valueWithCGPoint:CGPointMake(_endXPos, _endYPos)]];
        }
        [bezier closePath];
        return bezier;
    }
    
    

    不喜勿喷

    相关文章

      网友评论

          本文标题:ZFChart之雷达图改进版

          本文链接:https://www.haomeiwen.com/subject/lgsjfctx.html