OC語(yǔ)言集成Charts繪制圖表

一、下載導(dǎo)入項(xiàng)目
1.1、下載Charts
https://github.com/danielgindi/Charts
下載時(shí)記得往下拉查看適用條件：

適用條件

二、將Charts導(dǎo)入項(xiàng)目
2.1、解壓后得到文件：


解壓后得到文件

2.2、將解壓文件整個(gè)拖入工程并只添加Charts.xcodeproj工程文件


把解壓后的文件夾整個(gè)拖入ChartsLib

2.3、只導(dǎo)入Charts.xcodeproj工程文件
只導(dǎo)入這一個(gè)

2.4、到General->Embedded Binaries添加Charts.framework

這里需要注意如果General->Embedded Binaries添加了多個(gè)swift的框架，如果用的swift版本不一樣(一個(gè)2.0的一個(gè)3.0的)會(huì)報(bào)錯(cuò)，比如百度鷹眼的SDK。暫時(shí)還不知道怎解決，我直接把鷹眼的去掉了0.0。


添加framework

三、建立swift橋接文件
next->Create Bridging Header


創(chuàng)建橋接文件

這里假如創(chuàng)建過(guò)一次橋接文件又刪除了的話，再次創(chuàng)建不會(huì)提醒Create Bridging Header，這時(shí)需要找到橋接文件并刪除路徑，然后再重新創(chuàng)建。


刪除路徑

四、項(xiàng)目工程文件配置
4.1、允許swift第三方庫(kù)


允許swift第三方庫(kù)

設(shè)置swift語(yǔ)言版本


這里設(shè)置為NO

4.2、導(dǎo)入頭文件
在橋接文件中導(dǎo)入 
@import Charts;

在另一個(gè).swift文件中刪除

import Foundation

在使用的控制器中導(dǎo)入創(chuàng)建橋接文件時(shí)產(chǎn)生的兩個(gè)頭文件

#import "File.swift"
#import "ChartsDemo-Bridging-Header.h"

這樣就可以編譯成功了

五、 用OC代碼實(shí)現(xiàn)圖表
這里我主要用到了折線圖和柱狀圖，其它有興趣的話可以去研究
5.1、柱狀圖
5.1.1、遵循代理

@interface ViewController ()<ChartViewDelegate,IChartAxisValueFormatter>
@property (nonatomic,strong)BarChartView *barChartView;
@property (nonatomic,strong)LineChartView *LineChartView;

5.1.2、創(chuàng)建柱狀視圖并設(shè)置屬性

self.barChartView = [[BarChartView alloc] initWithFrame:CGRectMake(10, 100, 300, 300)];
    self.barChartView.delegate = self;//設(shè)置代理
    [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.noDataText = @"暫無(wú)數(shù)據(jù)";//沒(méi)有數(shù)據(jù)時(shí)的文字提示
    self.barChartView.descriptionText = @"周";//右下角描述
    self.barChartView.drawValueAboveBarEnabled = YES;//數(shù)值顯示在柱形的上面還是下面
    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;//拖拽后慣性效果的摩擦系數(shù)(0~1)，數(shù)值越小，慣性越不明顯
    ChartXAxis *xAxis = self.barChartView.xAxis;
    xAxis.axisLineWidth = 1;//設(shè)置X軸線寬
    xAxis.labelPosition = XAxisLabelPositionBottom;//X軸的顯示位置，默認(rèn)是顯示在上面的
    xAxis.drawGridLinesEnabled = NO;//不繪制網(wǎng)格線
//        xAxis.spaceBetweenLabels = 4;//設(shè)置label間隔，若設(shè)置為1，則如果能全部顯示，則每個(gè)柱形下面都會(huì)顯示label
//        ChartIndexAxisValueFormatter *valueFormatter = [[ChartIndexAxisValueFormatter alloc] init];//坐標(biāo)數(shù)值樣式
    //    xAxis.valueFormatter = valueFormatter;
    self.barChartView.xAxis.valueFormatter = self; //還有遵守代理IChartAxisValueFormatter
    xAxis.labelTextColor = [UIColor brownColor];//label文字顏色
    self.barChartView.rightAxis.enabled = NO;//不繪制右邊軸
    self.barChartView.leftAxis.enabled = YES;
    ChartYAxis *leftAxis = self.barChartView.leftAxis;
    leftAxis.forceLabelsEnabled = NO;//不強(qiáng)制繪制制定數(shù)量的label
    //    leftAxis.showOnlyMinMaxEnabled = NO;//是否只顯示最大值和最小值
    leftAxis.axisMinValue = 0;//設(shè)置Y軸的最小值
    //    leftAxis.startAtZeroEnabled = YES;//從0開(kāi)始繪制
    leftAxis.axisMaxValue = 105;//設(shè)置Y軸的最大值
    leftAxis.inverted = NO;//是否將Y軸進(jìn)行上下翻轉(zhuǎn)
    leftAxis.axisLineWidth = 0.5;//Y軸線寬
    leftAxis.axisLineColor = [UIColor blackColor];//Y軸顏色
    leftAxis.labelCount = 5;
    leftAxis.forceLabelsEnabled = NO;
    leftAxis.labelPosition = YAxisLabelPositionOutsideChart;//label位置
    leftAxis.labelTextColor = [UIColor brownColor];//文字顏色
    leftAxis.labelFont = [UIFont systemFontOfSize:10.0f];//文字字體
    leftAxis.gridLineDashLengths = @[@3.0f, @3.0f];//設(shè)置虛線樣式的網(wǎng)格線
    leftAxis.gridColor = [UIColor colorWithRed:200/255.0f green:200/255.0f blue:200/255.0f alpha:1];//網(wǎng)格線顏色
    leftAxis.gridAntialiasEnabled = YES;//開(kāi)啟抗鋸齒
        ChartLimitLine *limitLine = [[ChartLimitLine alloc] initWithLimit:80 label:@"限制線"];
        limitLine.lineWidth = 2;
        limitLine.lineColor = [UIColor greenColor];
        limitLine.lineDashLengths = @[@5.0f, @5.0f];//虛線樣式
        limitLine.labelPosition = ChartLimitLabelPositionRightTop;//位置
        [leftAxis addLimitLine:limitLine];//添加到Y(jié)軸上
        leftAxis.drawLimitLinesBehindDataEnabled = YES;//設(shè)置限制線繪制在柱形圖的后面
    self.barChartView.legend.enabled = NO;//不顯示圖例說(shuō)明
    self.barChartView.descriptionText = @"";//不顯示，就設(shè)為空字符串即可
    //為柱形圖提供數(shù)據(jù)
    self.barChartView.data = [self setData];
    //    設(shè)置動(dòng)畫效果，可以設(shè)置X軸和Y軸的動(dòng)畫效果
    [self.barChartView animateWithYAxisDuration:1.0f];

5.1.3、為柱形圖設(shè)置數(shù)據(jù)，方法在上面設(shè)置屬性時(shí)創(chuàng)建

//為柱形圖設(shè)置數(shù)據(jù)
- (BarChartData *)setData{
    int xVals_count = 10;//X軸上要顯示多少條數(shù)據(jù)
    double maxYVal = 100;//Y軸的最大值
    //X軸上面需要顯示的數(shù)據(jù)
    NSMutableArray *xVals = [[NSMutableArray alloc] init];
    for (int i = 0; i < xVals_count; i++) {
        [xVals addObject:[NSString stringWithFormat:@"周%d", i+1]];
    }
    //對(duì)應(yīng)Y軸上面需要顯示的數(shù)據(jù)
    NSMutableArray *yVals = [[NSMutableArray alloc] init];
    for (int i = 0; i < xVals_count; i++) {
        double mult = maxYVal + 1;
        double val = (double)(arc4random_uniform(mult));
        BarChartDataEntry *entry = [[BarChartDataEntry alloc] initWithX:i y:val];
        [yVals addObject:entry];
    }
    //創(chuàng)建BarChartDataSet對(duì)象，其中包含有Y軸數(shù)據(jù)信息，以及可以設(shè)置柱形樣式
    BarChartDataSet *set1 = [[BarChartDataSet alloc] initWithValues:yVals label:@"DataSet"];
    set1.barBorderWidth = 0.5;//柱形之間的間隙占整個(gè)柱形(柱形+間隙)的比例
    set1.drawValuesEnabled = YES;//是否在柱形圖上面顯示數(shù)值
    set1.highlightEnabled = NO;//點(diǎn)擊選中柱形圖是否有高亮效果，（雙擊空白處取消選中）
    [set1 setColors:ChartColorTemplates.material];//設(shè)置柱形圖顏色
    //將BarChartDataSet對(duì)象放入數(shù)組中
    NSMutableArray *dataSets = [[NSMutableArray alloc] init];
    [dataSets addObject:set1];
    //創(chuàng)建BarChartData對(duì)象, 此對(duì)象就是barChartView需要最終數(shù)據(jù)對(duì)象
    BarChartData *data = [[BarChartData alloc] initWithDataSets:dataSets];
    [data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:10.f]];//文字字體
    [data setValueTextColor:[UIColor orangeColor]];//文字顏色
    NSNumberFormatter *formatter = [[NSNumberFormatter alloc] init];
    //自定義數(shù)據(jù)顯示格式
    [formatter setNumberStyle:NSNumberFormatterDecimalStyle];
    [formatter setPositiveFormat:@"#0.0"];
    //    [data setValueFormatter:formatter];
    return data;
}

