iOS-Charts - сделать гистограмму и оставшееся поле другим цветом

Я пытаюсь сделать диаграмму точно в соответствии с направляющими линиями дизайнера, но у меня есть трудности в трех вещах.

Это направляющие линии:

Диаграмма сделана дизайнером

И вот что я сделал:

Диаграмма, которую я сделал

Как видите, предполагалось, что красная полоса имеет между собой и целью синюю полосу. Уже пытался создать второй бар, чтобы увидеть, остается ли позади, но это не сработало. Это то, что я пытался

BarChartDataSet *set2 = [[BarChartDataSet alloc] initWithYVals:yVals label:@""];

А затем заполнены синими полосами с высотой цели. Но не работает, поэтому я удалил это.

Другая проблема заключается в том, что метки левой оси начинаются с нуля, и мы нашли способ обойти это.

Третья и последняя проблема заключается в том, что T для цели остается над линией, когда ожидаемое должно было быть после строки.

Это код, который использовался для получения диаграммы:

/*
 *  Method to render the graphic of a given KPI
 *
 *  @param  chartView   BarChartView object type
 *  @param  array   NSMutableArray with array of dictionaries
 *  @param  target  double with target value
 *  @param  granularity NSString ("Monthly", "weekly" or "daily")
 *
 *  @return id  BarCartView
 */
- (id)graphicRenderIn:(BarChartView*)chartView
            withData:(NSMutableArray*)array
              target:(double) target
      andGranularity:(NSString*)granularity{

    _chartView = chartView;
    [_chartView setUserInteractionEnabled:NO];

    // chartView setup
    _chartView.delegate = self;
    _chartView.descriptionText = @"";
    _chartView.noDataTextDescription = @"You need to provide data for the chart.";
    _chartView.maxVisibleValueCount = 60;
    _chartView.pinchZoomEnabled = NO;
    _chartView.drawBarShadowEnabled = NO;
    _chartView.drawGridBackgroundEnabled = NO;
    _chartView.backgroundColor = [UIColor green_title];

    // Ox axis setup
    ChartXAxis *xAxis = _chartView.xAxis;
    xAxis.labelPosition = XAxisLabelPositionBottom;
    xAxis.spaceBetweenLabels = 0.0;
    xAxis.drawGridLinesEnabled = NO;
    xAxis.axisLineColor = [UIColor turqoise];
    xAxis.labelTextColor = [UIColor white_100];
    xAxis.labelFont = [UIFont Caption1];

    _chartView.leftAxis.drawGridLinesEnabled = NO;
    _chartView.rightAxis.drawGridLinesEnabled = NO;
    _chartView.rightAxis.enabled = NO;

    _chartView.legend.enabled = NO;

    // Oy axis setup
    ChartYAxis *leftAxis = _chartView.leftAxis;
    leftAxis.labelFont = [UIFont Caption1];
    leftAxis.labelTextColor = [UIColor white_100];
    leftAxis.labelCount = 3;
    leftAxis.labelPosition = YAxisLabelPositionInsideChart;
    leftAxis.spaceTop = 0.15;
    leftAxis.axisLineColor = [UIColor turqoise];

    // define TARGET line in graphic
    [leftAxis removeAllLimitLines];
    [self updateTargetLine:target];
    [leftAxis addLimitLine:_line];


    // set data values
    [self setDataCount:array target:target andGranularity:granularity];
    [_chartView animateWithYAxisDuration:2.5];
    return self;
}


/*
 *  Method to setup the horizontal target line
 *
 *  @param  target  double with target value
 *
 *  @return void
 */
- (void) updateTargetLine:(double) target
{
    // single target line
    if (_line == nil)
    {
        ChartLimitLine *targetLine = [[ChartLimitLine alloc] initWithLimit:target label:@""];
        _line = targetLine;
    }

    // target line setup
    if (target != 0 )
    {
        _line.label = @"T";
    }
    _line.lineWidth = 0.8;
    _line.lineColor = [UIColor app_blue];
    _line.labelPosition = ChartLimitLabelPositionRight;
    _line.valueFont = [UIFont systemFontOfSize:10.0];
}

/*
 *  Method to setup data for the BarChart graphic
 *
 *  @param  array   NSMutableArray with array of dictionaries
 *  @param  target  double with target value
 *  @param  granularity NSString ("Monthly", "weekly" or "daily")
 *
 *  @return void
 */
