https://github.com/mr-won/flutter_chart
flutter fl_chart 라이브러리의 사용
https://github.com/mr-won/flutter_chart
charts fl-chart flutter flutter-charts
Last synced: 3 months ago
JSON representation
flutter fl_chart 라이브러리의 사용
- Host: GitHub
- URL: https://github.com/mr-won/flutter_chart
- Owner: mr-won
- Created: 2023-01-22T04:11:59.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-01-22T06:00:55.000Z (over 2 years ago)
- Last Synced: 2025-03-18T02:27:08.154Z (3 months ago)
- Topics: charts, fl-chart, flutter, flutter-charts
- Language: C++
- Homepage:
- Size: 293 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# fl_chart
```
다양한 통계 데이터를 시각적인 형태로 바꾸는 것을 데이터 시각화라고 한다.
그 중에 선 그래프, 막대 그래프, 파이형 그래프 등을 지원하는 라이브러리인
fl_chart를 사용해 보았다.
```
## 첫 번째 화면의 싱글 직선 그래프
## 두 번째 화면의 멀티플 곡선 그래프
## Basic Single Line Chart
```
기본 선 그래프 차트를 하나 만들어 보았습니다.
LineChart 위젯 안에 차트 데이터 속성을 줄 수 있습니다.
borderData는 데이터의 외곽선을 설정하고 lineBarsData는 각 데이터의 x, y 좌표를
FlSpot(x, y)의 형태로 spots 프로퍼티로 직접 지정해 줄 수 있습니다.
외곽선은 주지 않고 가로 x 데이터를 1만큼 증가시키면서 y 데이터를 임의로 부여하여
기본 선 그래프 차트를 구현하였습니다.
```
## 두 번째 화면으로 화면 전환하는 버튼 추가
```
두 번째 화면에는 여러 개의 곡선 그래프를 보여주는 화면을 추가합니다.
화면을 routes 기능을 사용해서 버튼을 누르면 두 번째 화면으로 넘어가도록 버튼을 추가했습니다.
```
## 두 번째 화면에 3개의 곡선 그래프 추가
```
List.generate로 8개의 랜덤한 y좌표를 가지는 좌표 생성하고 곡선 그래프마다 각각 다른 색상과
좌표값을 가지도록 하였습니다.
LineChartBarData 프로퍼티의 값으로 spots(좌표), color(색상), isCurved(곡,직선 판단) 등을 할 수 있습니다.
```
## 두 번째 화면 방향 고정
```
가로축이 너무 넓어서 화면 방향을 세로로 고정할 필요가 있었습니다.
따라서 services 라이브러리를 설치한 후에 세로로 고정하는 코드를 추가하였습니다.
```