5.1.4、運(yùn)行效果


zhu zhuang tu

5.2、折線圖
5.2.1、創(chuàng)建折線視圖并設(shè)置屬性

self.LineChartView = [[LineChartView alloc] initWithFrame:CGRectMake(10, 400, 300, 300)];
    self.LineChartView.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1];
    self.LineChartView.noDataText = @"暫無(wú)數(shù)據(jù)";
    [self.view addSubview:self.LineChartView];
    self.LineChartView.scaleYEnabled = NO;//取消Y軸縮放
    self.LineChartView.doubleTapToZoomEnabled = NO;//取消雙擊縮放
    self.LineChartView.dragEnabled = YES;//啟用拖拽圖標(biāo)
    self.LineChartView.dragDecelerationEnabled = YES;//拖拽后是否有慣性效果
    self.LineChartView.dragDecelerationFrictionCoef = 0.9;//拖拽后慣性效果的摩擦系數(shù)(0~1)，數(shù)值越小，慣性越不明顯
    ChartXAxis *xAxisTwo = self.LineChartView.xAxis;
    xAxisTwo.axisLineWidth = 1.0/[UIScreen mainScreen].scale;//設(shè)置X軸線寬
    xAxisTwo.labelPosition = XAxisLabelPositionBottom;//X軸的顯示位置，默認(rèn)是顯示在上面的
    xAxisTwo.drawGridLinesEnabled = NO;//不繪制網(wǎng)格線
    //    xAxisTwo.spaceBetweenLabels = 4;//設(shè)置label間隔
    //    xAxisTwo.labelTextColor = [self colorWithHexString:@"#057748"];//label文字顏色
    self.LineChartView.xAxis.valueFormatter = self; //還有遵守代理IChartAxisValueFormatter
    
    self.LineChartView.rightAxis.enabled = NO;//不繪制右邊軸
    ChartYAxis *leftAxisTwo = self.LineChartView.leftAxis;//獲取左邊Y軸
    leftAxisTwo.labelCount = 5;//Y軸label數(shù)量，數(shù)值不一定，如果forceLabelsEnabled等于YES, 則強(qiáng)制繪制制定數(shù)量的label, 但是可能不平均
    leftAxisTwo.forceLabelsEnabled = NO;//不強(qiáng)制繪制指定數(shù)量的label
    //    leftAxisTwo.showOnlyMinMaxEnabled = NO;//是否只顯示最大值和最小值
    leftAxisTwo.axisMinValue = 0;//設(shè)置Y軸的最小值
    //    leftAxisTwo.startAtZeroEnabled = YES;//從0開(kāi)始繪制
    leftAxisTwo.axisMaxValue = 105;//設(shè)置Y軸的最大值
    leftAxisTwo.inverted = NO;//是否將Y軸進(jìn)行上下翻轉(zhuǎn)
    leftAxisTwo.axisLineWidth = 1.0/[UIScreen mainScreen].scale;//Y軸線寬
    leftAxisTwo.axisLineColor = [UIColor blackColor];//Y軸顏色
    //    leftAxisTwo.valueFormatter = [[NSNumberFormatter alloc] init];//自定義格式
    //    leftAxisTwo.valueFormatter.positiveSuffix = @" $";//數(shù)字后綴單位
    leftAxisTwo.labelPosition = YAxisLabelPositionOutsideChart;//label位置
//        leftAxisTwo.labelTextColor = [self colorWithHexString:@"#057748"];//文字顏色
    leftAxisTwo.labelFont = [UIFont systemFontOfSize:10.0f];//文字字體
    
    leftAxisTwo.gridLineDashLengths = @[@3.0f, @3.0f];//設(shè)置虛線樣式的網(wǎng)格線
    leftAxisTwo.gridColor = [UIColor colorWithRed:200/255.0f green:200/255.0f blue:200/255.0f alpha:1];//網(wǎng)格線顏色
    leftAxisTwo.gridAntialiasEnabled = NO;//開(kāi)啟抗鋸齒
    
    ChartLimitLine *limitLineTwo = [[ChartLimitLine alloc] initWithLimit:80 label:@"限制線"];
    limitLineTwo.lineWidth = 2;
    limitLineTwo.lineColor = [UIColor greenColor];
    limitLineTwo.lineDashLengths = @[@5.0f, @5.0f];//虛線樣式
    limitLineTwo.labelPosition = ChartLimitLabelPositionRightTop;//位置
