首先先看一下效果:

radar chart

一、創(chuàng)建雷達圖對象

self.radarChartView = [[RadarChartView alloc] init];
self.radarChartView.backgroundColor = BgColor;
[self.view addSubview:self.radarChartView];
[self.radarChartView mas_makeConstraints:^(MASConstraintMaker *make) {
      make.size.mas_equalTo(CGSizeMake(300, 300));
      make.center.mas_equalTo(self.view);
}];
self.radarChartView.delegate = self;
self.radarChartView.descriptionText = @"";//描述
self.radarChartView.rotationEnabled = YES;//是否允許轉(zhuǎn)動
self.radarChartView.highlightPerTapEnabled = YES;//是否能被選中

二、設置雷達圖樣式

1. 設置雷達圖線條樣式

雷達圖的線條有兩部分構(gòu)成, 一部分是由中心向外輻射的主干線, 一部分是環(huán)繞中心的邊線. 代碼如下:

self.radarChartView.webLineWidth = 0.5;//主干線線寬
self.radarChartView.webColor = [self colorWithHexString:@"#c2ccd0"];//主干線線寬
self.radarChartView.innerWebLineWidth = 0.375;//邊線寬度
self.radarChartView.innerWebColor = [self colorWithHexString:@"#c2ccd0"];//邊線顏色
self.radarChartView.webAlpha = 1;//透明度

2. 設置X軸label樣式

ChartXAxis *xAxis = self.radarChartView.xAxis;
xAxis.labelFont = [UIFont systemFontOfSize:15];//字體
xAxis.labelTextColor = [self colorWithHexString:@"#057748"];//顏色

3. 設置Y軸label樣式

ChartYAxis *yAxis = self.radarChartView.yAxis;
yAxis.axisMinValue = 0.0;//最小值
yAxis.axisMaxValue = 150.0;//最大值
yAxis.drawLabelsEnabled = NO;//是否顯示 label
yAxis.labelCount = 6;// label 個數(shù)
yAxis.labelFont = [UIFont systemFontOfSize:9];// label 字體
yAxis.labelTextColor = [UIColor lightGrayColor];// label 顏色

三、提供數(shù)據(jù)

- (RadarChartData *)setData{
    
    double mult = 100;
    int count = 12;//維度的個數(shù)
    
    //每個維度的名稱或描述
    NSMutableArray *xVals = [[NSMutableArray alloc] init];
    for (int i = 0; i < count; i++) {
        [xVals addObject:[NSString stringWithFormat:@"%d 月", i+1]];
    }
    
    //每個維度的數(shù)據(jù)
    NSMutableArray *yVals1 = [[NSMutableArray alloc] init];
    for (int i = 0; i < count; i++) {
        double randomVal = arc4random_uniform(mult) + mult / 2;//產(chǎn)生 50~150 的隨機數(shù)
        ChartDataEntry *entry = [[ChartDataEntry alloc] initWithValue:randomVal xIndex:i];
        [yVals1 addObject:entry];
    }
    
    // dataSet
    RadarChartDataSet *set1 = [[RadarChartDataSet alloc] initWithYVals:yVals1 label:@"set 1"];
    set1.lineWidth = 0.5;//數(shù)據(jù)折線線寬
    [set1 setColor:[self colorWithHexString:@"#ff8936"]];//數(shù)據(jù)折線顏色
    set1.drawFilledEnabled = YES;//是否填充顏色
    set1.fillColor = [self colorWithHexString:@"#ff8936"];//填充顏色
    set1.fillAlpha = 0.25;//填充透明度
    set1.drawValuesEnabled = NO;//是否繪制顯示數(shù)據(jù)
    set1.valueFont = [UIFont systemFontOfSize:9];//字體
    set1.valueTextColor = [UIColor grayColor];//顏色
    
   //data
    RadarChartData *data = [[RadarChartData alloc] initWithXVals:xVals dataSets:@[set1]];
    
    return data;
}

效果如下:

radar chart 1

也可以在 data中放入多個dataSet:

RadarChartData *data = [[RadarChartData alloc] initWithXVals:xVals dataSets:@[set1, set2]];

效果如下:

radar chart 2

在這里會有一個問題, 當 xVals也就是 X 軸上的文字為中文且較長時, label 位置的自適應會有問題, 已在 github 進行提問, 當前還沒有人能夠提供解決辦法, 希望大家集思廣益, 共同解決這個問題:https://github.com/danielgindi/Charts/issues/1143.
目前作者已回復可能是中文下特殊字體的渲染問題, 應該會在后續(xù)版本中解決.

Demo 地址:RadarChartDemo.