iOS-charts框架之折线图详解

前面几篇文章是《charts框架的集成》《charts柱状图》《charts饼状图》,建议大家结合起来看,这样更详细。

传送门:

《charts框架之饼状图详解》

《charts框架集成详解》

《charts框架柱状图详解》

下方是折线图效果图:


主要核心代码如下,大家可以自己需要修改下方配置:

// 初始化

 _lineChartView = [[LineChartView alloc] initWithFrame:CGRectZero]; 

 [self.view addSubview:self.lineChartView];

-------------------------------折线图的配置-----------------------------------------

// 设置动画

[self.lineChartView animateWithXAxisDuration:1.0f];

[self.lineChartView animateWithYAxisDuration:1.0f];

// 设置代理   

// ChartViewDelegate,IChartAxisValueFormatter

_lineChartView.delegate = self;

// 距离边缘的间隙

 [_lineChartView setExtraOffsetsWithLeft:30 top:0 right:30 bottom:10];

// noDataText 没有数据的时候的展示

_lineChartView.noDataText = @"暂无此产品的价格趋势";

_lineChartView.noDataFont = [UIFont systemFontOfSize:15];

_lineChartView.noDataTextColor = [UIColor grayColor];

// 是否开启描述label

_lineChartView.chartDescription.enabled = YES;

//   取消XY轴缩放

 _lineChartView.scaleYEnabled = YES;

_lineChartView.scaleXEnabled = YES;

// 取消双击缩放

_lineChartView.doubleTapToZoomEnabled = NO;

// 启用拖拽

 _lineChartView.dragEnabled = YES;

// 拖拽后是否有惯性效果

_lineChartView.dragDecelerationEnabled = YES;

// 是否显示图例

_lineChartView.legend.enabled = YES; 

// 拖拽后惯性效果的摩擦系数(0~1),数值越小,惯性越不明显

_lineChartView.dragDecelerationFrictionCoef = 0.9; 

------------------ Y轴设置----------------

// 是否绘制右边轴

 _lineChartView.rightAxis.enabled = NO;

// 获取左边Y轴

ChartYAxis *leftAxis = _lineChartView.leftAxis; 

// Y轴label数量,数值不一定,如果forceLabelsEnabled等于YES, 则强制绘制制定数量的label, 但是可能不平均

leftAxis.labelCount=6; 

// 是否强制绘制指定数量的labe

leftAxis.forceLabelsEnabled = YES; 

// 设置y轴线宽

leftAxis.axisLineWidth=0.6;  

//  设置y轴颜色

leftAxis.axisLineColor= [UIColorcolorWithRed:153/255.fgreen:153/255.fblue:153/255.falpha:1];  

// 设置Y轴的最小最大值

leftAxis.axisMaximum=105;

leftAxis.axisMinimum=0;

// 是否将Y轴进行上下翻转

leftAxis.inverted=NO;

// label位置(像里像外 枚举类型)

leftAxis.labelPosition = 0; 

// Y轴label文字颜色

leftAxis.labelTextColor= [UIColorgrayColor];

// Y轴label字体

leftAxis.labelFont = [UIFont fontWithName:@"SimSun" size:10.0f]; 

// 设置虚线样式的网格线

 leftAxis.gridLineDashLengths = @[@3.0f, @3.0f];

// 网格线颜色

leftAxis.gridColor = [UIColor colorWithRed:153/255.f green:153/255.f blue:153/255.f alpha:1];

// 开启抗锯齿

leftAxis.gridAntialiasEnabled = YES;

// 从0开始绘画

leftAxis.drawZeroLineEnabled = YES;

-------------------------配置Z轴(右边)----------------

// 获取右边Z轴

 ChartYAxis *rightAxis = _lineChartView.rightAxis;

/*具体用法参照Y轴*/

------------------------配置X轴------------------------

// 获取X轴

ChartXAxis *xAxis = _lineChartView.xAxis;

/*具体用法参照Y轴*/

----------------------配置图例----------------------

请参考我写的《charts框架之饼状图详解》

----------------------配置折现图上面的浮层--------------

// 设置浮层

_lineChartView.drawMarkers = YES;

ChartMarkerView * makerView = [[ChartMarkerView alloc]init];

makerView.offset = CGPointMake(-self.subPriceView.frame.size.width,-self.subPriceView.frame.size.height/2);

makerView.chartView = _lineChartView;

_lineChartView.marker = makerView;

[makerView addSubview:self.subPriceView];

---------------------------设置折线对象的属性-------------------

// 初始化折线对象

LineChartDataSet *lineSet = [[LineChartDataSet alloc] initWithValues:yVals label:@""];

// 设置折线对象的类型(枚举)

 lineSet.mode=4;

// 折线上的数值的颜色

lineSet.valueColors=@[[UIColorgrayColor]];

// 折线本身的颜色

[lineSetsetColor:[UIColorredColor]];  

// 折线图上是否带圆

lineSet.drawCirclesEnabled = NO;

// 是否填充颜色

lineSet.drawFilledEnabled = NO;

// 圆的半径

lineSet.circleRadius=1.0f;

// 是否画空心圆

lineSet.drawCircleHoleEnabled = YES;

// 空心圆的半径

lineSet.circleHoleRadius = 1.5;

// 空心圆的颜色

lineSet.circleHoleColor = [UIColor whiteColor];

// 拐点颜色

[lineSetsetCircleColor:[UIColorredColor]];

// 是否绘制拐点

lineSet.drawCirclesEnabled = YES;

-------------------------------十字线的配置-----------------------------

// 选中拐点,是否开启高亮效果(显示十字线)

lineSet.highlightEnabled = YES;

// 点击选中拐点的十字线的颜色

lineSet.highlightColor= [UIColorblueColor];  

// 十字线宽度

lineSet.highlightLineWidth = 0.5; 

// 设置十字线的虚线宽度

lineSet.highlightLineDashLengths = @[@5,@5]; 

---------------------------------设置数据----------------------------

 LineChartData*lineData = [[LineChartData alloc]initWithDataSet:lineSet];


priceTrendDataSource= priceTrendDataSource;


[self.lineChartView setData: LineChartData*lineData = [[LineChartDataalloc]initWithDataSet:lineSet]];


------------------------------多条折线-----------------------------------

NSMutableArray *dataSets = [[NSMutableArray alloc] init];

[dataSetsaddObject:lineSet];

[dataSetsaddObject:lineSet2];

LineChartData*data = [[LineChartDataalloc]initWithDataSets:dataSets];

self.lineChartView.data =data;

 [self.lineChartView notifyDataSetChanged];

 [self.lineChartView.data notifyDataChanged];

想要demo可以加群QQ群:191409807,欢迎话痨的加入。有技术可以互相交流。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容