ios - 使用 iOS 图表绘制多条线

Question

编辑:问题中的示例纯粹是为了简化它，但我不需要创建一条线，而是一 strip 有数据点的线。这就是我需要使用图形库的原因。数据是动态的而不是静态的。一些用户建议我为此使用图像，但这完全不是我想要的。我正在尝试了解如何使用“iOS-charts”库绘制我想要的图表。

---

项目链接:https://github.com/danielgindi/ios-charts

我正在使用 iOS 图表库来创建多条线图。我想要 3 条线和 20 个数据点:

• 第 1 行:20 个值为 1 的值
• 第 2 行:20 个值为 2 的值
• 第 3 行:20 个值为 1 的值

我修改了github上iOS项目示例中的“LineChart2ViewController”示例，没能得到我想要的结果。这是我得到的:

出了什么问题:

• 行值标签是 1、2 和 3，但 y 位置似乎介于 1 和 0.4 之间。
• 我得到每个数据点的标签(我想移除标签并只显示数据)

我怎样才能做到这一点？

---

修改后的代码如下:

//  Original code created by Daniel Cohen Gindi on 17/3/15.
//
//  Copyright 2015 Daniel Cohen Gindi & Philipp Jahoda
//  A port of MPAndroidChart for iOS
//  Licensed under Apache License 2.0
//
//  https://github.com/danielgindi/ios-charts
//

#import "LineChart2ViewController.h"
#import "ChartsDemo-Swift.h"

@interface LineChart2ViewController () <ChartViewDelegate>

@property (nonatomic, strong) IBOutlet LineChartView *chartView;
@property (nonatomic, strong) IBOutlet UISlider *sliderX;
@property (nonatomic, strong) IBOutlet UISlider *sliderY;
@property (nonatomic, strong) IBOutlet UITextField *sliderTextX;
@property (nonatomic, strong) IBOutlet UITextField *sliderTextY;

@end

