การใช้งาน Create Bar Chart from Data ในภาษา Dart แบบง่ายๆ

การวิเคราะห์ข้อมูลและการแสดงผลข้อมูลในรูปแบบกราฟนั้นเป็นสิ่งที่เราได้เห็นกันบ่อยในโลกดิจิทัลในปัจจุบัน การสร้างกราฟแท่ง (Bar Chart) เป็นหนึ่งในวิธีที่ง่ายที่สุดในการเปรียบเทียบข้อมูลหลายชุดเข้าด้วยกัน ในบทความนี้เราจะมาพูดถึงการสร้างกราฟแท่งโดยใช้ภาษา Dart ซึ่งเป็นภาษาโปรแกรมที่ได้รับความนิยมในหลายๆ ด้าน รวมถึงการพัฒนาแอปพลิเคชันบนมือถือและเว็บ

ทำความรู้จักกับ Dart

Dart คือ ภาษาโปรแกรมที่พัฒนาโดย Google และได้รับความนิยมเป็นอย่างมากในหมู่นักพัฒนาที่ทำงานกับ Flutter สำหรับการสร้างแอปพลิเคชันบนมือถือ โดยมีความสามารถในการเขียนโปรแกรมเชิงวัตถุ (Object-oriented) ทำให้โค้ดของเราง่ายต่อการอ่านและเข้าใจ เพื่อที่จะสร้างแอปพลิเคชันและกราฟได้อย่างมีประสิทธิภาพ

เริ่มต้นสร้าง Bar Chart

ก่อนอื่นเราต้องมีความรู้พื้นฐานเกี่ยวกับการใช้ Dart และ Flutter ก่อน เราจะใช้แพ็คเกจ `charts_flutter` ซึ่งจะช่วยเราในการสร้างกราฟแท่งได้อย่างง่ายดาย หากคุณยังไม่มีแพ็คเกจนี้ในโปรเจคต์ Dart ของคุณ สามารถเพิ่มได้โดยการเพิ่มโค้ดใน `pubspec.yaml` ดังนี้:

 dependencies:
  flutter:
    sdk: flutter
  charts_flutter: ^0.9.0

ตัวอย่างโค้ดการสร้าง Bar Chart

หลังจากที่เราได้ติดตั้งแพ็คเกจแล้ว มาดูกันว่าการสร้างกราฟแท่งใน Dart จะต้องทำอย่างไรบ้าง:

 import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;

class SalesData {
  final String year;
  final int sales;

  SalesData(this.year, this.sales);
}

class BarChartExample extends StatelessWidget {
  final List<charts.Series<SalesData, String>> seriesList;

  BarChartExample(this.seriesList);

  @override
  Widget build(BuildContext context) {
    return charts.BarChart(
      seriesList,
      animate: true,
    );
  }
}

void main() {
  final data = [
    SalesData('2019', 50),
    SalesData('2020', 75),
    SalesData('2021', 100),
    SalesData('2022', 125),
  ];

  final series = [
    charts.Series<SalesData, String>(
      id: 'Sales',
      domainFn: (SalesData sales, _) => sales.year,
      measureFn: (SalesData sales, _) => sales.sales,
      data: data,
    ),
  ];

  runApp(
    MaterialApp(
      title: 'Bar Chart Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Bar Chart Example'),
        ),
        body: Center(
          child: BarChartExample(series),
        ),
      ),
    ),
  );
}

อธิบายโค้ดข้างต้น

- `id`: ชื่อของ Series

- `domainFn`: ฟังกชันที่ใช้ในการกำหนดค่าบนแกน x

- `measureFn`: ฟังกชันที่ใช้ในการกำหนดค่าบนแกน y

- `data`: ข้อมูลที่เราสร้างขึ้น

Use Case ในโลกจริง

การสร้างกราฟแท่งนี้เข้ามามีความสำคัญในหลายๆ ด้าน เช่น:

เรียนรู้กับ EPT

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

สรุป

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

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