常见绘图框架-(Charts)

时间：2023-03-08 17:46:49

swift 出来后有很多优秀的第三方绘图、动画框架,最近项目需要使用了 Charts 
Github: https://github.com/danielgindi/Charts

因为是在Object-c工程上使用，所以使用cocoapod 工具导入,省了很多麻烦

podfile:

target 'DianLeIE’
pod 'Charts', '~> 3.0.0'
pod 'Realm', '~> 2.0.2'

use_frameworks!

在开始使用的时候遇到了一些问题，因为之前用core plote 第三绘图,很多都需要自己自定义,但是在Charts 上预留了很多自定义的方法,在使用时就不需要过多的计算,可能就是因为这个原因所以在github上star 很高,并且这个还有安卓版,坑的地方就是是看安卓使用文档,不过还是很容易看懂的，字面意思差不多。

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #703daa }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000; min-height: 16.0px }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #3e1e81 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #008400 }
span.s1 { }
span.s2 { color: #4f8187 }
span.s3 { color: #703daa }
span.s4 { color: #3e1e81 }
span.s5 { color: #272ad8 }
span.s6 { color: #ba2da2 }
span.s7 { color: #000000 }
span.s8 { color: #008400 }
span.s9 { font: 14.0px "PingFang SC"; color: #008400 }

_chartView = [[LineChartView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];

_chartView.delegate = self;

_chartView.chartDescription.enabled = NO;

_chartView.borderColor = [UIColor blackColor];

_chartView.dragEnabled = YES;               //是否允许拖拽

//X缩放

[_chartView setScaleXEnabled:YES];

//Y缩放

[_chartView setScaleYEnabled:NO];

_chartView.pinchZoomEnabled = NO;

//setExtraOffsets　　设置偏移位置 这里需要调，不然影响xAxis label 与 线条上对应的位置有误差

[_chartView setExtraOffsetsWithLeft:5.f top:0.f right:30.f bottom:0.f];

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #008400 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #703daa }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #d12f1b }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #3e1e81 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000; min-height: 16.0px }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #4f8187 }
span.s1 { color: #000000 }
span.s2 { }
span.s3 { font: 14.0px "PingFang SC" }
span.s4 { color: #4f8187 }
span.s5 { color: #703daa }
span.s6 { color: #3e1e81 }
span.s7 { color: #008400 }
span.s8 { font: 14.0px "PingFang SC"; color: #008400 }
span.s9 { color: #272ad8 }
span.s10 { color: #ba2da2 }
span.s11 { color: #31595d }
span.s12 { color: #d12f1b }

//设置图例

ChartLegend *l = _chartView.legend;

l.form = ChartLegendFormSquare;                                     //图例样式

l.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:11.f];

l.textColor = [UIColor blackColor];

l.horizontalAlignment = ChartLegendHorizontalAlignmentRight;        //水平方向位置

l.verticalAlignment = ChartLegendVerticalAlignmentBottom;           //垂直方向位置

l.orientation = ChartLegendOrientationHorizontal;

l.drawInside = NO;

//X轴属性设置

ChartXAxis *xAxis = _chartView.xAxis;

xAxis.labelFont = [UIFont systemFontOfSize:11.f];

xAxis.labelTextColor =  [UIColor hex:@"666666"];        //009b34

xAxis.drawGridLinesEnabled = NO;

xAxis.drawAxisLineEnabled = YES;

_xAxisFormatter = [[DateValueFormatter alloc] init];

xAxis.valueFormatter = self;　　　　　　　　　　　　　　　　　//自定xAxis label值样式

xAxis.labelCount = 5;

xAxis.labelPosition = ChartLimitLabelPositionLeftBottom;    //x轴位置

xAxis.labelRotationAngle = -20;

　　　　

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "PingFang SC"; color: #008400 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000 }
span.s1 { font: 14.0px Menlo; color: #000000 }
span.s2 { font: 14.0px Menlo }
span.s3 { }
span.s4 { color: #703daa }
span.s5 { color: #4f8187 }
span.s6 { color: #31595d }
span.s7 { color: #d12f1b }
span.s8 { color: #008400 }
span.s9 { color: #272ad8 }
span.s10 { color: #ba2da2 }
span.s11 { font: 14.0px "PingFang SC"; color: #008400 }
span.s12 { color: #3e1e81 }

　　　　 //左侧y轴属性设置

ChartYAxis *leftAxis = _chartView.leftAxis;

leftAxis.labelTextColor = [UIColor hex:@"9d9d9d"];      //9d9d9d

leftAxis.axisMinimum = 0.0;　　　　　　　　　　　　　　　　　　//设置leftAxis label 最小值为0

leftAxis.drawGridLinesEnabled = YES;

leftAxis.drawZeroLineEnabled = NO;

leftAxis.granularityEnabled = NO;

leftAxis.drawAxisLineEnabled = NO;

leftAxis.xOffset = 15;                              //x 位置偏移

[leftAxis setGridColor:[UIColor hex:@"efeff4"]];    //设置y轴表格颜色值

　　　　　　

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #008400 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000 }
span.s1 { color: #000000 }
span.s2 { }
span.s3 { font: 14.0px "PingFang SC" }
span.s4 { color: #703daa }
span.s5 { color: #4f8187 }
span.s6 { color: #272ad8 }
span.s7 { color: #ba2da2 }

//右侧Y轴属性设置

ChartYAxis *rightAxis = _chartView.rightAxis;

rightAxis.axisMaximum = 0 ;

rightAxis.axisMinimum = 0 ;

rightAxis.drawAxisLineEnabled = NO;

　　

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #008400 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #4f8187 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000; min-height: 16.0px }
span.s1 { color: #000000 }
span.s2 { }
span.s3 { font: 14.0px "PingFang SC" }
span.s4 { color: #4f8187 }
span.s5 { color: #703daa }
span.s6 { color: #3e1e81 }
span.s7 { color: #272ad8 }
span.s8 { color: #31595d }
span.s9 { color: #d12f1b }

　　　　//继承ChartMarkerImage 自定义提示框　　这里BalloonMarker 是Charts Demo中找到了，自个加一下修改

_marker = [[BalloonMarker alloc]

initWithColor: [UIColor colorWithWhite:180/255. alpha:1.0]

font: [UIFont systemFontOfSize:12.0]

textColor: [UIColor hex:@"666666"]

insets: UIEdgeInsetsMake(0, 0, 0, 0)];

_marker.chartView = _chartView;

_marker.image = [UIImage imageNamed:@"icon_marker"];

_marker.minimumSize = CGSizeMake(80.f, 40.f);

_chartView.marker = _marker;

　　　　//最坑的在这里，设置X轴最大显示范围 必须在设置数据 后加入,不然因为填充数据后重新计算会导致错误，并且要移除charView上历史视图

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000; min-height: 16.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #3e1e81 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #4f8187 }
span.s1 { }
span.s2 { color: #ba2da2 }
span.s3 { color: #31595d }
span.s4 { color: #703daa }
span.s5 { color: #000000 }
span.s6 { color: #4f8187 }
span.s7 { color: #272ad8 }
span.s8 { color: #3e1e81 }

[self setDataCount:dataArry.count Data:dataArry dateArry:dateArry];

[_chartView setVisibleXRangeMaximum:5.0f];

[_chartView setVisibleXRangeMinimum:5.0f];

[_chartView moveViewToX:_dateArry.count+1];

如果最开始使用建议下载Demo并且查看安卓版文档:https://github.com/PhilJay/MPAndroidChart/wiki

一些常见的问题也可在这查看：https://github.com/PhilJay/MPAndroidChart/issues

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #1337ff }
span.s1 { }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #3e1e81 }
span.s1 { }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000 }
span.s1 { }

相关文章