Home Mobile How to build Radial Bar

How to build Radial Bar

0

Dalam pengembangan aplikasi Flutter, seringkali kita perlu memvisualisasikan data dalam bentuk diagram radial bar atau radial bar chart. Salah satu library yang dapat digunakan untuk membuat radial bar chart yang kaya fitur adalah Syncfusion Flutter Charts. Dalam artikel ini, kita akan menjelajahi cara membuat radial bar chart menggunakan Syncfusion Flutter Charts dan tata cara yang diperlukan untuk mengimplementasikannya dalam aplikasi Flutter.

Klink untuk menuju link library Syncfusion Flutter Charts

Langkah 1: Mengimpor Library

Pertama-tama, kita perlu mengimpor library Syncfusion Flutter Charts ke dalam proyek Flutter kita. Buka file pubspec.yaml dan tambahkan dependensi berikut di bawah dependensi lainnya:

dependencies:
  syncfusion_flutter_charts: ^21.2.3

Setelah itu, jalankan perintah flutter pub get untuk mengunduh dan menginstal dependensi baru.

Langkah 2: Membuat Widget Chart

Selanjutnya, kita perlu membuat widget chart di dalam aplikasi Flutter kita. Misalnya, kita akan membuat radial bar chart sederhana.

import ‘package:flutter/material.dart’;
import ‘package:syncfusion_flutter_charts/charts.dart’;

class ChartWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SfCircularChart(
      series: <RadialBarSeries>[
        RadialBarSeries<Map<String, dynamic>, String>(
          dataSource: <Map<String, dynamic>>[
            {‘label’: ‘A’, ‘value’: 10},
            {‘label’: ‘B’, ‘value’: 20},
            {‘label’: ‘C’, ‘value’: 15},
            {‘label’: ‘D’, ‘value’: 25},
          ],
          xValueMapper: (Map<String, dynamic> data, _) => data[‘label’],
          yValueMapper: (Map<String, dynamic> data, _) => data[‘value’],
          dataLabelSettings: DataLabelSettings(
            isVisible: true,
          ),
        ),
      ],
    );
  }
}

Di dalam widget ChartWidget, kita menggunakan SfCircularChart dan RadialBarSeries dari Syncfusion Flutter Charts. Data untuk radial bar chart diinisialisasi menggunakan dataSource, dan xValueMapper dan yValueMapper digunakan untuk menentukan data yang akan ditampilkan pada label dan nilai radial bar chart.

Berikut adalah gambaran contohnya

Kesimpulan

Dalam artikel ini, kita telah mengeksplorasi cara membuat radial bar chart menggunakan Syncfusion Flutter Charts. Langkah-langkah di atas memberikan gambaran tentang bagaimana mengimplementasikan chart jenis ini dalam aplikasi