Quartz 2D 第三方框架 Charts 绘制图表

1、Charts 简介

  • 使用第三方框架 Charts 绘制 iOS 图表。GitHub 源码 Charts

  • Charts 是一款用于绘制图表的框架,可以绘制柱状图、折线图、K线图、饼状图等。Charts 只有 Swift 版本。

  • LineChart (with legend, simple design)

    alt tag

  • LineChart (with legend, simple design)

    alt tag

  • LineChart (cubic lines)

    alt tag

  • LineChart (gradient fill)

    alt tag

  • Combined-Chart (bar- and linechart in this case)

    alt tag

  • BarChart (with legend, simple design)

    alt tag

  • BarChart (grouped DataSets)

    alt tag

  • Horizontal-BarChart

    alt tag

  • PieChart (with selection, …)

    alt tag

  • ScatterChart (with squares, triangles, circles, … and more)

    alt tag

  • CandleStickChart (for financial data)

    alt tag

  • BubbleChart (area covered by bubbles indicates the value)

    alt tag

  • RadarChart (spider web chart)

    alt tag

2、在项目中集成 Charts

2.1 在 OC 项目中手动导入 Charts 框架

  • 1、下载 Charts 框架。

    • 解压后的文件夹里面的内容是这个样子的,如下图。

    • 下载完成后,仔细看一下所需环境,很重要!如下图。

    • 在自己的工程中使用的时候可以删掉框架中的 Demo 等文件,如下图。

  • 2、新建工程,导入 Charts.xcodeproj 工程

    • 新建工程,取名为 ChartsDemo。复制 Charts 整个文件到 ChartsDemo 工程中

    • 将 Charts 文件夹中的 Charts.xcodeproj 工程文件导入到 ChartsDemo 工程中,注意导入的是 Charts.xcodeproj 工程,而不是 Charts 的文件夹,如下图。

  • 3、编译导入的 Charts.xcodeproj 工程

    • 选中 Charts.xcodeproj 工程,在 TARGETS => Build Setting => Architectures => Base SDK 中设置 SDKs 为 iOS 环境。

    • 在编译选项中选中 Charts => Generic iOS Devices 进行编译,编译成功后可以看到 Charts.xcodeproj 工程的 Products 中 Charts.framework 由红色变为黑色。

  • 4、添加 Charts.framework

    • 在 ChartsDemo 工程的 TARGETS => General => Embedded Binaries 中,点击 + 号添加 iOS 的 Charts.framework,如下图。

  • 5、建立 OC 和 Swift 的桥接文件

    • 在 ChartsDemo 工程中新建一个 Swift 文件,名字随便取,这时候会提示是否建立桥接文件,直接选 Create Bridging Header 选项,如下图。

    • 创建完成后删除刚才创建的 Swift 文件,然后在桥接头文件中添加 Charts 引入。

    • 在使用 Charts 的文件中引入桥接头文件。引入完成之后,选择 iOS 模拟器编译一下,如果有错,Clean 一下再次编译,编译没有错误说明导入成功。

  • 6、测试

    • 在 ViewController.m 中进行测试,代码如下。

      1
      2
      3
      BarChartView *barChatView = [[BarChartView alloc] initWithFrame:CGRectMake(10, 100, 300, 300)];
      barChatView.backgroundColor = [UIColor cyanColor];
      [self.view addSubview:barChatView];
    • 效果如下。由于没有给数据,所以显示的是 No chart date aviailable。至此,集成 Charts 完毕。

3、绘制折线图

3.1 LineChart 设置

  • 1、属性设置

    • 在控制器中我们首先需要创建一个 LineChartView 的对象,在 Charts 框架中折线图用到的类是 LineChartView。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      self.lineChartView = [[LineChartView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width - 10, 400)];
      self.lineChartView.center = self.view.center;
      [self.view addSubview:self.lineChartView];

      // 设置基本样式
      self.lineChartView.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1];
      self.lineChartView.delegate = self; // 设置代理,需遵守 ChartViewDelegate 协议
      self.lineChartView.noDataText = @"暂无数据";

      // 设置交互样式
      self.lineChartView.scaleYEnabled = NO; // 取消 Y 轴缩放
      self.lineChartView.doubleTapToZoomEnabled = NO; // 取消双击缩放
      self.lineChartView.dragEnabled = YES; // 启用拖拽图标
      self.lineChartView.dragDecelerationEnabled = YES; // 拖拽后是否有惯性效果
      self.lineChartView.dragDecelerationFrictionCoef = 0.9; // 拖拽后惯性效果的摩擦系数(0~1),数值越小,惯性越不明显
    • 在 LineChartView 中有两个属性 rightAxis 和 leftAxis 属于 ChartYAxis 类,是分别用来设置左边 Y 轴和右边 Y 轴的,可以根据自己的需求去设置。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      self.lineChartView.rightAxis.enabled = NO;                                  // 不绘制右边轴
      ChartYAxis *leftAxis = self.lineChartView.leftAxis; // 获取左边 Y 轴
      leftAxis.inverted = NO; // 是否将 Y 轴进行上下翻转
      leftAxis.axisMinValue = 0; // 设置 Y 轴的最小值
      leftAxis.axisMaxValue = 105; // 设置 Y 轴的最大值
      leftAxis.axisLineWidth = 1.0 / [UIScreen mainScreen].scale; // 设置 Y 轴线宽
      leftAxis.axisLineColor = [UIColor blackColor]; // 设置 Y 轴颜色
      leftAxis.labelPosition = YAxisLabelPositionOutsideChart; // label 文字位置
      leftAxis.valueFormatter = [[YAxisValueFormatter alloc] init]; // label 文字样式,自定义格式,默认时不显示特殊符号
      leftAxis.labelTextColor = [self colorWithHexString:@"#057748"]; // label 文字颜色
      leftAxis.labelFont = [UIFont systemFontOfSize:10.0f]; // label 文字字体
      leftAxis.labelCount = 5; // label 数量,数值不一定,
      // 如果 forceLabelsEnabled 等于 YES,
      // 则强制绘制制定数量的 label, 但是可能不平均
      leftAxis.forceLabelsEnabled = NO; // 不强制绘制指定数量的 label
      leftAxis.gridLineDashLengths = @[@3.0f, @3.0f]; // 设置虚线样式的网格线
      leftAxis.gridColor = [UIColor colorWithRed:200/255.0f green:200/255.0f blue:200/255.0f alpha:1]; // 网格线颜色
      leftAxis.gridAntialiasEnabled = YES; // 网格线开启抗锯齿
    • 在这里要注意的是,一般情况下 y 轴的数据是 double 类型的并且是没有特殊符号的,如果想要做到像图中的那样的百分数类型是要去设置的,然后我们发现 ChartYAxis 类中有一个属性 valueFormatter,这个属性就是用来设置数据格式的,但比较麻烦的是这个属性必须遵循 IChartAxisValueFormatter 的协议,所以我们需要去自定义一个 YAxisValueFormatter 类来完成。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      @import Charts;

      @interface YAxisValueFormatter : NSObject <IChartAxisValueFormatter>

      @end

      @implementation YAxisValueFormatter

      /// 实现协议方法,返回 y 轴的数据
      - (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis {

      // value 为 y 轴的值

      return [NSString stringWithFormat:@"%ld%%",(NSInteger)value];
      }

      @end
    • y 轴设置完了,现在我们来设置 x 轴,在 LineChartView 中也有个属性 xAxis 使用来设置 x 轴的样式的,它属于 ChartXAxis 类,现在我们来创建它。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      ChartXAxis *xAxis = self.lineChartView.xAxis;
      xAxis.labelPosition = XAxisLabelPositionBottom; // 设置 X 轴的显示位置,默认是显示在上面的
      xAxis.axisLineWidth = 1.0 / [UIScreen mainScreen].scale; // 设置 X 轴线宽
      xAxis.axisLineColor = [UIColor blackColor]; // 设置 X 轴颜色
      xAxis.granularityEnabled = YES; // 设置重复的值不显示
      xAxis.valueFormatter = [[XAxisValueFormatter alloc] init]; // label 文字样式,自定义格式,默认时不显示特殊符号
      xAxis.labelTextColor = [self colorWithHexString:@"#057748"]; // label 文字颜色
      xAxis.drawGridLinesEnabled = NO; // 不绘制网格线
      xAxis.gridColor = [UIColor clearColor]; // 网格线颜色
    • 同样的一般情况下 x 轴的数据也是 double 类型的并且是没有特殊符号的,所以我们需要去自定义一个 XAxisValueFormatter 类来完成。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      #import <Foundation/Foundation.h>

      @import Charts;

      @interface XAxisValueFormatter : NSObject <IChartAxisValueFormatter>

      @end

      @implementation XAxisValueFormatter

      /// 实现协议方法,返回 x 轴的数据
      - (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis {

      // value 为 x 轴的值

      return [NSString stringWithFormat:@"%ld天", (NSInteger)value];
      }

      @end
    • 到这里我们 lineChartView 的 x 轴和 y 轴都设置好了,但是还少了一个选中数据滑动的时候值会变化的标签, LineChartView 中有个 marker 属性就是我们要找的,marker 属性遵循 IChartMarker 协议,是 id 类型,ChartMarkerView 和 ChartMarkerImage 都有遵循 IChartMarker 协议,都是可以用的,可以根据自己的需求自己选择。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      ChartMarkerView *markerY = [[ChartMarkerView alloc] init];
      markerY.offset = CGPointMake(-999, -8);
      markerY.chartView = self.lineChartView;
      [markerY addSubview:self.markYLabel];
      self.lineChartView.marker = markerY;

      - (UILabel *)markYLabel {

      if (!_markYLabel) {
      _markYLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, -5, 35, 25)];
      _markYLabel.font = [UIFont systemFontOfSize:15.0];
      _markYLabel.textAlignment = NSTextAlignmentCenter;
      _markYLabel.text = @"";
      _markYLabel.textColor = [UIColor whiteColor];
      _markYLabel.backgroundColor = [UIColor grayColor];
      }
      return _markYLabel;
      }
  • 2、数据设置

    • 折线图的数据 data 属性是属于 LineChartData 类,所以 setData 方法需要返回一个 LineChartData 的对象,但是在 LineChartData 的对象的初始化方法中 - (nonnull instancetype)initWithDataSets:(NSArray<id <IChartDataSet>> * _Nullable)dataSets 发现还需要一个装有 LineChartDataSet 的数组,LineChartDataSet 其实就是每一条折线,而绘制每一条折线又需要数据,所以我们先从数据开始一步一步创建。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      NSMutableArray *chartVals1 = [[NSMutableArray alloc] init];
      for (int i = 0; i < vals_count; i++) {

      double xValue = i + 1;
      double yValue = arc4random() % 100;

      // 设置表格数据,x 轴和 y 轴的值
      ChartDataEntry *entry = [[ChartDataEntry alloc] initWithX:xValue y:yValue];
      [chartVals1 addObject:entry];
      }
    • 数据完成后,我们就要来创建折线了,创建 LineChartDataSet 对象,如果要只显示数据的最高点,需要设置 valueFormatter 和前面的一样,自定义一个 ChartMaxDataValueFormatter 类来完成。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      @import Charts;

      @interface ChartMaxDataValueFormatter : NSObject <IChartValueFormatter>

      - (instancetype)initWithYDataVals:(NSArray *)yVals;

      @end

      @interface ChartMaxDataValueFormatter ()

      @property (nonatomic, strong) NSArray *yDataValueArray;
      @property (nonatomic, assign) double maxDataSetIndex;

      @end

      @implementation ChartMaxDataValueFormatter

      - (instancetype)initWithYDataVals:(NSArray *)yVals {
      if (self = [super init]) {

      self.yDataValueArray = yVals;
      NSMutableArray *muArr = [NSMutableArray arrayWithArray:yVals];
      [muArr sortUsingComparator:^NSComparisonResult(id _Nonnull obj1, id _Nonnull obj2) {
      ChartDataEntry *entry1 =(ChartDataEntry *)obj1;
      ChartDataEntry *entry2 =(ChartDataEntry *)obj2;
      if (entry1.y >= entry2.y){
      return NSOrderedAscending;
      } else {
      return NSOrderedDescending;
      }
      }];
      self.maxDataSetIndex =((ChartDataEntry * )muArr[0]).x;
      }
      return self;
      }

      /// 实现协议方法,只显示折线上数据的最大值
      - (NSString * _Nonnull)stringForValue:(double)value
      entry:(ChartDataEntry * _Nonnull)entry
      dataSetIndex:(NSInteger)dataSetIndex
      viewPortHandler:(ChartViewPortHandler * _Nullable)viewPortHandler {

      if (entry.x == self.maxDataSetIndex) {
      return [NSString stringWithFormat:@"%ld%%", (NSInteger)entry.y];
      } else {
      return @"";
      }
      }

      @end
    • 最后还有个 ChartView 的选中数据代理方法,主要用来显示选中折线数据的时候 label 值的变化。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      - (void)chartValueSelected:(ChartViewBase * _Nonnull)chartView
      entry:(ChartDataEntry * _Nonnull)entry
      highlight:(ChartHighlight * _Nonnull)highlight {

      // 设置滑动时 Y 值标签
      self.markYLabel.text = [NSString stringWithFormat:@"%ld%%", (NSInteger)entry.y];

      // 将点击的数据滑动到中间
      [self.lineChartView centerViewToAnimatedWithXValue:entry.x
      yValue:entry.y
      axis:[self.lineChartView.data
      getDataSetByIndex:highlight.dataSetIndex].axisDependency
      duration:1.0];
      }

