การใช้งาน Line Chart จากข้อมูลในภาษา Objective-C แบบง่ายๆ

ในยุคที่ข้อมูลเชิงสถิติมีความสำคัญมากขึ้น การแสดงข้อมูลในรูปแบบกราฟนั้นเป็นเรื่องที่ไม่ควรมองข้าม โดยเฉพาะกราฟประเภท Line Chart หรือกราฟเส้น ที่สามารถแสดงแนวโน้มของข้อมูลได้อย่างชัดเจน ในบทความนี้เราจะมาศึกษาวิธีการสร้าง Line Chart โดยใช้ภาษา Objective-C พร้อมตัวอย่างโค้ดและการอธิบายการทำงาน เพื่อให้คุณสามารถนำไปใช้งานได้ง่ายๆ

ความสำคัญของ Line Chart

ก่อนอื่นเรามาทำความเข้าใจกันสักนิดว่าทำไมกราฟเส้นถึงมีความสำคัญ แน่นอนว่ากราฟเส้นช่วยให้เรามีมุมมองที่ชัดเจนในการเปรียบเทียบข้อมูลในช่วงเวลาต่างๆ โดยเฉพาะในโลกธุรกิจ เช่น การแสดงยอดขายในแต่ละเดือน การแสดงอุณหภูมิในแต่ละวัน หรือแม้กระทั่งการติดตามการเติบโตของสมาชิกรายเดือน

Use Case ในโลกจริง

ยกตัวอย่างหนึ่งที่ชัดเจนก็คือ แอปพลิเคชันการติดตามสุขภาพ เช่น แอปที่บันทึกระดับน้ำตาลในเลือด หรือระดับความดันโลหิต โดยที่ผู้ใช้สามารถดูประวัติข้อมูลเหล่านี้ในรูปแบบกราฟเส้น เพื่อวิเคราะห์แนวโน้มและปรับปรุงสุขภาพของตนเองหรือแม้กระทั่งการแจ้งเตือนเพื่อให้ไปพบแพทย์ในกรณีที่มีค่าแปลกๆ

การสร้าง Line Chart ใน Objective-C

ในส่วนนี้เราจะมาเริ่มสร้าง Line Chart กัน โดยจะใช้หนึ่งในไลบรารีที่ได้รับความนิยมสำหรับการแสดงข้อมูลใน iOS นั่นคือ *Core Plot* ซึ่งเป็นไลบรารีที่สามารถทำให้การจัดการกราฟเป็นเรื่องง่าย

ขั้นตอนที่ 1: ติดตั้ง Core Plot

เราสามารถติดตั้ง Core Plot ได้โดยใช้ CocoaPods ดังนี้:

 pod 'CorePlot'

หลังจากติดตั้งเสร็จสิ้น อย่าลืมทำ `pod install`

ขั้นตอนที่ 2: สร้าง Data Model

สำหรับตัวอย่างนี้เราจะสร้างข้อมูลสมมุติเกี่ยวกับอุณหภูมิในแต่ละวัน ดังนี้:

 @interface TemperatureData : NSObject

@property (nonatomic, strong) NSMutableArray *temperatures;
@property (nonatomic, strong) NSMutableArray *dates;

- (instancetype)init;
- (void)addTemperature:(NSNumber *)temperature onDate:(NSDate *)date;

@end

@implementation TemperatureData

- (instancetype)init {
    self = [super init];
    if (self) {
        _temperatures = [NSMutableArray array];
        _dates = [NSMutableArray array];
    }
    return self;
}

- (void)addTemperature:(NSNumber *)temperature onDate:(NSDate *)date {
    [self.temperatures addObject:temperature];
    [self.dates addObject:date];
}

@end

ขั้นตอนที่ 3: สร้าง Line Chart

เราจะสร้างกราฟเส้นโดยใช้กรอบข้อมูลที่เราสร้างขึ้น:

 #import "CorePlot.h"

@interface LineChartViewController : UIViewController <CPTPlotDataSource>

@property (nonatomic, strong) CPTGraphHostingView *hostView;
@property (nonatomic, strong) TemperatureData *data;

@end

@implementation LineChartViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.data = [[TemperatureData alloc] init];
    // เพิ่มข้อมูลสมมุติ
    [self.data addTemperature:@(30) onDate:[NSDate dateWithTimeIntervalSinceNow:-86400 * 3]]; // 3 วันก่อน
    [self.data addTemperature:@(32) onDate:[NSDate dateWithTimeIntervalSinceNow:-86400 * 2]]; // 2 วันก่อน
    [self.data addTemperature:@(31) onDate:[NSDate dateWithTimeIntervalSinceNow:-86400]]; // 1 วันก่อน
    [self.data addTemperature:@(33) onDate:[NSDate date]]; // วันนี้

    // สร้างกราฟ
    [self createGraph];
}

- (void)createGraph {
    self.hostView = [[CPTGraphHostingView alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:self.hostView];

    // สร้างกราฟ
    CPTXYGraph *graph = [[CPTXYGraph alloc] initWithFrame:self.hostView.bounds];
    self.hostView.hostedGraph = graph;

    // คอนฟิก
    graph.paddingLeft = 20.0;
    graph.paddingTop = 20.0;
    graph.paddingRight = 20.0;
    graph.paddingBottom = 20.0;

    // สร้างกราฟเส้น
    CPTScatterPlot *linePlot = [[CPTScatterPlot alloc] init];
    linePlot.dataSource = self;
    [graph addPlot:linePlot];

    // กำหนดให้แกน X และ Y
    CPTXYAxis *x = graph.axisSet.xAxis;
    x.majorIntervalLength = @(1);

    CPTXYAxis *y = graph.axisSet.yAxis;
    y.majorIntervalLength = @(1);
}

#pragma mark - CPTPlotDataSource

- (NSUInteger)numberOfRecordsForPlot:(CPTPlot *)plot {
    return self.data.temperatures.count;
}

- (NSNumber *)numberForPlot:(CPTPlot *)plot field:(NSUInteger)field recordIndex:(NSUInteger)index {
    if (field == CPTScatterPlotFieldX) {
        // กำหนดแกน X เป็นวันที่
        return @(index);
    } else {
        // กำหนดแกน Y เป็นอุณหภูมิ
        return self.data.temperatures[index];
    }
}

@end

อธิบายการทำงาน

ในตัวอย่างโค้ดข้างต้น เราได้สร้างคลาส `TemperatureData` เพื่อจัดเก็บอุณหภูมิและวันที่ จากนั้นใน `LineChartViewController` เราได้ทำการเพิ่มข้อมูลสมมุติและสร้างกราฟเส้นโดยใช้ Core Plot เมื่อกราฟถูกสร้างขึ้นจะมีการแสดงผลข้อมูลที่เราได้เพิ่มเข้าไป

สรุป

โดยรวมแล้ว การสร้าง Line Chart จากข้อมูลใน Objective-C นั้นไม่ยากเลย หากคุณเข้าใจวิธีการเตรียมข้อมูลและใช้ไลบรารีอย่าง Core Plot คุณจะสามารถสร้างกราฟที่ทำให้ข้อมูลของคุณดูน่าสนใจและเป็นประโยชน์มากขึ้น

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการเขียนโปรแกรมและการสร้างแอปพลิเคชัน ไม่ว่าจะเป็นในด้านการพัฒนา iOS หรือโปรแกรมภาษาอื่นๆ มาเรียนกับเราที่ EPT (Expert-Programming-Tutor) เพื่อเสริมสร้างความรู้และทักษะในสายงานนี้กันเถอะ!

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง