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

简介: 1、Charts 简介使用第三方框架 Charts 绘制 iOS 图表。GitHub 源码 ChartsCharts 是一款用于绘制图表的框架,可以绘制柱状图、折线图、K线图、饼状图等。Charts 只有 Swift 版本。

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 框架。

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

      Quartz2D116

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

      Quartz2D117

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

      Quartz2D118

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

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

      Quartz2D119

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

      Quartz2D120

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

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

      Quartz2D121

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

      Quartz2D122

      Quartz2D123

  • 4、添加 Charts.framework

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

      Quartz2D124

      Quartz2D125

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

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

      Quartz2D126

      Quartz2D127

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

      Quartz2D128

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

      Quartz2D129

  • 6、测试

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

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

      Quartz2D130

3、绘制折线图

3.1 LineChart 设置

  • 1、属性设置

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

          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 轴的,可以根据自己的需求去设置。

          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 类来完成。

          @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 类,现在我们来创建它。

          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 类来完成。

          #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 协议,都是可以用的,可以根据自己的需求自己选择。

          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 其实就是每一条折线,而绘制每一条折线又需要数据,所以我们先从数据开始一步一步创建。

          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 类来完成。

          @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 值的变化。

          - (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

        /// 设置 X 轴 数据格式
    
        @import Charts;
    
        @interface XAxisValueFormatter : NSObject <IChartAxisValueFormatter>
    
        @end
  • XAxisValueFormatter.m

        @implementation XAxisValueFormatter
    
        /// 实现协议方法,返回 x 轴的数据
        - (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis {
    
            // value 为 x 轴的值
    
            return [NSString stringWithFormat:@"%ld天", (NSInteger)value];
        }
    
        @end
  • YAxisValueFormatter.h

        /// 设置 Y 轴 数据格式
    
        @import Charts;
    
        @interface YAxisValueFormatter : NSObject <IChartAxisValueFormatter>
    
        @end
  • YAxisValueFormatter.m

        @implementation YAxisValueFormatter
    
        /// 实现协议方法,返回 y 轴的数据
        - (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis {
    
            // value 为 y 轴的值
    
            return [NSString stringWithFormat:@"%ld%%",(NSInteger)value];
        }
    
        @end
  • ChartDataValueFormatter.h

        /// 设置 折线显示的 数据格式
    
        @import Charts;
    
        @interface ChartDataValueFormatter : NSObject <IChartValueFormatter>
    
        @end
  • ChartDataValueFormatter.m

        @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

        /// 设置 折线显示的 数据格式,只显示最大值
    
        @import Charts;
    
        @interface ChartMaxDataValueFormatter : NSObject <IChartValueFormatter>
    
        - (instancetype)initWithYDataVals:(NSArray *)yVals;
    
        @end
  • ChartMaxDataValueFormatter.m

        @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

        #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
    • 效果

      Quartz2D131Quartz2D132

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

        // 绘制光滑曲线
        set1.mode = LineChartModeCubicBezier;
        set1.cubicIntensity = 0.2;
    
        // 是否开启绘制阶梯样式的折线图,默认 NO
        // set1.drawSteppedEnabled = NO;
    • 效果

      Quartz2D140Quartz2D141

4、绘制柱状图

  • XAxisValueFormatter.h

        /// 设置 X 轴 数据格式
    
        @import Charts;
    
        @interface XAxisValueFormatter : NSObject <IChartAxisValueFormatter>
    
        @end
  • XAxisValueFormatter.m

        @implementation XAxisValueFormatter
    
        /// 实现协议方法,返回 x 轴的数据
        - (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis {
    
            // value 为 x 轴的值
    
            return [NSString stringWithFormat:@"%ld天", (NSInteger)value];
        }
    
        @end
  • YAxisValueFormatter.h

        /// 设置 Y 轴 数据格式
    
        @import Charts;
    
        @interface YAxisValueFormatter : NSObject <IChartAxisValueFormatter>
    
        @end
  • YAxisValueFormatter.m

        @implementation YAxisValueFormatter
    
        /// 实现协议方法,返回 y 轴的数据
        - (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis {
    
            // value 为 y 轴的值
    
            return [NSString stringWithFormat:@"%ld%%",(NSInteger)value];
        }
    
        @end
  • ChartDataValueFormatter.h

        /// 设置 柱形上显示的 数据格式
    
        @import Charts;
    
        @interface ChartDataValueFormatter : NSObject <IChartValueFormatter>
    
        @end
  • ChartDataValueFormatter.m

        @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

        /// 设置 柱形上显示的 数据格式,只显示最大值
    
        @import Charts;
    
        @interface ChartMaxDataValueFormatter : NSObject <IChartValueFormatter>
    
        - (instancetype)initWithYDataVals:(NSArray *)yVals;
    
        @end
  • ChartMaxDataValueFormatter.m

        @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

        #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
    • 效果

      Quartz2D133Quartz2D134

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

        // 声明柱状图
        @property (nonatomic, strong) HorizontalBarChartView *barChartView;
    
        // 初始化柱状图对象
        self.barChartView = [[HorizontalBarChartView alloc] initWithFrame:frame];
    • 效果

      Quartz2D142Quartz2D143

5、绘制饼图

  • ChartDataValueFormatter.h

        /// 设置 折线显示的 数据格式
    
        @import Charts;
    
        @interface ChartDataValueFormatter : NSObject <IChartValueFormatter>
    
        @end
  • ChartDataValueFormatter.m

        @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

        #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
    • 效果

      Quartz2D135Quartz2D136

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

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

      Quartz2D137Quartz2D138

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

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

      Quartz2D137Quartz2D139

6、绘制雷达图

  • XAxisValueFormatter.h

        /// 设置 X 轴 数据格式
    
        @import Charts;
    
        @interface XAxisValueFormatter : NSObject <IChartAxisValueFormatter>
    
        @end
  • XAxisValueFormatter.m

        @implementation XAxisValueFormatter
    
        /// 实现协议方法,返回 x 轴的数据
        - (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis {
    
            // value 为 x 轴的值
    
            return [NSString stringWithFormat:@"%ld 月", (NSInteger)value + 1];
        }
    
        @end
  • ChartDataValueFormatter.h

        /// 设置 折线显示的 数据格式
    
        @import Charts;
    
        @interface ChartDataValueFormatter : NSObject <IChartValueFormatter>
    
        @end
  • ChartDataValueFormatter.m

        @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

        #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
    • 效果

      Quartz2D144Quartz2D145

相关实践学习
基于Hologres轻松玩转一站式实时仓库
本场景介绍如何利用阿里云MaxCompute、实时计算Flink和交互式分析服务Hologres开发离线、实时数据融合分析的数据大屏应用。
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
目录
相关文章
|
3月前
|
机器学习/深度学习 PyTorch TensorFlow
是否有其他框架可以在iOS设备上进行机器学习?
是否有其他框架可以在iOS设备上进行机器学习?
21 1
|
3月前
|
存储 数据建模 iOS开发
iOS设备功能和框架: 什么是 Core Data,它在 iOS 中的作用是什么?
iOS设备功能和框架: 什么是 Core Data,它在 iOS 中的作用是什么?
33 1
|
3月前
|
定位技术 iOS开发
iOS设备功能和框架: 如何使用 Core Location 获取设备的位置信息?
iOS设备功能和框架: 如何使用 Core Location 获取设备的位置信息?
19 0
|
3月前
|
机器学习/深度学习 PyTorch TensorFlow
iOS设备功能和框架: 什么是 Core ML?如何在应用中集成机器学习模型?
iOS设备功能和框架: 什么是 Core ML?如何在应用中集成机器学习模型?
27 0
|
3月前
|
iOS开发
iOS设备功能和框架: 如何使用 Core Animation 创建动画效果?
iOS设备功能和框架: 如何使用 Core Animation 创建动画效果?
101 0
|
5月前
|
小程序 开发工具 Android开发
Donut多端框架小程序打包适配ios和安卓app
腾讯新出了一个 Donut 多端框架,可以直接将微信小程序转成 ios 和 安卓 app,小程序开发者工具里也集成了 app 相关升级、调试和打包的功能,终于可以一套代码开发出3个客户端了!
127 0
Donut多端框架小程序打包适配ios和安卓app
|
5月前
|
移动开发 网络协议 安全
基于开源IM即时通讯框架MobileIMSDK:RainbowChat-iOS端v8.0版已发布
MobileIMSDK 是一套专门为移动端开发的开源IM即时通讯框架,超轻量级、高度提炼,一套API优雅支持 UDP 、TCP 、WebSocket 三种协议,支持 iOS、Android、H5、标准Java、小程序、Uniapp,服务端基于Netty编写。
70 0
|
7月前
|
Swift iOS开发
IOS 小说阅读《覆盖翻页》效果框架 DZMCoverAnimation
IOS 小说阅读《覆盖翻页》效果框架 DZMCoverAnimation
55 0
|
9月前
|
JavaScript Android开发 iOS开发
layui框架实战案例(6):上传图片和视频自动调用IOS或安卓系统的摄像头功能
layui框架实战案例(6):上传图片和视频自动调用IOS或安卓系统的摄像头功能
226 0
|
iOS开发
iOS开发-聊天气泡的绘制和聊天消息列表
iOS开发-聊天气泡的绘制和聊天消息列表
169 0
iOS开发-聊天气泡的绘制和聊天消息列表