首先先看一下效果:
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.
