Chart框架的使用——折线图

三条折线图

折线图view的初始化

//初始化
LineChartView *chartView = [[LineChartView alloc] initWithFrame:chartViewFrame];

//初始化折线图
    [self initChartViewProperty];

折线图的相关设置

[chartView setDelegate:self]; //设置代理
[chartView.chartDescription setEnabled:NO];
[chartView setDragEnabled:NO]; //是否可以拖动
[chartView setScaleEnabled:NO]; //放大缩小
[chartView setDrawGridBackgroundEnabled:NO]; 

折线相关的属性

ChartLegend *legend = chartView.legend;
legend.form = ChartLegendFormLine; //显示的是线
legend.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:11.f];
legend.textColor = [UIColor grayColor]; //文字颜色
legend.horizontalAlignment = ChartLegendHorizontalAlignmentRight; //靠右显示
legend.verticalAlignment = ChartLegendVerticalAlignmentBottom;  //底部显示
legend.orientation = ChartLegendOrientationHorizontal;  //水平方向
legend.drawInside = NO; //放在图里还是外

轴的属性-x轴

ChartXAxis *xAxis = chartView.xAxis;
xAxis.labelFont = [UIFont systemFontOfSize:11.f];
xAxis.labelTextColor = UIColor.whiteColor;
//控制x轴坐标的文字属性
xAxis.labelTextColor = [UIColor grayColor];
xAxis.drawGridLinesEnabled = NO;
xAxis.drawAxisLineEnabled = NO;
xAxis.granularity = 1;
xAxis.valueFormatter = self;
//避免x轴的文字显示不全
xAxis.avoidFirstLastClippingEnabled = YES;
[xAxis setLabelPosition:XAxisLabelPositionBottom]; //一般把x轴放在底部

轴的属性-左边的轴

ChartYAxis *leftAxis = chartView.leftAxis;

轴的属性-右边的轴

ChartYAxis *rightAxis = chartView.rightAxis;

点击折线上的折点可以弹出显示当前点值得框框

BalloonMarker *marker = [[BalloonMarker alloc]
                         initWithColor: [UIColor colorWithWhite:0 alpha:0.7] //框框的背景
                         font: [UIFont systemFontOfSize:12.0]
                         textColor: [UIColor whiteColor]
                         insets: UIEdgeInsetsMake(5.0, 5.0, 20.0, 5.0)]; //值在框框里面的内边距
marker.chartView = chartView; //指向的图表view
marker.minimumSize = CGSizeMake(30.f, 30.f); //框框最小多大,数值变大,框框会自动变大
chartView.marker = marker; 

准备数据

//将所有的数据放在数组中,要显示几条折线,准备几个数组
NSMutableArray *yVals1 = [[NSMutableArray alloc] init];
NSMutableArray *yVals2 = [[NSMutableArray alloc] init];
NSMutableArray *yVals3 = [[NSMutableArray alloc] init];


//对于每个x轴对应的点,添加相应的数据
for (int i = 0; i < count; i++)
{

    double val = [costArray[i] doubleValue];
    [yVals1 addObject:[[ChartDataEntry alloc] initWithX:i y:val]]; //对应加入数据

}

设置数据集

//三个数据集
LineChartDataSet *set1 = nil, *set2 = nil, *set3 = nil;

if (chartView.data.dataSetCount > 0)
{
    //数据集已经绑定过了,就直接为数据集设置数据
    set1 = (LineChartDataSet *)chartView.data.dataSets[0];
    set2 = (LineChartDataSet *)chartView.data.dataSets[1];
    set3 = (LineChartDataSet *)chartView.data.dataSets[2];
    set1.values = yVals1;
    set2.values = yVals2;
    set3.values = yVals3;
    [chartView.data notifyDataChanged];
    [chartView notifyDataSetChanged];
}
else
{
    //没有,则初始化数据集
    set1 = [[LineChartDataSet alloc] initWithValues:yVals1 label:@"支出"]; //第一套数据的数据和代表的值
    set1.axisDependency = AxisDependencyRight; //数据依赖的是右边的轴
    [set1 setColor:[UIColor colorWithRed:52/255.f green:188/255.f blue:248/255.f alpha:1.f]]; //线的颜色
    [set1 setCircleColor:[UIColor lightGrayColor]]; //折点的颜色
    set1.lineWidth = 2.0; //线宽
    set1.circleRadius = 3.0; //折点半径
    set1.fillAlpha = 65/255.0; 
    set1.fillColor = [UIColor colorWithRed:52/255.f green:188/255.f blue:248/255.f alpha:1.f];
    //这个控制的是,点击某个点之后的十字线的颜色,这里我不需要十字线
//  set1.highlightColor = [UIColor blueColor];
    //去掉highlightColor的颜色,但还是有默认颜色,我只能将线宽设置为0
    set1.highlightLineWidth = 0;  //这个控制的是,点击某个点之后的十字线的颜色,这里我不需要十字线(去掉highlightColor的颜色,但还是有默认颜色,我只能将线宽设置为0)
    set1.drawCircleHoleEnabled = YES; //是否可以空心
    set1.circleHoleRadius = 2.0; //设置折点空心圆角
    [set1 setDrawValuesEnabled:YES];
 
    //其他连个set是一样的设置   
}

绑定数据集

NSMutableArray *dataSets = [[NSMutableArray alloc] init];
[dataSets addObject:set1];
[dataSets addObject:set2];
[dataSets addObject:set3];

LineChartData *data = [[LineChartData alloc] initWithDataSets:dataSets];
//这里的颜色控制的是每个折点的颜色
[data setValueTextColor:UIColor.whiteColor];
[data setValueFont:[UIFont systemFontOfSize:9.f]];

//每个这点上是否显示数值(我这里不显示)
[data setDrawValues:NO];

chartView.data = data;

改变x轴下面显示的内容,如下,

pragma mark - IChartAxisValueFormatter
- (NSString * _Nonnull)stringForValue:(double)value axis:(ChartAxisBase * _Nullable)axis {
    //value从0开始,我要从1开始
    return [NSString stringWithFormat:@"%d月",(int)value + 1]; 
}

点击折点maker会向下挤的问题
1.计算你数据中的最大值和最小值
2.然后设置折线view的最大值和最小值

chartView.rightAxis.axisMaximum = ABS(max_y - min_x) * 1/3.0 + max_y;
chartView.rightAxis.axisMinimum = min_x;

嗯,就是这样了。

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

推荐阅读更多精彩内容