ios - charts框架的使用

demo如图所示，初次进入是柱状图的展示方式。

整个界面是一个table view，每个cell对应一题，由一个标题，一个仿excel统计表和一个图组成。图有三种，分别是柱状图，饼状图和网状图。

项目中需要生成柱状图/饼状图和网状图，百度之后知道有一个强大的图表框架——charts框架。

这个框架是用swift语句编写，所以导入这个框架和之前有些不太一样，具体是参照这篇文章实现导入的。https://www.aliyun.com/jiaocheng/361645.html?spm=5176.100033.2.17.4c79733b346fMl

统计表是用自定义的ExcelView来生成。

该ExcelView由for循环堆积UILabel绘制得到。

三种图的切换是根据model的charttype参数决定，在cell的setModel方法中，根据不同的参数值生成不同类型的图。点击“柱状图”之后，在cell中生成弹层(ChooseChartTypeView)，定义点击弹层的代理方法，每个选项对应一个tag，依次是 1，2，3。在cellView方法中，实现代理方法，将不同的tag值同样通过代理方法传回给viewcontroller方法，viewcontroller接收tag值之后，在数据源相应的改变model的charttype参数，然后更新界面。

柱状图：设置y轴数据格式的语句如下

    self.leftAxis = self.barChartView.leftAxis;//获取左边Y轴
    NSNumberFormatter *formatter = [[NSNumberFormatter alloc] init];
    formatter.positiveFormat = @"#0.0";
    self.leftAxis.valueFormatter = [[ChartDefaultAxisValueFormatter alloc] initWithFormatter:formatter];

还没找到添加柱状图的图例的方法。

设置数据的语句如下

//为柱形图设置数据
- (BarChartData *)setdata{
    
    self.barChartView.xAxis.labelCount = self.resultnNameArray.count;// 横轴坐标显示个数
    self.barChartView.xAxis.valueFormatter = [[ChartIndexAxisValueFormatter alloc] initWithValues:self.resultnNameArray]; //设置横轴数据
    
    //对应Y轴上面需要显示的数据
    NSMutableArray *yVals = [[NSMutableArray alloc] init];
    for (int i =0; i < self.resultCountArray.count;i++) {
        
        int yvalue = [self.resultCountArray[i] intValue];
        BarChartDataEntry *entry = [[BarChartDataEntry alloc] initWithX:i y:yvalue data:self.resultnNameArray[i]];
        [yVals addObject:entry];//Y轴上面需要显示的数据
    }
    
    //创建BarChartDataSet对象，其中包含有Y轴数据信息，以及可以设置柱形样式
    BarChartDataSet *set1 = [[BarChartDataSet alloc] initWithValues:yVals label:nil];
    set1.drawValuesEnabled = YES;//是否在柱形图上面显示数值
    set1.highlightEnabled = NO;//点击选中柱形图是否有高亮效果，（双击空白处取消选中）
    set1.colors = self.colors;//设置柱形图颜色
    
    //创建BarChartData对象, 此对象就是barChartView需要最终数据对象
    BarChartData *data = [[BarChartData alloc] initWithDataSet:set1];
    [data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:14.f]];//文字字体
    [data setValueTextColor:[UIColor orangeColor]];//文字颜色
    
    NSNumberFormatter *formatter = [[NSNumberFormatter alloc] init];
    //自定义数据显示格式
    [formatter setPositiveFormat:@"#0"];
    [data setValueFormatter:[[ChartDefaultValueFormatter alloc] initWithFormatter:formatter]];
    return data;
}

饼状图：设置数据的语句如下，并且设置图例

//为饼状图设置数据
- (PieChartData *)setData{
    
    NSMutableArray *values = [[NSMutableArray alloc] init];
    
    for (int i = 0; i < self.resultnNameArray.count; i++) {
        [values addObject:[[PieChartDataEntry alloc] initWithValue:[self.resultPercentageArray[i] doubleValue] label:self.resultnNameArray[i]]];
    }// label就是图例的名称
    
    PieChartDataSet *set1 = [[PieChartDataSet alloc] initWithValues:values label:nil];
    
    set1.colors = self.colors;// 区块颜色
    set1.sliceSpace = 2.0;//相邻区块之间的间距
    
    //创建PieChartData对象, 此对象就是pieChartView需要最终数据对象
    PieChartData *data = [[PieChartData alloc] initWithDataSet:set1];
    
    // 设置数据格式
    NSNumberFormatter *pFormatter = [[NSNumberFormatter alloc] init];
    pFormatter.numberStyle = NSNumberFormatterPercentStyle;
    pFormatter.maximumFractionDigits = 2;// 小数位数
    pFormatter.multiplier = @1.f;
    pFormatter.percentSymbol = @" %";// 百分号
    [data setValueFormatter:[[ChartDefaultValueFormatter alloc] initWithFormatter:pFormatter]];
    [data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:14.f]];//文字字体
    [data setValueTextColor:[UIColor orangeColor]];//文字颜色
    
    return data;
}

网状图：设置数据的语句如下

//为网状图设置数据
- (RadarChartData *)setRadarData{
    
    self.radarChartView.xAxis.valueFormatter = [[ChartIndexAxisValueFormatter alloc] initWithValues:self.resultnNameArray]; //设置横轴数据
    
    // 维度的数据
    NSMutableArray *yVals = [[NSMutableArray alloc] init];
    for (int i =0; i < self.resultCountArray.count;i++) {
        int yvalue = [self.resultCountArray[i] intValue];
        RadarChartDataEntry *entry = [[RadarChartDataEntry alloc] initWithValue:yvalue];
        [yVals addObject:entry];//Y轴上面需要显示的数据
    }
    
    //创建RadarChartDataSet对象
    RadarChartDataSet *set1 = [[RadarChartDataSet alloc] initWithValues:yVals label:@""];
    set1.drawFilledEnabled = YES;// 是否填充颜色
    set1.fillColor = [UIColor lightGrayColor];// 填充颜色
    
    //创建RadarChartData对象, 此对象就是radarChartView需要最终数据对象
    RadarChartData *data = [[RadarChartData alloc] initWithDataSet:set1];
    [data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:14.f]];//文字字体
    [data setValueTextColor:[UIColor orangeColor]];//文字颜色
    NSNumberFormatter *formatter = [[NSNumberFormatter alloc] init];
    //自定义数据显示格式
    [formatter setPositiveFormat:@"#0"];
    [data setValueFormatter:[[ChartDefaultValueFormatter alloc] initWithFormatter:formatter]];
    
    return data;
}

数据的生成都是依照这个顺序 ...ChartDataEntry -> ...ChartDataSet -> ...ChartData

github 地址 https://github.com/yathe/KCharts

ios - charts框架的使用

猜你喜欢