//        limitLine.valueTextColor = [self colorWithHexString:@"#057748"];//label文字顏色
    limitLineTwo.valueFont = [UIFont systemFontOfSize:12];//label字體
    [leftAxisTwo addLimitLine:limitLineTwo];//添加到Y(jié)軸上
    leftAxisTwo.drawLimitLinesBehindDataEnabled = YES;//設(shè)置限制線繪制在折線圖的后面
    
    [self.LineChartView setDescriptionText:@"折線圖"];//折線圖描述
    [self.LineChartView setDescriptionTextColor:[UIColor darkGrayColor]];
    self.LineChartView.legend.form = ChartLegendFormLine;//圖例的樣式
    self.LineChartView.legend.formSize = 30;//圖例中線條的長(zhǎng)度
    self.LineChartView.legend.textColor = [UIColor darkGrayColor];//圖例文字顏色
    [self.LineChartView animateWithYAxisDuration:1.0f];

    self.LineChartView.data = [self setDataTwo];

5.2.2折線圖設(shè)置數(shù)據(jù)

- (LineChartData *)setDataTwo{
    int xVals_count = 12;//X軸上要顯示多少條數(shù)據(jù)
    double maxYVal = 100;//Y軸的最大值
    //X軸上面需要顯示的數(shù)據(jù)
    NSMutableArray *xVals = [[NSMutableArray alloc] init];
    for (int i = 0; i < xVals_count; i++) {
        [xVals addObject:[NSString stringWithFormat:@"%d月", i+1]];
    }
    //對(duì)應(yīng)Y軸上面需要顯示的數(shù)據(jù)
    NSMutableArray *yVals = [[NSMutableArray alloc] init];
    for (int i = 0; i < xVals_count; i++) {
        double mult = maxYVal + 1;
        double val = (double)(arc4random_uniform(mult));
        ChartDataEntry *entry = [[ChartDataEntry alloc] initWithX:i y:val];
        [yVals addObject:entry];
    }
    LineChartDataSet *set1 = nil;
    if (self.LineChartView.data.dataSetCount > 0) {
        LineChartData *data = (LineChartData *)self.LineChartView.data;
        set1 = (LineChartDataSet *)data.dataSets[0];
        //        set1.yVals = yVals;
        set1.values = yVals;
        return data;
    }else{
        //創(chuàng)建LineChartDataSet對(duì)象
        set1 = [[LineChartDataSet alloc] initWithValues:yVals label:@"lineName"];
        //設(shè)置折線的樣式
        set1.lineWidth = 1.0/[UIScreen mainScreen].scale;//折線寬度
        set1.drawValuesEnabled = YES;//是否在拐點(diǎn)處顯示數(shù)據(jù)
        set1.valueColors = @[[UIColor brownColor]];//折線拐點(diǎn)處顯示數(shù)據(jù)的顏色
        //        [set1 setColor:[self colorWithHexString:@"#007FFF"]];//折線顏色
        set1.drawSteppedEnabled = NO;//是否開(kāi)啟繪制階梯樣式的折線圖
        //折線拐點(diǎn)樣式
        set1.drawCirclesEnabled = YES;//是否繪制拐點(diǎn)
        set1.circleRadius = 5.0f;//拐點(diǎn)半徑
        set1.circleColors = @[[UIColor redColor]];//拐點(diǎn)顏色
        //拐點(diǎn)中間的空心樣式
        set1.drawCircleHoleEnabled = YES;//是否繪制中間的空心
        set1.circleHoleRadius = 4.0f;//空心的半徑
        set1.circleHoleColor = [UIColor whiteColor];//空心的顏色
        //折線的顏色填充樣式
        //第一種填充樣式:單色填充
        // set1.drawFilledEnabled = YES;//是否填充顏色
        // set1.fillColor = [UIColor redColor];//填充顏色
        // set1.fillAlpha = 0.3;//填充顏色的透明度
        //第二種填充樣式:漸變填充
        set1.drawFilledEnabled = NO;//是否填充顏色
        NSArray *gradientColors = @[(id)[ChartColorTemplates colorFromString:@"#FFFFFFFF"].CGColor,
                                    (id)[ChartColorTemplates colorFromString:@"#FF007FFF"].CGColor];
        CGGradientRef gradientRef = CGGradientCreateWithColors(nil, (CFArrayRef)gradientColors, nil);
        set1.fillAlpha = 0.3f;//透明度
        set1.fill = [ChartFill fillWithLinearGradient:gradientRef angle:90.0f];//賦值填充顏色對(duì)象
        CGGradientRelease(gradientRef);//釋放gradientRef
        //點(diǎn)擊選中拐點(diǎn)的交互樣式
        set1.highlightEnabled = YES;//選中拐點(diǎn),是否開(kāi)啟高亮效果(顯示十字線)
        //        set1.highlightColor = [self colorWithHexString:@"#c83c23"];//點(diǎn)擊選中拐點(diǎn)的十字線的顏色
        set1.highlightLineWidth = 1.0/[UIScreen mainScreen].scale;//十字線寬度
        set1.highlightLineDashLengths = @[@5, @5];//十字線的虛線樣式
        //將 LineChartDataSet 對(duì)象放入數(shù)組中
        NSMutableArray *dataSets = [[NSMutableArray alloc] init];
        [dataSets addObject:set1];
        //添加第二個(gè)LineChartDataSet對(duì)象
         LineChartDataSet *set2 = [set1 copy];
         NSMutableArray *yVals2 = [[NSMutableArray alloc] init];
         for (int i = 0; i < xVals_count; i++) {
         double mult = maxYVal + 1;
         double val = (double)(arc4random_uniform(mult));
         ChartDataEntry *entry = [[ChartDataEntry alloc] initWithX:i y:val];
         [yVals2 addObject:entry];
         }
         set2.values = yVals2;
         [set2 setColor:[UIColor redColor]];
         set2.drawFilledEnabled = YES;//是否填充顏色
         set2.fillColor = [UIColor redColor];//填充顏色
         set2.fillAlpha = 0.1;//填充顏色的透明度
         [dataSets addObject:set2];
        //創(chuàng)建 LineChartData 對(duì)象, 此對(duì)象就是lineChartView需要最終數(shù)據(jù)對(duì)象
        LineChartData *data = [[LineChartData alloc] initWithDataSets:dataSets];
        [data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:8.f]];//文字字體
        [data setValueTextColor:[UIColor grayColor]];//文字顏色
        NSNumberFormatter *formatter = [[NSNumberFormatter alloc] init];
        //自定義數(shù)據(jù)顯示格式
//        [formatter sretNumberStyle:NSNumberFormatterDecimalStyle];
//        [formatter setPositiveFormat:@"#0.0"];
//        [data setValueFormatter:formatter];
        return data;
    }
}