3.2 LineChart 绘制

  • XAxisValueFormatter.h

    1
    2
    3
    4
    5
    6
    7
    /// 设置 X 轴 数据格式

    @import Charts;

    @interface XAxisValueFormatter : NSObject <IChartAxisValueFormatter>

    @end
  • XAxisValueFormatter.m

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    @implementation XAxisValueFormatter

    /// 实现协议方法,返回 x 轴的数据
    - (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis {

    // value 为 x 轴的值

    return [NSString stringWithFormat:@"%ld天", (NSInteger)value];
    }

    @end
  • YAxisValueFormatter.h

    1
    2
    3
    4
    5
    6
    7
    /// 设置 Y 轴 数据格式

    @import Charts;

    @interface YAxisValueFormatter : NSObject <IChartAxisValueFormatter>

    @end
  • YAxisValueFormatter.m

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    @implementation YAxisValueFormatter

    /// 实现协议方法,返回 y 轴的数据
    - (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis {

    // value 为 y 轴的值

    return [NSString stringWithFormat:@"%ld%%",(NSInteger)value];
    }

    @end
  • ChartDataValueFormatter.h

    1
    2
    3
    4
    5
    6
    7
    /// 设置 折线显示的 数据格式

    @import Charts;

    @interface ChartDataValueFormatter : NSObject <IChartValueFormatter>

    @end
  • ChartDataValueFormatter.m

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    @implementation ChartDataValueFormatter

    /// 实现协议方法,返回折线拐点上显示的数据格式
    - (NSString * _Nonnull)stringForValue:(double)value
    entry:(ChartDataEntry * _Nonnull)entry
    dataSetIndex:(NSInteger)dataSetIndex
    viewPortHandler:(ChartViewPortHandler * _Nullable)viewPortHandler {

    return [NSString stringWithFormat:@"%.1f", entry.y];
    }

    @end
  • ChartMaxDataValueFormatter.h

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /// 设置 折线显示的 数据格式,只显示最大值

    @import Charts;

    @interface ChartMaxDataValueFormatter : NSObject <IChartValueFormatter>

    - (instancetype)initWithYDataVals:(NSArray *)yVals;

    @end
  • ChartMaxDataValueFormatter.m

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    @interface ChartMaxDataValueFormatter ()

    @property (nonatomic, strong) NSArray *yDataValueArray;
    @property (nonatomic, assign) double maxDataSetIndex;

    @end

    @implementation ChartMaxDataValueFormatter

    - (instancetype)initWithYDataVals:(NSArray *)yVals {
    if (self = [super init]) {

    self.yDataValueArray = yVals;
    NSMutableArray *muArr = [NSMutableArray arrayWithArray:yVals];
    [muArr sortUsingComparator:^NSComparisonResult(id _Nonnull obj1, id _Nonnull obj2) {
    ChartDataEntry *entry1 =(ChartDataEntry *)obj1;
    ChartDataEntry *entry2 =(ChartDataEntry *)obj2;
    if (entry1.y >= entry2.y){
    return NSOrderedAscending;
    } else {
    return NSOrderedDescending;
    }
    }];
    self.maxDataSetIndex =((ChartDataEntry * )muArr[0]).x;
    }
    return self;
    }

    /// 实现协议方法,只显示折线上数据的最大值
    - (NSString * _Nonnull)stringForValue:(double)value
    entry:(ChartDataEntry * _Nonnull)entry
    dataSetIndex:(NSInteger)dataSetIndex
    viewPortHandler:(ChartViewPortHandler * _Nullable)viewPortHandler {

    if (entry.x == self.maxDataSetIndex) {
    return [NSString stringWithFormat:@"%ld%%", (NSInteger)entry.y];
    } else {
    return @"";
    }
    }

    @end
  • ViewController.m

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    #import "ChartsDemo-Bridging-Header.h"

    // 自定义数据格式
    #import "YAxisValueFormatter.h"
    #import "XAxisValueFormatter.h"
    #import "ChartDataValueFormatter.h"
    #import "ChartMaxDataValueFormatter.h"

    // 遵守协议
    @interface ViewController () <ChartViewDelegate>

    // 折线图
    @property (nonatomic, strong) LineChartView *lineChartView;

    // 滑动时 Y 值标签
    @property (nonatomic,strong) UILabel *markYLabel;

    @end

    @implementation ViewController

    - (void)viewDidLoad {
    [super viewDidLoad];

    self.view.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1];

    // 创建折线图
    [self createdLineView];

    // 设置折线图的数据
    self.lineChartView.data = [self setData];
    }

    // 创建折线图
    - (void)createdLineView {

    // 初始化折线图对象
    self.lineChartView = [[LineChartView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width - 10, 400)];
    self.lineChartView.center = self.view.center;
    [self.view addSubview:self.lineChartView];

    // 设置基本样式
    self.lineChartView.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1];
    self.lineChartView.delegate = self; // 设置代理,需遵守 ChartViewDelegate 协议
    self.lineChartView.noDataText = @"暂无数据";

    // 设置交互样式
    self.lineChartView.scaleYEnabled = NO; // 取消 Y 轴缩放
    self.lineChartView.doubleTapToZoomEnabled = NO; // 取消双击缩放
    self.lineChartView.dragEnabled = YES; // 启用拖拽图标
    self.lineChartView.dragDecelerationEnabled = YES; // 拖拽后是否有惯性效果
    self.lineChartView.dragDecelerationFrictionCoef = 0.9; // 拖拽后惯性效果的摩擦系数(0~1),数值越小,惯性越不明显

    // 设置滑动时 Y 值标签
    ChartMarkerView *markerY = [[ChartMarkerView alloc] init];
    markerY.offset = CGPointMake(-999, -8);
    markerY.chartView = self.lineChartView;
    [markerY addSubview:self.markYLabel];
    self.lineChartView.marker = markerY;

    // 设置 X 轴样式
    ChartXAxis *xAxis = self.lineChartView.xAxis;
    xAxis.labelPosition = XAxisLabelPositionBottom; // 设置 X 轴的显示位置,默认是显示在上面的
    xAxis.axisLineWidth = 1.0 / [UIScreen mainScreen].scale; // 设置 X 轴线宽
    xAxis.axisLineColor = [UIColor blackColor]; // 设置 X 轴颜色
    xAxis.granularityEnabled = YES; // 设置重复的值不显示
    xAxis.valueFormatter = [[XAxisValueFormatter alloc] init]; // label 文字样式,自定义格式,默认时不显示特殊符号
    xAxis.labelTextColor = [self colorWithHexString:@"#057748"]; // label 文字颜色
    xAxis.drawGridLinesEnabled = NO; // 不绘制网格线
    xAxis.gridColor = [UIColor clearColor]; // 网格线颜色

    // 设置 Y 轴样式
    self.lineChartView.rightAxis.enabled = NO; // 不绘制右边轴
    ChartYAxis *leftAxis = self.lineChartView.leftAxis; // 获取左边 Y 轴
    leftAxis.inverted = NO; // 是否将 Y 轴进行上下翻转
    leftAxis.axisMinValue = 0; // 设置 Y 轴的最小值
    leftAxis.axisMaxValue = 105; // 设置 Y 轴的最大值
    leftAxis.axisLineWidth = 1.0 / [UIScreen mainScreen].scale; // 设置 Y 轴线宽
    leftAxis.axisLineColor = [UIColor blackColor]; // 设置 Y 轴颜色
    leftAxis.labelPosition = YAxisLabelPositionOutsideChart; // label 文字位置
    leftAxis.valueFormatter = [[YAxisValueFormatter alloc] init]; // label 文字样式,自定义格式,默认时不显示特殊符号
    leftAxis.labelTextColor = [self colorWithHexString:@"#057748"]; // label 文字颜色
    leftAxis.labelFont = [UIFont systemFontOfSize:10.0f]; // label 文字字体
    leftAxis.labelCount = 5; // label 数量,数值不一定,
    // 如果 forceLabelsEnabled 等于 YES,
    // 则强制绘制制定数量的 label, 但是可能不平均
    leftAxis.forceLabelsEnabled = NO; // 不强制绘制指定数量的 label
    leftAxis.gridLineDashLengths = @[@3.0f, @3.0f]; // 设置虚线样式的网格线
    leftAxis.gridColor = [UIColor colorWithRed:200/255.0f green:200/255.0f blue:200/255.0f alpha:1]; // 网格线颜色
    leftAxis.gridAntialiasEnabled = YES; // 网格线开启抗锯齿

    // 添加限制线
    ChartLimitLine *limitLine = [[ChartLimitLine alloc] initWithLimit:80 label:@"限制线"]; // 设置限制值和标题
    limitLine.lineWidth = 2; // 限制线的宽度
    limitLine.lineColor = [UIColor greenColor]; // 限制线的颜色
    limitLine.lineDashLengths = @[@5.0f, @5.0f]; // 虚线样式
    limitLine.labelPosition = ChartLimitLabelPositionRightTop; // label 位置
    limitLine.valueTextColor = [self colorWithHexString:@"#057748"]; // label 文字颜色
    limitLine.valueFont = [UIFont systemFontOfSize:12]; // label 字体
    [leftAxis addLimitLine:limitLine]; // 添加到 Y 轴上
    leftAxis.drawLimitLinesBehindDataEnabled = YES; // 设置限制线绘制在折线图的下面

    // 设置折线图描述
    self.lineChartView.chartDescription.enabled = YES; // 显示折线图描述,默认 YES 显示
    self.lineChartView.descriptionText = @"折线图"; // 折线图描述
    self.lineChartView.descriptionFont = [UIFont systemFontOfSize:15]; // 折线图描述字体
    self.lineChartView.descriptionTextColor = [UIColor darkGrayColor]; // 折线图描述颜色

    // 设置折线图图例
    self.lineChartView.legend.enabled = YES; // 显示图例,默认 YES 显示
    self.lineChartView.legend.form = ChartLegendFormLine; // 图例的样式
    self.lineChartView.legend.formSize = 30; // 图例中线条的长度
    self.lineChartView.legend.textColor = [UIColor darkGrayColor]; // 图例文字颜色

    // 设置动画效果,可以设置 X 轴和 Y 轴的动画效果
    [self.lineChartView animateWithXAxisDuration:1.0f];
    }

    // 设置折线图数据
    - (LineChartData *)setData{

    int vals_count = 50; // 要显示多少条数据

    // 设置表格数据,包含 x 值和 y 值
    NSMutableArray *chartVals1 = [[NSMutableArray alloc] init];
    for (int i = 0; i < vals_count; i++) {

    double xValue = i + 1;
    double yValue = arc4random() % 100;

    // 设置表格数据,x 轴和 y 轴的值
    ChartDataEntry *entry = [[ChartDataEntry alloc] initWithX:xValue y:yValue];
    [chartVals1 addObject:entry];
    }

    // 绘制折线图
    LineChartDataSet *set1 = nil;
    if (self.lineChartView.data.dataSetCount > 0) {

    LineChartData *data = (LineChartData *)self.lineChartView.data;
    set1 = (LineChartDataSet *)data.dataSets[0];
    set1.values = chartVals1;
    // set1.valueFormatter = [[ChartMaxDataValueFormatter alloc] initWithYDataVals:chartVals1]; // 设置数据显示的格式,只显示最大值
    return data;

    } else {

    // 创建 LineChartDataSet 对象
    set1 = [[LineChartDataSet alloc] initWithValues:chartVals1 label:@"lineName 1"]; // label 折线图图例名称

    // 设置折线的样式
    set1.lineWidth = 1.0 / [UIScreen mainScreen].scale; // 折线宽度
    [set1 setColor:[self colorWithHexString:@"#007FFF"]]; // 折线颜色
    set1.drawValuesEnabled = YES; // 是否在拐点处显示数据,默认 YES
    set1.valueColors = @[[UIColor brownColor]]; // 折线拐点处显示数据的颜色
    set1.drawSteppedEnabled = NO; // 是否开启绘制阶梯样式的折线图,默认 NO
    // set1.valueFormatter = [[ChartMaxDataValueFormatter alloc] initWithYDataVals:chartVals1]; // 设置数据显示的格式,只显示最大值

    // 折线拐点样式
    set1.drawCirclesEnabled = YES; // 是否绘制拐点,默认 YES
    set1.circleRadius = 4.0f; // 拐点半径
    set1.circleColors = @[[UIColor redColor], [UIColor greenColor]]; // 拐点颜色

    // 拐点中间的空心样式
    set1.drawCircleHoleEnabled = YES; // 是否绘制中间的空心,默认 YES
    set1.circleHoleRadius = 2.0f; // 空心的半径
    set1.circleHoleColor = [UIColor blackColor]; // 空心的颜色

    // 折线的颜色填充样式

    // 第一种填充样式:单色填充
    // set1.drawFilledEnabled = YES; // 是否填充颜色,默认 NO
    // set1.fillColor = [UIColor redColor]; // 填充颜色
    // set1.fillAlpha = 0.3; // 填充颜色的透明度

    // 第二种填充样式:渐变填充
    set1.drawFilledEnabled = YES; // 是否填充颜色,默认 NO
    NSArray *gradientColors = @[(id)[ChartColorTemplates colorFromString:@"#FFFFFFFF"].CGColor,
    (id)[ChartColorTemplates colorFromString:@"#FF007FFF"].CGColor];
    CGGradientRef gradientRef = CGGradientCreateWithColors(nil, (CFArrayRef)gradientColors, nil);
    set1.fill = [ChartFill fillWithLinearGradient:gradientRef angle:90.0f]; // 赋值填充颜色对象
    CGGradientRelease(gradientRef); // 释放 gradientRef
    set1.fillAlpha = 0.3f; // 透明度

    // 点击选中拐点的交互样式
    set1.highlightEnabled = YES; // 选中拐点,是否开启高亮效果(显示十字线),默认 YES
    set1.highlightColor = [self colorWithHexString:@"#c83c23"]; // 点击选中拐点的十字线的颜色
    set1.highlightLineWidth = 1.0 / [UIScreen mainScreen].scale; // 十字线宽度
    set1.highlightLineDashLengths = @[@5, @5]; // 十字线的虚线样式

    // 将 LineChartDataSet 对象放入数组中
    NSMutableArray *dataSets = [[NSMutableArray alloc] init];
    [dataSets addObject:set1];

    // 添加第二个 LineChartDataSet 对象
    LineChartDataSet *set2 = [set1 copy];
    set2.label = @"lineName 2";
    NSMutableArray *chartVals2 = [[NSMutableArray alloc] init];
    for (int i = 0; i < vals_count; i++) {

    double xValue = i + 1;
    double yValue = arc4random() % 100;

    ChartDataEntry *entry = [[ChartDataEntry alloc] initWithX:xValue y:yValue];
    [chartVals2 addObject:entry];
    }
    set2.values = chartVals2;
    [set2 setColor:[UIColor redColor]];
    set2.drawFilledEnabled = YES;
    set2.fillColor = [UIColor redColor];
    set2.fillAlpha = 0.1;
    [dataSets addObject:set2];

    // 创建 LineChartData 对象, 此对象就是 lineChartView 需要最终数据对象
    LineChartData *data = [[LineChartData alloc] initWithDataSets:dataSets];
    [data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:8.f]]; // 文字字体
    [data setValueTextColor:[UIColor grayColor]]; // 文字颜色

    // 自定义数据显示格式
    ChartDataValueFormatter *formatter = [[ChartDataValueFormatter alloc] init]; // 统一设置数据显示的格式
    [data setValueFormatter:formatter];

    return data;
    }
    }

    #pragma mark - ChartViewDelegate

    // 点击选中折线拐点时回调
    - (void)chartValueSelected:(ChartViewBase * _Nonnull)chartView
    entry:(ChartDataEntry * _Nonnull)entry
    highlight:(ChartHighlight * _Nonnull)highlight {

    // 设置滑动时 Y 值标签
    self.markYLabel.text = [NSString stringWithFormat:@"%ld%%", (NSInteger)entry.y];

    // 将点击的数据滑动到中间
    [self.lineChartView centerViewToAnimatedWithXValue:entry.x
    yValue:entry.y
    axis:[self.lineChartView.data
    getDataSetByIndex:highlight.dataSetIndex].axisDependency
    duration:1.0];
    }

    // 没有选中折线拐点时回调
    - (void)chartValueNothingSelected:(ChartViewBase * _Nonnull)chartView {

    }

    // 放大折线图时回调
    - (void)chartScaled:(ChartViewBase * _Nonnull)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY {

    }

    // 拖拽折线图时回调
    - (void)chartTranslated:(ChartViewBase * _Nonnull)chartView dX:(CGFloat)dX dY:(CGFloat)dY {

    }

    // 懒加载滑动时 Y 值标签
    - (UILabel *)markYLabel {

    if (!_markYLabel) {
    _markYLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, -5, 35, 25)];
    _markYLabel.font = [UIFont systemFontOfSize:15.0];
    _markYLabel.textAlignment = NSTextAlignmentCenter;
    _markYLabel.text = @"";
    _markYLabel.textColor = [UIColor whiteColor];
    _markYLabel.backgroundColor = [UIColor grayColor];
    }
    return _markYLabel;
    }

    // 由十六进制创建颜色
    - (UIColor *)colorWithHexString:(NSString *)color {

    NSString *cString = [[color stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]] uppercaseString];

    // String should be 6 or 8 characters
    if ([cString length] < 6) {
    return [UIColor clearColor];
    }

    // strip "0X" or "#" if it appears
    if ([cString hasPrefix:@"0X"])
    cString = [cString substringFromIndex:2];
    if ([cString hasPrefix:@"#"])
    cString = [cString substringFromIndex:1];
    if ([cString length] != 6)
    return [UIColor clearColor];

    // Separate into r, g, b substrings
    NSRange range;
    range.location = 0;
    range.length = 2;

    // r
    NSString *rString = [cString substringWithRange:range];

    // g
    range.location = 2;
    NSString *gString = [cString substringWithRange:range];

    // b
    range.location = 4;
    NSString *bString = [cString substringWithRange:range];

    // Scan values
    unsigned int r, g, b;
    [[NSScanner scannerWithString:rString] scanHexInt:&r];
    [[NSScanner scannerWithString:gString] scanHexInt:&g];
    [[NSScanner scannerWithString:bString] scanHexInt:&b];
    return [UIColor colorWithRed:((float) r / 255.0f) green:((float) g / 255.0f) blue:((float) b / 255.0f) alpha:1.0f];
    }

    @end
    • 效果

  • 如果绘制光滑的曲线图,可以设置 set 的 mode 值为 LineChartModeCubicBezier,不设置 drawValuesEnabled 的值。

    1
    2
    3
    4
    5
    6
    // 绘制光滑曲线
    set1.mode = LineChartModeCubicBezier;
    set1.cubicIntensity = 0.2;

    // 是否开启绘制阶梯样式的折线图,默认 NO
    // set1.drawSteppedEnabled = NO;
    • 效果

4、绘制柱状图

  • XAxisValueFormatter.h

    1
    2
    3
    4
    5
    6
    7
    /// 设置 X 轴 数据格式

    @import Charts;

    @interface XAxisValueFormatter : NSObject <IChartAxisValueFormatter>

    @end
  • XAxisValueFormatter.m

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    @implementation XAxisValueFormatter

    /// 实现协议方法,返回 x 轴的数据
    - (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis {

    // value 为 x 轴的值

    return [NSString stringWithFormat:@"%ld天", (NSInteger)value];
    }

    @end
  • YAxisValueFormatter.h

    1
    2
    3
    4
    5
    6
    7
    /// 设置 Y 轴 数据格式

    @import Charts;

    @interface YAxisValueFormatter : NSObject <IChartAxisValueFormatter>

    @end
  • YAxisValueFormatter.m

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    @implementation YAxisValueFormatter

    /// 实现协议方法,返回 y 轴的数据
    - (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis {

    // value 为 y 轴的值

    return [NSString stringWithFormat:@"%ld%%",(NSInteger)value];
    }

    @end
  • ChartDataValueFormatter.h

    1
    2
    3
    4
    5
    6
    7
    /// 设置 柱形上显示的 数据格式

    @import Charts;

    @interface ChartDataValueFormatter : NSObject <IChartValueFormatter>

    @end
  • ChartDataValueFormatter.m

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    @implementation ChartDataValueFormatter

    /// 实现协议方法,返回柱形上显示的数据格式
    - (NSString * _Nonnull)stringForValue:(double)value
    entry:(ChartDataEntry * _Nonnull)entry
    dataSetIndex:(NSInteger)dataSetIndex
    viewPortHandler:(ChartViewPortHandler * _Nullable)viewPortHandler {

    return [NSString stringWithFormat:@"%.1f", entry.y];
    }

    @end
  • ChartMaxDataValueFormatter.h

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /// 设置 柱形上显示的 数据格式,只显示最大值

    @import Charts;

    @interface ChartMaxDataValueFormatter : NSObject <IChartValueFormatter>

    - (instancetype)initWithYDataVals:(NSArray *)yVals;

    @end
  • ChartMaxDataValueFormatter.m

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    @interface ChartMaxDataValueFormatter ()

    @property (nonatomic, strong) NSArray *yDataValueArray;
    @property (nonatomic, assign) double maxDataSetIndex;

    @end

    @implementation ChartMaxDataValueFormatter

    - (instancetype)initWithYDataVals:(NSArray *)yVals {
    if (self = [super init]) {

    self.yDataValueArray = yVals;
    NSMutableArray *muArr = [NSMutableArray arrayWithArray:yVals];
    [muArr sortUsingComparator:^NSComparisonResult(id _Nonnull obj1, id _Nonnull obj2) {
    ChartDataEntry *entry1 =(ChartDataEntry *)obj1;
    ChartDataEntry *entry2 =(ChartDataEntry *)obj2;
    if (entry1.y >= entry2.y){
    return NSOrderedAscending;
    } else {
    return NSOrderedDescending;
    }
    }];
    self.maxDataSetIndex =((ChartDataEntry * )muArr[0]).x;
    }
    return self;
    }

    /// 实现协议方法,只显示柱形上数据的最大值
    - (NSString * _Nonnull)stringForValue:(double)value
    entry:(ChartDataEntry * _Nonnull)entry
    dataSetIndex:(NSInteger)dataSetIndex
    viewPortHandler:(ChartViewPortHandler * _Nullable)viewPortHandler {

    if (entry.x == self.maxDataSetIndex) {
    return [NSString stringWithFormat:@"%ld%%", (NSInteger)entry.y];
    } else {
    return @"";
    }
    }

    @end
  • ViewController.m

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    #import "ChartsDemo-Bridging-Header.h"

    // 自定义数据格式
    #import "YAxisValueFormatter.h"
    #import "XAxisValueFormatter.h"
    #import "ChartDataValueFormatter.h"
    #import "ChartMaxDataValueFormatter.h"

    // 遵守协议
    @interface ViewController () <ChartViewDelegate>

    // 柱状图
    @property (nonatomic, strong) BarChartView *barChartView;

    // 滑动时 Y 值标签
    @property (nonatomic,strong) UILabel *markYLabel;

    @end

    @implementation ViewController

    - (void)viewDidLoad {
    [super viewDidLoad];

    self.view.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1];

    // 创建柱状图
    [self createdBarView];

    // 设置柱状图的数据
    self.barChartView.data = [self setData];
    }

    // 创建柱状图
    - (void)createdBarView {

    // 初始化柱状图对象
    self.barChartView = [[BarChartView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width - 10, 400)];
    self.barChartView.center = self.view.center;
    [self.view addSubview:self.barChartView];

    // 设置基本样式
    self.barChartView.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1];
    self.barChartView.delegate = self; // 设置代理,需遵守 ChartViewDelegate 协议
    self.barChartView.noDataText = @"暂无数据"; // 没有数据时的文字提示
    self.barChartView.drawValueAboveBarEnabled = YES; // 数值显示在柱形的上面还是下面
    self.barChartView.drawBarShadowEnabled = NO; // 是否绘制柱形的阴影背景

    // 设置交互样式
    self.barChartView.scaleYEnabled = NO; // 取消 Y 轴缩放
    self.barChartView.doubleTapToZoomEnabled = NO; // 取消双击缩放
    self.barChartView.dragEnabled = YES; // 启用拖拽图标
    self.barChartView.dragDecelerationEnabled = YES; // 拖拽后是否有惯性效果
    self.barChartView.dragDecelerationFrictionCoef = 0.9; // 拖拽后惯性效果的摩擦系数(0~1),数值越小,惯性越不明显

    // 设置滑动时 Y 值标签
    ChartMarkerView *markerY = [[ChartMarkerView alloc] init];
    markerY.offset = CGPointMake(-17, -25); // 设置显示位置
    markerY.chartView = self.barChartView;
    [markerY addSubview:self.markYLabel];
    self.barChartView.marker = markerY;

    // 设置 X 轴样式
    ChartXAxis *xAxis = self.barChartView.xAxis;
    xAxis.labelPosition = XAxisLabelPositionBottom; // 设置 X 轴的显示位置,默认是显示在上面的
    xAxis.axisLineWidth = 1.0 / [UIScreen mainScreen].scale; // 设置 X 轴线宽
    xAxis.axisLineColor = [UIColor blackColor]; // 设置 X 轴颜色
    xAxis.valueFormatter = [[XAxisValueFormatter alloc] init]; // label 文字样式,自定义格式,默认时不显示特殊符号
    xAxis.labelTextColor = [UIColor brownColor]; // label 文字颜色
    xAxis.drawGridLinesEnabled = NO; // 不绘制网格线
    xAxis.gridColor = [UIColor clearColor]; // 网格线颜色

    // 设置 Y 轴样式
    self.barChartView.rightAxis.enabled = NO; // 不绘制右边轴
    ChartYAxis *leftAxis = self.barChartView.leftAxis; // 获取左边 Y 轴
    leftAxis.inverted = NO; // 是否将 Y 轴进行上下翻转
    leftAxis.axisMinValue = 0; // 设置 Y 轴的最小值
    leftAxis.axisMaxValue = 105; // 设置 Y 轴的最大值
    leftAxis.axisLineWidth = 1.0 / [UIScreen mainScreen].scale; // 设置 Y 轴线宽
    leftAxis.axisLineColor = [UIColor blackColor]; // 设置 Y 轴颜色
    leftAxis.labelPosition = YAxisLabelPositionOutsideChart; // label 文字位置
    leftAxis.valueFormatter = [[YAxisValueFormatter alloc] init]; // label 文字样式,自定义格式,默认时不显示特殊符号
    leftAxis.labelTextColor = [UIColor brownColor]; // label 文字颜色
    leftAxis.labelFont = [UIFont systemFontOfSize:10.0f]; // label 文字字体
    leftAxis.labelCount = 5; // label 数量,数值不一定,
    // 如果 forceLabelsEnabled 等于 YES,
    // 则强制绘制制定数量的 label, 但是可能不平均
    leftAxis.forceLabelsEnabled = NO; // 不强制绘制指定数量的 label
    leftAxis.gridLineDashLengths = @[@3.0f, @3.0f]; // 设置虚线样式的网格线
    leftAxis.gridColor = [UIColor colorWithRed:200/255.0f green:200/255.0f blue:200/255.0f alpha:1]; // 网格线颜色
    leftAxis.gridAntialiasEnabled = YES; // 网格线开启抗锯齿

    // 添加限制线
    ChartLimitLine *limitLine = [[ChartLimitLine alloc] initWithLimit:80 label:@"限制线"]; // 设置限制值和标题
    limitLine.lineWidth = 2; // 限制线的宽度
    limitLine.lineColor = [UIColor greenColor]; // 限制线的颜色
    limitLine.lineDashLengths = @[@5.0f, @5.0f]; // 虚线样式
    limitLine.labelPosition = ChartLimitLabelPositionRightTop; // label 位置
    limitLine.valueTextColor = [UIColor grayColor]; // label 文字颜色
    limitLine.valueFont = [UIFont systemFontOfSize:12]; // label 字体
    [leftAxis addLimitLine:limitLine]; // 添加到 Y 轴上
    leftAxis.drawLimitLinesBehindDataEnabled = YES; // 设置限制线绘制在柱状图的下面

    // 设置柱状图描述
    self.barChartView.chartDescription.enabled = YES; // 显示柱状图描述,默认 YES 显示
    self.barChartView.descriptionText = @"柱状图"; // 柱状图描述
    self.barChartView.descriptionFont = [UIFont systemFontOfSize:15]; // 柱状图描述字体
    self.barChartView.descriptionTextColor = [UIColor darkGrayColor]; // 柱状图描述颜色

    // 设置柱状图图例
    self.barChartView.legend.enabled = NO; // 显示图例,默认 YES 显示

    // 设置动画效果,可以设置 X 轴和 Y 轴的动画效果
    [self.barChartView animateWithYAxisDuration:1.0f];
    }

    // 设置柱状图数据
    - (BarChartData *)setData {

    int vals_count = 50; // 要显示多少条数据

    // 设置表格数据,包含 x 值和 y 值
    NSMutableArray *chartVals1 = [[NSMutableArray alloc] init];
    for (int i = 0; i < vals_count; i++) {

    double xValue = i + 1;
    double yValue = arc4random() % 100;

    // 设置表格数据,x 轴和 y 轴的值
    BarChartDataEntry *entry = [[BarChartDataEntry alloc] initWithX:xValue y:yValue];
    [chartVals1 addObject:entry];
    }

    // 绘制柱状图

    // 创建 BarChartDataSet 对象
    BarChartDataSet *set1 = [[BarChartDataSet alloc] initWithValues:chartVals1 label:nil];

    // 设置柱形的样式
    [set1 setColors:ChartColorTemplates.material]; // 设置柱形图颜色
    set1.drawValuesEnabled = YES; // 是否显示数据,默认 YES
    set1.valueColors = @[[UIColor brownColor]]; // 显示数据的颜色
    set1.highlightEnabled = YES; // 点击选中柱形图是否有高亮效果,(双击空白处取消选中)
    // set1.valueFormatter = [[ChartMaxDataValueFormatter alloc] initWithYDataVals:chartVals1]; // 设置数据显示的格式,只显示最大值

    // 将 BarChartDataSet 对象放入数组中
    NSMutableArray *dataSets = [[NSMutableArray alloc] init];
    [dataSets addObject:set1];

    // 创建 BarChartData 对象, 此对象就是 BarChartData 需要最终数据对象
    BarChartData *data = [[BarChartData alloc] initWithDataSets:dataSets];
    [data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:8.f]]; // 文字字体
    [data setValueTextColor:[UIColor grayColor]]; // 文字颜色

    // 自定义数据显示格式
    ChartDataValueFormatter *formatter = [[ChartDataValueFormatter alloc] init];// 统一设置数据显示的格式
    [data setValueFormatter:formatter];

    return data;
    }

    #pragma mark - ChartViewDelegate

    // 点击选中柱形图时的代理方法
    - (void)chartValueSelected:(ChartViewBase * _Nonnull)chartView
    entry:(ChartDataEntry * _Nonnull)entry
    highlight:(ChartHighlight * _Nonnull)highlight {

    // 设置滑动时 Y 值标签
    self.markYLabel.text = [NSString stringWithFormat:@"%ld%%", (NSInteger)entry.y];

    // 将点击的数据滑动到中间
    [self.barChartView centerViewToAnimatedWithXValue:entry.x
    yValue:entry.y
    axis:[self.barChartView.data
    getDataSetByIndex:highlight.dataSetIndex].axisDependency
    duration:1.0];
    }

    // 没有选中柱形图时的代理方法,当选中一个柱形图后,在空白处双击,就可以取消选择,此时会回调此方法
    - (void)chartValueNothingSelected:(ChartViewBase * _Nonnull)chartView {

    }

    // 捏合放大或缩小柱形图时的代理方法
    - (void)chartScaled:(ChartViewBase * _Nonnull)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY {

    }

    // 拖拽图表时的代理方法
    - (void)chartTranslated:(ChartViewBase * _Nonnull)chartView dX:(CGFloat)dX dY:(CGFloat)dY {

    }

    // 懒加载滑动时 Y 值标签
    - (UILabel *)markYLabel {

    if (!_markYLabel) {
    _markYLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, -5, 35, 25)];
    _markYLabel.font = [UIFont systemFontOfSize:15.0];
    _markYLabel.textAlignment = NSTextAlignmentCenter;
    _markYLabel.text = @"";
    _markYLabel.textColor = [UIColor whiteColor];
    _markYLabel.backgroundColor = [UIColor grayColor];
    }
    return _markYLabel;
    }

    @end
    • 效果

  • 如果要显示水平柱状图,只需要把 BarChartView 换成 HorizontalBarChartView 即可。

    1
    2
    3
    4
    5
    // 声明柱状图
    @property (nonatomic, strong) HorizontalBarChartView *barChartView;

    // 初始化柱状图对象
    self.barChartView = [[HorizontalBarChartView alloc] initWithFrame:frame];
    • 效果

5、绘制饼图

  • ChartDataValueFormatter.h

    1
    2
    3
    4
    5
    6
    7
    /// 设置 折线显示的 数据格式

    @import Charts;

    @interface ChartDataValueFormatter : NSObject <IChartValueFormatter>

    @end
  • ChartDataValueFormatter.m

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    @implementation ChartDataValueFormatter

    /// 实现协议方法,返回折线拐点上显示的数据格式
    - (NSString * _Nonnull)stringForValue:(double)value
    entry:(ChartDataEntry * _Nonnull)entry
    dataSetIndex:(NSInteger)dataSetIndex
    viewPortHandler:(ChartViewPortHandler * _Nullable)viewPortHandler {

    return [NSString stringWithFormat:@"%.0f%%", entry.y];
    }

    @end
  • ViewController.m

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    #import "ChartsDemo-Bridging-Header.h"

    // 自定义数据格式
    #import "ChartDataValueFormatter.h"

    // 遵守协议
    @interface ViewController () <ChartViewDelegate>

    // 饼状图
    @property (nonatomic, strong) PieChartView *pieChartView;

    @end

    @implementation ViewController

    - (void)viewDidLoad {
    [super viewDidLoad];

    self.view.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1];

    // 创建饼状图
    [self createdPieView];

    // 设置饼状图的数据
    self.pieChartView.data = [self setData];
    }

    // 创建饼状图
    - (void)createdPieView {

    // 初始化饼状图对象
    self.pieChartView = [[PieChartView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width - 10, 400)];
    self.pieChartView.center = self.view.center;
    [self.view addSubview:self.pieChartView];

    // 设置基本样式
    self.pieChartView.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1];
    self.pieChartView.delegate = self; // 设置代理,需遵守 ChartViewDelegate 协议
    self.pieChartView.noDataText = @"暂无数据"; // 没有数据时的文字提示
    [self.pieChartView setExtraOffsetsWithLeft:30 top:0 right:30 bottom:0]; // 饼状图距离边缘的间隙
    self.pieChartView.usePercentValuesEnabled = YES; // 是否根据所提供的数据, 将显示数据转换为百分比格式
    self.pieChartView.drawSliceTextEnabled = YES; // 是否显示区块文本

    // 设置交互样式
    self.pieChartView.dragDecelerationEnabled = YES; // 拖拽后是否有惯性效果
    self.pieChartView.dragDecelerationFrictionCoef = 0.9; // 拖拽后惯性效果的摩擦系数(0~1),数值越小,惯性越不明显

    // 设置饼状图中间的空心样式
    // 空心有两个圆组成, 一个是 hole, 一个是 transparentCircle, transparentCircle 里面是 hole
    self.pieChartView.drawHoleEnabled = YES; // 饼状图是否是空心
    self.pieChartView.holeColor = [UIColor clearColor]; // 空心颜色
    self.pieChartView.holeRadiusPercent = 0.5; // 空心半径占比
    self.pieChartView.transparentCircleRadiusPercent = 0.52; // 半透明空心半径占比
    self.pieChartView.transparentCircleColor = [UIColor colorWithRed:210/255.0 green:145/255.0 blue:165/255.0 alpha:0.3];
    // 半透明空心的颜色
    // 设置饼状图中心的文本
    if (self.pieChartView.isDrawHoleEnabled == YES) {

    self.pieChartView.drawCenterTextEnabled = YES; // 是否显示中间文字

    // 普通文本
    // self.pieChartView.centerText = @"饼状图"; // 中间文字

    // 富文本
    NSMutableAttributedString *centerText = [[NSMutableAttributedString alloc] initWithString:@"饼状图"];
    [centerText setAttributes:@{NSFontAttributeName: [UIFont boldSystemFontOfSize:16],
    NSForegroundColorAttributeName: [UIColor orangeColor]}
    range:NSMakeRange(0, centerText.length)];
    self.pieChartView.centerAttributedText = centerText;
    }

    // 设置饼状图描述
    self.pieChartView.chartDescription.enabled = YES; // 显示饼状图描述,默认 YES 显示
    self.pieChartView.descriptionText = @"饼状图";
    self.pieChartView.descriptionFont = [UIFont systemFontOfSize:15];
    self.pieChartView.descriptionTextColor = [UIColor grayColor];

    // 设置饼状图图例
    self.pieChartView.legend.enabled = YES; // 显示图例,默认 YES 显示
    self.pieChartView.legend.form = ChartLegendFormCircle; // 图示样式: 方形、线条、圆形
    self.pieChartView.legend.formSize = 12; // 图示大小
    self.pieChartView.legend.position = ChartLegendPositionBelowChartCenter; // 图例在饼状图中的位置
    self.pieChartView.legend.maxSizePercent = 1; // 图例在饼状图中的大小占比, 这会影响图例的宽高
    self.pieChartView.legend.formToTextSpace = 5; // 文本间隔
    self.pieChartView.legend.font = [UIFont systemFontOfSize:10]; // 字体大小
    self.pieChartView.legend.textColor = [UIColor grayColor]; // 字体颜色

    // 设置动画效果,可以设置 X 轴和 Y 轴的动画效果
    [self.pieChartView animateWithYAxisDuration:1.0f];
    }

    // 设置饼状图数据
    - (PieChartData *)setData {

    int vals_count = 5; // 饼状图总共有几块组成

    // 每个区块的数据,包含 区块名称 和 区块数据
    NSMutableArray *chartVals1 = [[NSMutableArray alloc] init];
    for (int i = 0; i < vals_count; i++) {

    NSString *partLabel = [NSString stringWithFormat:@"part%d", i]; // 设置区块名称
    double partValue = arc4random() % 100; // 设置区块值

    PieChartDataEntry *entry = [[PieChartDataEntry alloc] initWithValue:partValue label:partLabel];
    [chartVals1 addObject:entry];
    }

    // 绘制饼状图

    // 创建 PieChartDataSet 对象
    PieChartDataSet *set1 = [[PieChartDataSet alloc] initWithValues:chartVals1 label:nil];

    // 设置区块
    NSMutableArray *colors = [[NSMutableArray alloc] init];
    [colors addObjectsFromArray:ChartColorTemplates.vordiplom];
    [colors addObjectsFromArray:ChartColorTemplates.joyful];
    [colors addObjectsFromArray:ChartColorTemplates.colorful];
    [colors addObjectsFromArray:ChartColorTemplates.liberty];
    [colors addObjectsFromArray:ChartColorTemplates.pastel];
    [colors addObject:[UIColor colorWithRed:51/255.f green:181/255.f blue:229/255.f alpha:1.f]];
    set1.colors = colors; // 设置区块颜色
    set1.sliceSpace = 0; // 相邻区块之间的间距
    set1.selectionShift = 8; // 选中区块时, 放大的半径

    // 设置区块名称
    set1.xValuePosition = PieChartValuePositionInsideSlice; // 区块名称位置
    set1.entryLabelColor = [UIColor redColor]; // 区块名称颜色
    set1.entryLabelFont = [UIFont systemFontOfSize:15]; // 区块名称字体

    // 设置区块数据
    set1.drawValuesEnabled = YES; // 是否绘制显示数据
    set1.yValuePosition = PieChartValuePositionOutsideSlice; // 区块数据位置

    // 数据与区块之间的用于指示的折线样式
    set1.valueLinePart1OffsetPercentage = 0.85; // 折线中第一段起始位置相对于区块的偏移量, 数值越大, 折线距离区块越远
    set1.valueLinePart1Length = 0.5; // 折线中第一段长度占比
    set1.valueLinePart2Length = 0.4; // 折线中第二段长度最大占比
    set1.valueLineWidth = 1; // 折线的粗细
    set1.valueLineColor = [UIColor brownColor]; // 折线颜色

    // 将 PieChartDataSet 对象放入数组中
    NSMutableArray *dataSets = [[NSMutableArray alloc] init];
    [dataSets addObject:set1];

    // 创建 PieChartData 对象, 此对象就是 PieChartData 需要最终数据对象
    PieChartData *data = [[PieChartData alloc] initWithDataSets:dataSets];
    [data setValueFont:[UIFont systemFontOfSize:10]];
    [data setValueTextColor:[UIColor brownColor]];

    // 自定义数据显示格式
    ChartDataValueFormatter *formatter = [[ChartDataValueFormatter alloc] init];// 统一设置数据显示的格式
    [data setValueFormatter:formatter];

    return data;
    }

    #pragma mark - ChartViewDelegate

    // 点击选中柱形图时的代理方法
    - (void)chartValueSelected:(ChartViewBase * _Nonnull)chartView
    entry:(ChartDataEntry * _Nonnull)entry
    highlight:(ChartHighlight * _Nonnull)highlight {

    }

    // 没有选中柱形图时的代理方法,当选中一个柱形图后,在空白处双击,就可以取消选择,此时会回调此方法
    - (void)chartValueNothingSelected:(ChartViewBase * _Nonnull)chartView {

    }

    // 捏合放大或缩小柱形图时的代理方法
    - (void)chartScaled:(ChartViewBase * _Nonnull)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY {

    }

    // 拖拽图表时的代理方法
    - (void)chartTranslated:(ChartViewBase * _Nonnull)chartView dX:(CGFloat)dX dY:(CGFloat)dY {

    }

    @end
    • 效果

  • 如果不需要空心样式的饼状图, 可以将饼状图的 drawHoleEnabled 赋值为 NO, 将中间的文本去掉即可。

    1
    2
    // 饼状图是否是空心
    self.pieChartView.drawHoleEnabled = NO;
    • 效果

  • 每个区块之间如果需要间距, 可以通过 dataSet 对象的 sliceSpace 属性设置,

    1
    2
    // 相邻区块之间的间距
    set1.sliceSpace = 4;
    • 效果

6、绘制雷达图

  • XAxisValueFormatter.h

    1
    2
    3
    4
    5
    6
    7
    /// 设置 X 轴 数据格式

    @import Charts;

    @interface XAxisValueFormatter : NSObject <IChartAxisValueFormatter>

    @end
  • XAxisValueFormatter.m

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    @implementation XAxisValueFormatter

    /// 实现协议方法,返回 x 轴的数据
    - (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis {

    // value 为 x 轴的值

    return [NSString stringWithFormat:@"%ld 月", (NSInteger)value + 1];
    }

    @end
  • ChartDataValueFormatter.h

    1
    2
    3
    4
    5
    6
    7
    /// 设置 折线显示的 数据格式

    @import Charts;

    @interface ChartDataValueFormatter : NSObject <IChartValueFormatter>

    @end
  • ChartDataValueFormatter.m

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    @implementation ChartDataValueFormatter

    /// 实现协议方法,返回辐射线拐点上显示的数据格式
    - (NSString * _Nonnull)stringForValue:(double)value
    entry:(ChartDataEntry * _Nonnull)entry
    dataSetIndex:(NSInteger)dataSetIndex
    viewPortHandler:(ChartViewPortHandler * _Nullable)viewPortHandler {

    return [NSString stringWithFormat:@"%.0f%%", entry.y];
    }

    @end
  • ViewController.m

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    #import "ChartsDemo-Bridging-Header.h"

    // 自定义数据格式
    #import "XAxisValueFormatter.h"
    #import "ChartDataValueFormatter.h"

    // 遵守协议
    @interface ViewController () <ChartViewDelegate>

    // 雷达图
    @property (nonatomic, strong) RadarChartView *radarChartView;

    // 滑动时 Y 值标签
    @property (nonatomic,strong) UILabel *markYLabel;

    @end

    @implementation ViewController

    - (void)viewDidLoad {
    [super viewDidLoad];

    self.view.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1];

    // 创建雷达图
    [self createdPieView];

    // 设置雷达图的数据
    self.radarChartView.data = [self setData];
    }

    // 创建雷达图
    - (void)createdPieView {

    // 初始化雷达图对象
    self.radarChartView = [[RadarChartView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width - 20, 400)];
    self.radarChartView.center = self.view.center;
    [self.view addSubview:self.radarChartView];

    // 设置基本样式
    self.radarChartView.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1];
    self.radarChartView.delegate = self; // 设置代理,需遵守 ChartViewDelegate 协议
    self.radarChartView.noDataText = @"暂无数据"; // 没有数据时的文字提示

    // 设置交互样式
    self.radarChartView.rotationEnabled = YES; // 是否允许转动
    self.radarChartView.highlightPerTapEnabled = YES; // 是否能被选中

    // 设置雷达图线条样式
    self.radarChartView.webLineWidth = 1.0; // 主干线线宽,辐射线
    self.radarChartView.webColor = [UIColor lightGrayColor]; // 主干线颜色
    self.radarChartView.innerWebLineWidth = 1.0; // 边线宽度,圆形线
    self.radarChartView.innerWebColor = [UIColor lightGrayColor]; // 边线颜色
    self.radarChartView.webAlpha = 0.5; // 雷达图线的透明度

    // 设置滑动时 Y 值标签
    ChartMarkerView *markerY = [[ChartMarkerView alloc] init];
    markerY.offset = CGPointMake(-17, -25); // 设置显示位置
    markerY.chartView = self.radarChartView;
    [markerY addSubview:self.markYLabel];
    self.radarChartView.marker = markerY;

    // 设置 X 轴 label 样式,由中心向外延伸的线
    ChartXAxis *xAxis = self.radarChartView.xAxis;
    xAxis.valueFormatter = [[XAxisValueFormatter alloc] init]; // label 文字样式,自定义格式,默认时不显示特殊符号
    xAxis.labelFont = [UIFont systemFontOfSize:15]; // 字体
    xAxis.labelTextColor = [UIColor colorWithRed:5/255.0f green:119/255.0f blue:72/255.0f alpha:1]; // 颜色

    // 设置 Y 轴 label 样式,圆形的线
    ChartYAxis *yAxis = self.radarChartView.yAxis;
    yAxis.axisMinValue = 0.0; // 最小值,中心的值
    yAxis.axisMaxValue = 100.0; // 最大值,最外边的值
    yAxis.drawLabelsEnabled = YES; // 是否显示 label 值
    yAxis.labelCount = 5; // label 个数
    yAxis.labelFont = [UIFont systemFontOfSize:9]; // label 字体
    yAxis.labelTextColor = [UIColor lightGrayColor]; // label 颜色

    // 设置雷达图描述
    self.radarChartView.chartDescription.enabled = YES; // 显示雷达图描述,默认 YES 显示
    self.radarChartView.descriptionText = @"雷达图";
    self.radarChartView.descriptionFont = [UIFont systemFontOfSize:15];
    self.radarChartView.descriptionTextColor = [UIColor grayColor];

    // 设置雷达图图例
    self.radarChartView.legend.enabled = YES; // 显示图例,默认 YES 显示
    self.radarChartView.legend.form = ChartLegendFormCircle; // 图示样式: 方形、线条、圆形
    self.radarChartView.legend.formSize = 12; // 图示大小
    self.radarChartView.legend.position = ChartLegendPositionBelowChartCenter; // 图例在雷达图中的位置
    self.radarChartView.legend.maxSizePercent = 1; // 图例在雷达图中的大小占比, 这会影响图例的宽高
    self.radarChartView.legend.formToTextSpace = 5; // 文本间隔
    self.radarChartView.legend.font = [UIFont systemFontOfSize:10]; // 字体大小
    self.radarChartView.legend.textColor = [UIColor grayColor]; // 字体颜色

    // 设置动画效果,可以设置 X 轴和 Y 轴的动画效果
    [self.radarChartView animateWithXAxisDuration:1.4 yAxisDuration:1.4 easingOption:ChartEasingOptionEaseOutBack];
    }

    // 设置雷达图数据
    - (RadarChartData *)setData {

    int vals_count = 12; // 维度的个数

    // 每个维度的名称或描述
    NSMutableArray *chartVals1 = [[NSMutableArray alloc] init];
    for (int i = 0; i < vals_count; i++) {

    double partValue = arc4random() % 70 + 30; // 设置区块值

    RadarChartDataEntry *entry = [[RadarChartDataEntry alloc] initWithValue:partValue];
    [chartVals1 addObject:entry];
    }

    // 绘制雷达图

    // 创建 RadarChartDataSet 对象
    RadarChartDataSet *set1 = [[RadarChartDataSet alloc] initWithValues:chartVals1 label:@"RadarName 1"];

    // 设置数据块
    set1.lineWidth = 0.5; // 数据折线线宽
    [set1 setColor:[UIColor redColor]]; // 数据折线颜色
    set1.drawFilledEnabled = YES; // 是否填充颜色
    set1.fillColor = [UIColor orangeColor]; // 填充颜色
    set1.fillAlpha = 0.5; // 填充透明度

    // 设置数据块折点样式
    set1.drawHighlightCircleEnabled = NO; // 是否绘制选中的拐点处的圆形
    set1.highlightCircleStrokeColor = [UIColor greenColor]; // 拐点处的圆形颜色
    [set1 setDrawHighlightIndicators:NO]; // 是否绘制选中拐点处的十字线

    // 设置显示数据
    set1.drawValuesEnabled = YES; // 是否绘制显示数据
    set1.valueFont = [UIFont systemFontOfSize:9]; // 字体
    set1.valueTextColor = [UIColor grayColor]; // 颜色

    // 创建 RadarChartData 对象, 此对象就是 PieChartData 需要最终数据对象
    RadarChartData *data = [[RadarChartData alloc] initWithDataSets:@[set1]];
    [data setValueFont:[UIFont systemFontOfSize:15]];
    [data setValueTextColor:[UIColor brownColor]];

    // 自定义数据显示格式
    ChartDataValueFormatter *formatter = [[ChartDataValueFormatter alloc] init];// 统一设置数据显示的格式
    [data setValueFormatter:formatter];

    return data;
    }

    #pragma mark - ChartViewDelegate

    // 点击选中柱形图时的代理方法
    - (void)chartValueSelected:(ChartViewBase * _Nonnull)chartView
    entry:(ChartDataEntry * _Nonnull)entry
    highlight:(ChartHighlight * _Nonnull)highlight {

    // 设置滑动时 Y 值标签
    self.markYLabel.text = [NSString stringWithFormat:@"%ld%%", (NSInteger)entry.y];
    }

    // 没有选中柱形图时的代理方法,当选中一个柱形图后,在空白处双击,就可以取消选择,此时会回调此方法
    - (void)chartValueNothingSelected:(ChartViewBase * _Nonnull)chartView {

    }

    // 捏合放大或缩小柱形图时的代理方法
    - (void)chartScaled:(ChartViewBase * _Nonnull)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY {

    }

    // 拖拽图表时的代理方法
    - (void)chartTranslated:(ChartViewBase * _Nonnull)chartView dX:(CGFloat)dX dY:(CGFloat)dY {

    }

    // 懒加载滑动时 Y 值标签
    - (UILabel *)markYLabel {

    if (!_markYLabel) {
    _markYLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, -5, 35, 25)];
    _markYLabel.font = [UIFont systemFontOfSize:15.0];
    _markYLabel.textAlignment = NSTextAlignmentCenter;
    _markYLabel.text = @"";
    _markYLabel.textColor = [UIColor whiteColor];
    _markYLabel.backgroundColor = [UIColor grayColor];
    }
    return _markYLabel;
    }

    @end
    • 效果

文章目录
  1. 1. 1、Charts 简介
  2. 2. 2、在项目中集成 Charts
    1. 2.1. 2.1 在 OC 项目中手动导入 Charts 框架
  3. 3. 3、绘制折线图
    1. 3.1. 3.1 LineChart 设置
    2. 3.2. 3.2 LineChart 绘制
  4. 4. 4、绘制柱状图
  5. 5. 5、绘制饼图
  6. 6. 6、绘制雷达图
隐藏目录