@implementation LineChart2ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.title = @"Line compare";
    _chartView.delegate = self;

    _chartView.descriptionText = @"";
    _chartView.noDataTextDescription = @"You need to provide data for the chart.";

    _chartView.highlightEnabled = YES;
    _chartView.dragEnabled = YES;
    [_chartView setScaleEnabled:YES];
    _chartView.drawGridBackgroundEnabled = NO;
    _chartView.pinchZoomEnabled = YES;

    _chartView.backgroundColor = [UIColor colorWithWhite:204/255.f alpha:1.f];

    _chartView.legend.form = ChartLegendFormLine;
    _chartView.legend.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:11.f];
    _chartView.legend.textColor = UIColor.whiteColor;
    _chartView.legend.position = ChartLegendPositionBelowChartLeft;

    ChartXAxis *xAxis = _chartView.xAxis;
    xAxis.labelFont = [UIFont systemFontOfSize:12.f];
    xAxis.labelTextColor = UIColor.whiteColor;
    xAxis.drawGridLinesEnabled = NO;
    xAxis.drawAxisLineEnabled = NO;
    xAxis.spaceBetweenLabels = 1.0;

    ChartYAxis *leftAxis = _chartView.leftAxis;
    leftAxis.labelTextColor = [UIColor colorWithRed:51/255.f green:181/255.f blue:229/255.f alpha:1.f];
    leftAxis.customAxisMax = 3;
    leftAxis.drawGridLinesEnabled = YES;

    ChartYAxis *rightAxis = _chartView.rightAxis;
    rightAxis.labelTextColor = UIColor.redColor;
    rightAxis.customAxisMax = 20.0;
    rightAxis.startAtZeroEnabled = NO;
    rightAxis.customAxisMin = 0.0;
    rightAxis.drawGridLinesEnabled = NO;
    [rightAxis setEnabled:NO];

    [self setDataCount:20 range:4];

    [_chartView animateWithXAxisDuration:2.5];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)setDataCount:(int)count range:(double)range
{
    NSMutableArray *xVals = [[NSMutableArray alloc] init];

    for (int i = 0; i < count; i++)
    {
        [xVals addObject:[@(i) stringValue]];
    }

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

    for (int i = 0; i < count; i++)
    {
        //double val = (double) (arc4random_uniform(range));
        double val = 1.0;
        [yVals addObject:[[ChartDataEntry alloc] initWithValue:val xIndex:i]];
    }

    LineChartDataSet *set1 = [[LineChartDataSet alloc] initWithYVals:yVals label:@"Line 1"];
    set1.axisDependency = AxisDependencyLeft;
    [set1 setColor:[UIColor colorWithRed:51/255.f green:181/255.f blue:229/255.f alpha:1.f]];
    [set1 setCircleColor:UIColor.whiteColor];
    set1.lineWidth = 2.0;
    set1.circleRadius = 3.0;
    set1.fillAlpha = 65/255.0;
    set1.fillColor = [UIColor colorWithRed:51/255.f green:181/255.f blue:229/255.f alpha:1.f];
    set1.highlightColor = [UIColor colorWithRed:244/255.f green:117/255.f blue:117/255.f alpha:1.f];
    set1.drawCircleHoleEnabled = NO;

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

    for (int i = 0; i < count; i++)
    {
        double val = 2.0;
        ChartDataEntry * dataEntry = [[ChartDataEntry alloc] initWithValue:val xIndex:i];
        [yVals2 addObject:dataEntry];
    }

    LineChartDataSet *set2 = [[LineChartDataSet alloc] initWithYVals:yVals2 label:@"Line 2"];
    set2.axisDependency = AxisDependencyRight;
    [set2 setColor:UIColor.redColor];
    [set2 setCircleColor:UIColor.whiteColor];
    set2.lineWidth = 2.0;
    set2.circleRadius = 3.0;
    set2.fillAlpha = 65/255.0;
    set2.fillColor = UIColor.redColor;
    set2.highlightColor = [UIColor colorWithRed:244/255.f green:117/255.f blue:117/255.f alpha:1.f];
    set2.drawCircleHoleEnabled = NO;

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

    for (int i = 0; i < count; i++)
    {
        double val = 3.0;
        [yVals3 addObject:[[ChartDataEntry alloc] initWithValue:val xIndex:i]];
    }

    LineChartDataSet *set3 = [[LineChartDataSet alloc] initWithYVals:yVals3 label:@"Line 3"];
    set3.axisDependency = AxisDependencyRight;
    [set3 setColor:UIColor.blueColor];
    [set3 setCircleColor:UIColor.whiteColor];
    set3.lineWidth = 2.0;
    set3.circleRadius = 3.0;
    set3.fillAlpha = 65/255.0;
    set3.fillColor = UIColor.blueColor;
    set3.highlightColor = [UIColor colorWithRed:244/255.f green:117/255.f blue:117/255.f alpha:1.f];
    set3.drawCircleHoleEnabled = NO;

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

    LineChartData *data = [[LineChartData alloc] initWithXVals:xVals dataSets:dataSets];
    [data setValueTextColor:UIColor.whiteColor];
    [data setValueFont:[UIFont systemFontOfSize:9.f]];

    _chartView.data = data;
}

Answer 1

感谢@T_77，我通过将字体大小设置为 0 解决了从每个数据点删除标签的第一个问题，代码:

LineChartData *data = [[LineChartData alloc] initWithXVals:xVals dataSets:dataSets];
[data setValueTextColor:UIColor.whiteColor];
//[data setValueFont:[UIFont systemFontOfSize:9.f]];
[data setValueFont:[UIFont systemFontOfSize:0.0]];

然后我将 LineChartDataSet 的 axisDependency 值更改为 AxisDependencyLeft 以便我设置的值链接到左轴而不是x 轴。

代码如下:

LineChartDataSet *set3 = [[LineChartDataSet alloc] initWithYVals:yVals3 label:@"Line 3"];
set3.axisDependency = AxisDependencyLeft;

结果如下: