Charts 入门

最近工程用到了 Charts, 网上苦苦找寻, 只发现了 Android 的详细使用说明, 于是决定翻译一下, 方便大家以后使用, Android 原文: 庄宏基的博客 - 博客频道 - CSDN.NET

Charts 地址 

• Chart 支持折线图、柱状图、散点图、烛状图、气泡图、饼状图和蜘蛛网状图, 除此之外还支持多种图表混合使用

• Chart 支持缩放、拖拽、选择、动画

• Chart 使用 Swift, 如果工程为 OC, 则需要混编

<1> cocoapods 导入(或 Github 下载以后, 找到 Charts 下 Classes 文件夹手动导入即可)

<2> Build Settings-Build Options-Embedded Content Contains Swift Code-YES, 

<3> #import <工程名-Swift.h>

用法及其基本属性

拿 CombinedChartView(复合图表) 举例

CombinedChartView *chartView = [[CombinedChartView alloc] initWithFrame:frame];

// 可以添加CombinedChartDrawOrderBar, CombinedChartDrawOrderBubble, CombinedChartDrawOrderCandle, CombinedChartDrawOrderLine, CombinedChartDrawOrderScatter

chartView.drawOrder = @[CombinedChartDrawOrderLine];

chartView.delegate = self;

[self.view addSubview:chartView];

// 设置 chartView 的数据源

CombinedChartData *data = [[CombinedChartData alloc] initWithXVals:@[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]];

LineChartData *d = [[LineChartData alloc] init];

NSMutableArray *entries = @[].mutableCopy;

for (int index = 0; index < ITEM_COUNT; index++) {

[entries addObject:[[ChartDataEntry alloc] initWithValue:(arc4random_uniform(15) + 10) xIndex:index]];

}

LineChartDataSet *set = [[LineChartDataSet alloc] initWithYVals:entries label:@"Line DataSet"];

[d addDataSet:set];

data.lineData = d;

chartView.data = data;

ChartViewDelegate

// 选中 chartView 上的某个点

- (void)chartValueSelected:(ChartViewBase * _Nonnull)chartView entry:(ChartDataEntry * _Nonnull)entry dataSetIndex:(NSInteger)dataSetIndex highlight:(ChartHighlight * _Nonnull)highlight {

//entry 里有xIndex(下标)和 value(下标对应的值)

//dataSetIndex 为选中数据集合的 index

}

// 没有选中时

- (void)chartValueNothingSelected:(ChartViewBase * _Nonnull)chartView {

}

// chartView 缩放时

- (void)chartScaled:(ChartViewBase * _Nonnull)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY {

}

// chartView 拖拽时

- (void)chartTranslated:(ChartViewBase * _Nonnull)chartView dX:(CGFloat)dX dY:(CGFloat)dY {

}

属性:

分为对 ChartView, 对ChartXAxis, 对ChartYAxis,  对ChartDataSet 的设置

• ChartView

chartView.descriptionText = @"这是个图表";// 右下角描述

chartView.noDataTextDescription = "No Data";// 没有数据时描述

chartView.drawGridBackgroundEnabled = YES;// 网格背景

chartView.gridBackgroundColor = [UIColor redColor];//  背景颜色

chartView.drawBarShadowEnabled = NO;// 阴影

chartView.drawBordersEnabled = YES;// 边框

chartView.pinchZoomEnabled = YES// XY 轴同时缩放

chartView.scaleEnabled = YES;// 缩放

chartView.highlightPerDragEnabled = YES;// 能否拖拽高亮线(数据点与坐标的提示线)

chartView.autoScaleMinMaxEnabled = YES;// 缩放时自动调整最大最小值

chartView.legend.enabled = NO;// 图例是否显示

chartView.drawBordersEnabled = YES;// 表格边框是否显示

chartView.scaleYEnabled = NO;//  缩放 Y 轴

chartView.scaleXEnabled = YES;// 缩放 X 轴

chartView.doubleTapToZoomEnabled = YES;//  双击缩放

chartView.borderColor = [UIColor BlueColor];// 边框颜色

chartView.dragDecelerationEnabled = YES;// 结束拖拽减速

chartView.maxVisibleValueCount = 30;// 可见标签数量最大值(setDrawValues才生效)

[chartView setExtraOffsetsWithLeft:10 top:0 right:10 bottom:0];// 偏移

• ChartXAxis

ChartXAxis *xAxis = chartView.xAxis;

[xAxis setLabelsToSkip:4];// 跳过显示的标签数

xAxis.labelPosition = XAxisLabelPositionBottom;// X轴的位置

xAxis.labelTextColor = [UIColor whiteColor];//  颜色

xAxis.spaceBetweenLabels = 16.0;// 标签之间的间距

xAxis.avoidFirstLastClippingEnabled = YES;// 两侧超出图表

xAxis.gridColor = [UIColor whiteColor];// X 轴网格线颜色

xAxis.drawAxisLineEnabled = NO;// X 轴边线

xAxis.drawGridLinesEnabled = NO;// X 轴网格线

• ChartYAxis

ChartYAxis *rightAxis = chartView.rightAxis;

rightAxis.drawGridLinesEnabled = NO;// Y 轴网格线

rightAxis.labelCount = 7;//  标签个数

rightAxis.drawAxisLineEnabled = NO;// Y 轴边线

rightAxis.startAtZeroEnabled = NO;//  从零显示

rightAxis.granularityEnabled = YES;// 轴密度自适应

rightAxis.labelPosition = YAxisLabelPositionInsideChart;// Y  轴位置

rightAxis.spaceTop = 10;// 最高值的顶部间距占最高值的值的百分比

rightAxis.showOnlyMinMaxEnabled = YES;// 只显示最大最小

• ChartDataSet

LineChartDataSet *set = [[LineChartDataSet alloc] initWithYVals:NSArray<ChartDataEntry *>];

set.drawCubicEnabled = NO;// 曲线为圆滑曲线

set.cubicIntensity = 0.2;// 曲线弧度

set.drawCirclesEnabled = NO;// 每个点是否显示

set.lineWidth = 0.8f;// 线宽

set.circleRadius = 4.0;// 每个点的切角

[set setCircleColor:UIColor.whiteColor];// 每个点的颜色

set.highlightColor = [UIColor redColor];// 点击某个点时，横竖两条线的颜色

set.fillColor = [UIColor whiteColor];// 填充颜色

set.drawHorizontalHighlightIndicatorEnabled = NO;// 点击某个点时，水平线是否显示

set.drawValuesEnabled = YES;// 在点上绘制Value

// 渐变数组

NSArray *gradientColors = @[(id)COLOR_BLUE.CGColor,(id)COLOR_BLUE.CGColor];

CGGradientRef gradient = CGGradientCreateWithColors(nil, (CFArrayRef)gradientColors, nil);

// 渐变设置

set.fillAlpha = 0.13f;

set.fill = [ChartFill fillWithLinearGradient:gradient angle:90.f];

set.drawFilledEnabled = YES;

...还有很多, 就不一一列举了, 如果还有什么需要, 可以留言, 我会一一补充的, 后续还有实时数据, 动画, MakerView等其它