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