objective-c - 在 iOS 中实现一个简单的折线图

Question

在我的 iPad 应用程序中植入简单折线图的最佳方式是什么。我只想绘制 4-8 个点，图表确实需要看起来很漂亮。 HTML5 足以满足我的需要。我将如何着手实现 HTML 代码来绘制折线图？我一直在考虑使用 Google 图表工具，但还有其他我可以使用的建议吗？

Answer 1

这是一个非常基础的类(class)，将为您提供基本的路线。 Y 轴采用 NSNumbers 的 NSArray。它应该为您提供一个很好的起点，因为它非常简单。您可以考虑向点和轴标记添加标签以提供比例感。

标题:

#import <UIKit/UIKit.h>

@interface SOGenericGraphView : UIView {
    NSArray *yValues;
}

@property (strong, atomic) NSArray *yValues;

@end

实现:

#import "SOGenericGraphView.h"

@implementation SOGenericGraphView

@synthesize yValues;

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        self.backgroundColor = [UIColor whiteColor];
    }
    return self;
}


// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    // Drawing code
    [super drawRect:rect];
    CGRect insetRect = CGRectInset(self.frame, 10, 15);
    double maxSpeed = [[yValues valueForKeyPath:@"@max.doubleValue"] doubleValue];
    CGFloat yRatio = insetRect.size.height/maxSpeed;
    CGFloat xRatio = insetRect.size.width/(yValues.count-1);
    UIBezierPath *sparkline = [UIBezierPath bezierPath];
    for (int x = 0; x< yValues.count; x++) {
        CGPoint newPoint = CGPointMake(x*xRatio + insetRect.origin.x, insetRect.size.height - (yRatio*[[yValues objectAtIndex:x] doubleValue] - insetRect.origin.y));
        if (x == 0) {
            [sparkline moveToPoint:newPoint];
        }
        else {
            [sparkline addLineToPoint:newPoint];
        }
    }
    [[UIColor redColor] set];
    [sparkline stroke];
}

@end