- (void)setDataCount:(NSMutableArray*)array target:(double)target andGranularity:(NSString *)granularity
{
    NSInteger arraySize = [array count];
    NSMutableArray *arrayOy = [[NSMutableArray alloc] initWithCapacity:0];
    NSMutableArray *arrayOx = [[NSMutableArray alloc] initWithCapacity:0];

    // get array of values(arrayOy) and keys(arrayOx) from 
    for (NSDictionary *elem in array) {

        [arrayOy addObject: [elem objectForKey:@"value" ]];
        [arrayOx addObject:[elem objectForKey:@"date"]];

    }

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

    for(int i = 0; i < arraySize; i++)
    {
        double val = [[arrayOy objectAtIndex:i]doubleValue];
        [yVals addObject:[[BarChartDataEntry alloc] initWithValue:val xIndex:i+1]];
        if (val < target ) {
            [arrColor addObject:[UIColor red_bar]];
        }else{
            [arrColor addObject:[UIColor green_bar]];
        }
    }

    // Ox label values depends on granularity
    NSMutableArray *xVals = [[NSMutableArray alloc] init];
    [xVals addObject:@""]; // empty value to creat padding from the end
    for (int i = 0; i < arraySize; i++)
    {
        // Formatting Ox axis labels concerning data and granularity
        NSDate* date = [NSDate dateWithTimeIntervalSince1970:[[arrayOx objectAtIndex:i] doubleValue]];
        NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
        if ([granularity isEqualToString:@"dayly"] ) {
            [formatter setDateFormat:@"HH:mm"];
        }else{
            [formatter setDateFormat:@"dd/MM"];
        }

        [xVals addObject:[formatter stringFromDate:date]];
    }
    [xVals addObject:@""]; // empty value to creat padding from the end



    BarChartDataSet *set1 = [[BarChartDataSet alloc] initWithYVals:yVals label:@""];


    [set1 setColors:(arrColor)];
    [set1 setBarSpace: 0.90]; // creat a space between of each bar 90%

    set1.drawValuesEnabled = NO;

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

    BarChartData *data = [[BarChartData alloc] initWithXVals:xVals dataSets:dataSets];

    _chartView.data = data;

}

person Tiago Mendes    schedule 12.08.2015    source источник


Ответы (2)


Это то, что я использовал для диаграммы. Ваш ответ мне очень помог!

func setChart(dataPoints: [String], values: [Double]) {
    barChartView.noDataText = "You need to provide data for the chart"
    var dataEntries: [BarChartDataEntry] = []

    for i in 0..<dataPoints.count {
        let dataEntry = BarChartDataEntry(value: values[i], xIndex: i)
        dataEntries.append(dataEntry)
    }

    let chartDataSet = BarChartDataSet(yVals: dataEntries, label: "")
    let chartData = BarChartData(xVals: months, dataSet: chartDataSet)
    barChartView.data = chartData
    barChartView.descriptionText = ""
    chartDataSet.colors = [UIColor(red: 1, green: 1, blue: 1, alpha: 1)]


    barChartView.xAxis.drawGridLinesEnabled = false
    barChartView.xAxis.drawLabelsEnabled = false
    barChartView.xAxis.labelWidth = 3
    barChartView.xAxis.axisLineWidth = 1
    barChartView.xAxis.labelTextColor = UIColor.whiteColor()
    barChartView.xAxis.axisLineColor = UIColor.whiteColor()
    barChartView.xAxis.labelPosition = .Bottom


    barChartView.rightAxis.enabled = false



    //barChartView.xAxis.labelTextColor = UIColor.whiteColor()

    barChartView.drawBarShadowEnabled = false

    barChartView.leftAxis.drawGridLinesEnabled = false
    barChartView.leftAxis.enabled = true
    barChartView.leftAxis.axisLineColor = UIColor.whiteColor()
    barChartView.leftAxis.labelTextColor = UIColor.whiteColor()
    barChartView.leftAxis.labelCount = 4
    barChartView.leftAxis.axisLineWidth = 1

    barChartView.legend.enabled = false

    //barChartView.borderLineWidth


}

вот что я получил: https://www.dropbox.com/s/uskvwcbq3mlaf9o/Screen%20Shot%202016-04-25%20at%2017.14.36.png?dl=0

person Martin    schedule 25.04.2016

Какая у вас версия ios-charts? Я предполагаю, что синяя полоса есть, когда вы выделяете красную полосу? Это должно быть решено, если это видно только при выделении в последней версии.

Для Q2 каждая ось y имеет свойство с именем startAtZeroEnabled. Делайте все, что вам нравится.

Для Q3 в последнем коде метка ограничительной линии имеет больше вариантов положения. Другой способ: вы можете попробовать написать свою собственную позицию в функции renderLimitLine средства визуализации yAxis.

person Wingzero    schedule 14.08.2015