Рисование нескольких линий с помощью диаграмм iOS

РЕДАКТИРОВАТЬ: пример в вопросе предназначен исключительно для его упрощения, но мне не нужно создавать линию, а линию с точками данных. Вот почему мне нужно использовать графическую библиотеку. Данные динамические, а не статические. Какой-то пользователь предложил мне использовать изображение для этого, но это совершенно не то, что мне нужно. Я пытаюсь понять, как использовать библиотеку iOS-charts для рисования нужных мне графиков.


Ссылка на проект: https://github.com/danielgindi/ios-charts

Я использую библиотеку iOS Charts для создания графика с несколькими линиями. Я хотел бы иметь 3 строки и 20 точек данных:

  • строка 1: 20 значений со значением 1
  • строка 2: 20 значений со значением 2
  • строка 3: 20 значений со значением 1

Я изменил пример "LineChart2ViewController" в примере проекта github для iOS и не смог получить желаемый результат. Вот что я получаю:

введите здесь описание изображения

Что не так:

  • метки значений строки - 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;
}

person mm24    schedule 07.09.2015    source источник
comment
почему бы вам не создать собственный пользовательский интерфейс с этими линиями сетки?   -  person Teja Nandamuri    schedule 07.09.2015
comment
Это портит смысл наличия графической библиотеки.   -  person mm24    schedule 07.09.2015
comment
вы пытались указать значение шрифта 0 в ll2.valueFont = [UIFont systemFontOfSize:10.0]; ?   -  person Teja Nandamuri    schedule 07.09.2015
comment
Только что попробовал. Это работает. Однако 3 линии кажутся все еще смещенными (например, линия 1 соответствует 1, но линия 3 показана на 0,5y, а линия 2 показана на 0,4y). Есть идеи, почему? Спасибо за комментарий.   -  person mm24    schedule 07.09.2015
comment
я проверю это точно.... и вернусь к вам   -  person Teja Nandamuri    schedule 07.09.2015
comment
Нашел способ сделать это. Только что опубликовал ответ. Спасибо за старания :)   -  person mm24    schedule 07.09.2015
comment
Здорово. Я посмотрю!   -  person Teja Nandamuri    schedule 07.09.2015


Ответы (1)


Благодаря @T_77 я решил первую проблему удаления меток из каждой точки данных, установив размер шрифта на 0, code:

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

Затем я изменил значение axisDependency для LineChartDataSet на AxisDependencyLeft, чтобы установленные мной значения были связаны с левой осью, а не с осью x.

Вот код:

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

Вот результат:

введите здесь описание изображения

person mm24    schedule 07.09.2015