iOS使用Charts框架繪制—雷達(dá)圖

首先先看一下效果:

radar chart

一、創(chuàng)建雷達(dá)圖對(duì)象

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)動(dòng)
self.radarChartView.highlightPerTapEnabled = YES;//是否能被選中

二、設(shè)置雷達(dá)圖樣式

1. 設(shè)置雷達(dá)圖線條樣式

雷達(dá)圖的線條有兩部分構(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. 設(shè)置X軸label樣式
ChartXAxis *xAxis = self.radarChartView.xAxis;
xAxis.labelFont = [UIFont systemFontOfSize:15];//字體
xAxis.labelTextColor = [self colorWithHexString:@"#057748"];//顏色
3. 設(shè)置Y軸label樣式
ChartYAxis *yAxis = self.radarChartView.yAxis;
yAxis.axisMinValue = 0.0;//最小值
yAxis.axisMaxValue = 150.0;//最大值
yAxis.drawLabelsEnabled = NO;//是否顯示 label
yAxis.labelCount = 6;// label 個(gè)數(shù)
yAxis.labelFont = [UIFont systemFontOfSize:9];// label 字體
yAxis.labelTextColor = [UIColor lightGrayColor];// label 顏色

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

- (RadarChartData *)setData{
    
    double mult = 100;
    int count = 12;//維度的個(gè)數(shù)
    
    //每個(gè)維度的名稱或描述
    NSMutableArray *xVals = [[NSMutableArray alloc] init];
    for (int i = 0; i < count; i++) {
        [xVals addObject:[NSString stringWithFormat:@"%d 月", i+1]];
    }
    
    //每個(gè)維度的數(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 的隨機(jī)數(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中放入多個(gè)dataSet:

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

效果如下:

radar chart 2

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

Demo 地址:RadarChartDemo.

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,027評(píng)論 25 709
  • 20171004高麗新心賞第51天 親愛的老公,由于明天車間負(fù)責(zé)機(jī)器的同事不能到位,今天晚上你就要去南通。下午從常...
    rygao閱讀 211評(píng)論 0 0
  • 之前我們學(xué)習(xí)了蛋白質(zhì)的生物化學(xué),這節(jié)課,跟大家分享一下蛋白質(zhì)的營(yíng)養(yǎng)價(jià)值。首先最重要的一句話,是最重要的營(yíng)養(yǎng)...
    鈞鈞媽閱讀 418評(píng)論 7 7
  • 公園里紫薇花開了 開在了心里 我就坐在這里的亭子旁 看晨練的許多人們 聽歡快的歌曲 她發(fā)自內(nèi)心的歌音 雖然不怎么悅...
    田萍閱讀 247評(píng)論 1 5

友情鏈接更多精彩內(nèi)容