Biểu đồ là một biểu diễn đồ họa của dữ liệu trong đó dữ liệu được biểu thị bằng một ký hiệu như đường thẳng, thanh, hình tròn, v.v. Trong Flutter, biểu đồ hoạt động giống như một biểu đồ bình thường. Chúng ta sử dụng một biểu đồ trong Flutter để biểu diễn dữ liệu theo cách đồ họa cho phép người dùng hiểu chúng một cách đơn giản. Chúng ta cũng có thể vẽ một biểu đồ để biểu thị sự tăng và giảm của các giá trị của chúng ta. Biểu đồ có thể dễ dàng đọc dữ liệu và giúp chúng ta biết hiệu suất hàng tháng hoặc hàng năm bất cứ khi nào chúng ta cần.
Nội dung chính
1. Các loại biểu đồ được hỗ trợ trong Flutter
Flutter chủ yếu hỗ trợ ba loại biểu đồ và mỗi biểu đồ đi kèm với một số tùy chọn cấu hình. Sau đây là biểu đồ được sử dụng trong ứng dụng Flutter:
- Biểu đồ đường
- Biểu đồ cột
- Biểu đồ bánh và bánh donut
1.1 Biểu đồ đường
Biểu đồ đường là biểu đồ sử dụng các đường để kết nối các điểm dữ liệu riêng lẻ. Nó hiển thị thông tin trong một loạt các điểm dữ liệu. Nó chủ yếu được sử dụng để theo dõi các thay đổi trong một khoảng thời gian ngắn và dài.
Chúng ta có thể sử dụng nó như sau:
LineChart(
LineChartData(
// write your logic
),
); 1.2 Biểu đồ cột
Đây là một biểu đồ đại diện cho dữ liệu phân loại với các thanh hình chữ nhật. Nó có thể nằm ngang hoặc dọc.
Chúng ta có thể sử dụng nó như sau:
BarChart(
BarChartData(
// write your logic
),
); 1.3 Biểu đồ bánh hoặc bánh donut
Nó là một đồ thị hiển thị thông tin dưới dạng đồ thị hình tròn. Trong biểu đồ này, vòng tròn được chia thành các ngành và mỗi phần hiển thị dữ liệu phần trăm hoặc tỷ lệ.
Chúng ta có thể sử dụng nó như sau:
PieChart(
PieChartData(
// write your logic
),
); Hãy để chúng tôi hiểu nó với sự trợ giúp của một ví dụ.
1.4 Thí dụ
Mở IDE và tạo dự án Flutter mới. Tiếp theo, mở dự án, điều hướng đến thư mục lib và mở tệp pubspec.yaml . Trong tệp này, chúng ta cần thêm sự phụ thuộc của biểu đồ. Flutter cung cấp một số phụ thuộc biểu đồ và ở đây chúng ta sẽ sử dụng phụ thuộc fl_chart . Vì vậy, thêm nó như dưới đây:
dependencies:
flutter:
sdk: flutter
fl_chart: ^0.10.1Sau khi thêm phần phụ thuộc, hãy nhấp vào liên kết nhận gói được hiển thị ở góc trên cùng bên trái của màn hình. Bây giờ, hãy mở tệp main.dart và thay thế nó bằng đoạn code dưới đây:
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
void main() => runApp(MyApp());
/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Chart Example'),
backgroundColor: Colors.green
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
LineCharts(),
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Traffic Source Chart",
style: TextStyle(
fontSize: 20,
color: Colors.purple,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.italic
)
)
),
],
),
),
);
}
}
class LineCharts extends StatelessWidget {
@override
Widget build(BuildContext context) {
const cutOffYValue = 0.0;
const yearTextStyle =
TextStyle(fontSize: 12, color: Colors.black);
return SizedBox(
width: 360,
height: 250,
child: LineChart(
LineChartData(
lineTouchData: LineTouchData(enabled: false),
lineBarsData: [
LineChartBarData(
spots: [
FlSpot(0, 1),
FlSpot(1, 1),
FlSpot(2, 3),
FlSpot(3, 4),
FlSpot(3, 5),
FlSpot(4, 4)
],
isCurved: true,
barWidth: 2,
colors: [
Colors.black,
],
belowBarData: BarAreaData(
show: true,
colors: [Colors.lightBlue.withOpacity(0.5)],
cutOffY: cutOffYValue,
applyCutOffY: true,
),
aboveBarData: BarAreaData(
show: true,
colors: [Colors.lightGreen.withOpacity(0.5)],
cutOffY: cutOffYValue,
applyCutOffY: true,
),
dotData: FlDotData(
show: false,
),
),
],
minY: 0,
titlesData: FlTitlesData(
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 5,
textStyle: yearTextStyle,
getTitles: (value) {
switch (value.toInt()) {
case 0:
return '2016';
case 1:
return '2017';
case 2:
return '2018';
case 3:
return '2019';
case 4:
return '2020';
default:
return '';
}
}),
leftTitles: SideTitles(
showTitles: true,
getTitles: (value) {
return '\$ ${value + 100}';
},
),
),
axisTitleData: FlAxisTitleData(
leftTitle: AxisTitle(showTitle: true, titleText: 'Value', margin: 10),
bottomTitle: AxisTitle(
showTitle: true,
margin: 10,
titleText: 'Year',
textStyle: yearTextStyle,
textAlign: TextAlign.right)),
gridData: FlGridData(
show: true,
checkToShowHorizontalLine: (double value) {
return value == 1 || value == 2 || value == 3 || value == 4;
},
),
),
),
);
}
} Đầu ra:
Khi chúng tôi chạy ứng dụng trong thiết bị hoặc trình giả lập, chúng ta sẽ nhận được giao diện người dùng của màn hình tương tự như ảnh chụp màn hình bên dưới:
Cài ứng dụng cafedev để dễ dàng cập nhật tin và học lập trình mọi lúc mọi nơi tại đây.
Tài liệu từ cafedev:
- Full series tự học Flutter từ cơ bản tới nâng cao tại đây nha.
- Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
