iOS使用Charts框架绘制—雷达图

首先先看一下效果:

radar chart

一、创建雷达图对象

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;//是否允许转动
self.radarChartView.highlightPerTapEnabled = YES;//是否能被选中

二、设置雷达图样式

1. 设置雷达图线条样式

雷达图的线条有两部分构成, 一部分是由中心向外辐射的主干线, 一部分是环绕中心的边线. 代码如下:

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 个数
yAxis.labelFont = [UIFont systemFontOfSize:9];// label 字体
yAxis.labelTextColor = [UIColor lightGrayColor];// label 颜色

三、提供数据

- (RadarChartData *)setData{
    
    double mult = 100;
    int count = 12;//维度的个数
    
    //每个维度的名称或描述
    NSMutableArray *xVals = [[NSMutableArray alloc] init];
    for (int i = 0; i < count; i++) {
        [xVals addObject:[NSString stringWithFormat:@"%d 月", i+1]];
    }
    
    //每个维度的数据
    NSMutableArray *yVals1 = [[NSMutableArray alloc] init];
    for (int i = 0; i < count; i++) {
        double randomVal = arc4random_uniform(mult) + mult / 2;//产生 50~150 的随机数
        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;//数据折线线宽
    [set1 setColor:[self colorWithHexString:@"#ff8936"]];//数据折线颜色
    set1.drawFilledEnabled = YES;//是否填充颜色
    set1.fillColor = [self colorWithHexString:@"#ff8936"];//填充颜色
    set1.fillAlpha = 0.25;//填充透明度
    set1.drawValuesEnabled = NO;//是否绘制显示数据
    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.
目前作者已回复可能是中文下特殊字体的渲染问题, 应该会在后续版本中解决.

Demo 地址:RadarChartDemo.