5.2.3、設(shè)置x軸格式的代理

- (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis
{
    return [NSString stringWithFormat:@"周%.0f",value];
}

5.2.4、運(yùn)行示例圖


折線示例圖

具體的屬性可以慢慢調(diào)試
六、注意事項(xiàng)
打包上線的時(shí)候會(huì)出現(xiàn)如下情況：



傳api包的時(shí)候會(huì)報(bào)錯(cuò)：
網(wǎng)太卡我就不重現(xiàn)錯(cuò)誤了，大概是：ERROR ITMS-90206:"Invalid Bundle. The bundle at 'XXX.appex' contains disallowed file 'Frameworks'."

這個(gè)時(shí)候解決方法是
(1)進(jìn)入到擴(kuò)展插件下->Build Phases 點(diǎn)擊添加按鈕，選擇New Run Script Phase



(2)然后加上下列代碼、下面兩個(gè)選項(xiàng)都要勾上： 
cd"${CONFIGURATION_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/"
if [[ -d "Frameworks" ]]; then 
   rm -fr Frameworks
fi
要勾上下面兩個(gè)選項(xiàng)
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,246評(píng)論 4贊 61
  • 上一章 第八章 孫三擰欺凌夏小花 夏小花上吊尋短見(jiàn) 施善主持走進(jìn)屋里，只見(jiàn)林士生被放在...
    林木成蔭閱讀 365評(píng)論 2贊 6
  • 文/南海榕 文/南海榕 離開(kāi)你以后，我更換了我的筆名，換了新的發(fā)型，閨蜜笑著說(shuō)，你這是打算從頭開(kāi)始嗎？我低頭微...
    南海榕閱讀 355評(píng)論 1贊 2
  • 想要記錄一下今天發(fā)生的事和帶給我的感受，所以寫了下面的文字。高考畢業(yè)的時(shí)候會(huì)說(shuō)：記錄生活的日子終于結(jié)束了。而到今天...
    私奔的墨鏡閱讀 500評(píng)論 0贊 0