{"id":28812552,"url":"https://github.com/tpdlshdmlrkfmcla/flutter_chart","last_synced_at":"2026-04-24T22:35:21.145Z","repository":{"id":65410611,"uuid":"591848200","full_name":"tpdlshdmlrkfmcla/Flutter_chart","owner":"tpdlshdmlrkfmcla","description":"flutter fl_chart 라이브러리의 사용","archived":false,"fork":false,"pushed_at":"2023-01-22T06:00:55.000Z","size":300,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-18T13:58:19.037Z","etag":null,"topics":["charts","fl-chart","flutter","flutter-charts"],"latest_commit_sha":null,"homepage":"","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tpdlshdmlrkfmcla.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2023-01-22T04:11:59.000Z","updated_at":"2024-09-04T00:23:23.000Z","dependencies_parsed_at":"2023-02-12T14:46:23.579Z","dependency_job_id":null,"html_url":"https://github.com/tpdlshdmlrkfmcla/Flutter_chart","commit_stats":null,"previous_names":["wonttan/flutter_chart","wonchihyeon/flutter_chart","chihyunwon/flutter_chart","mr-won/flutter_chart","chihyeonwon/flutter_chart","user20252228/flutter_chart","tpdlshdmlrkfmcla/flutter_chart"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tpdlshdmlrkfmcla/Flutter_chart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tpdlshdmlrkfmcla%2FFlutter_chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tpdlshdmlrkfmcla%2FFlutter_chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tpdlshdmlrkfmcla%2FFlutter_chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tpdlshdmlrkfmcla%2FFlutter_chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tpdlshdmlrkfmcla","download_url":"https://codeload.github.com/tpdlshdmlrkfmcla/Flutter_chart/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tpdlshdmlrkfmcla%2FFlutter_chart/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32243455,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T13:21:15.438Z","status":"ssl_error","status_checked_at":"2026-04-24T13:21:15.005Z","response_time":64,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["charts","fl-chart","flutter","flutter-charts"],"created_at":"2025-06-18T14:41:19.440Z","updated_at":"2026-04-24T22:35:21.140Z","avatar_url":"https://github.com/tpdlshdmlrkfmcla.png","language":"C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"# fl_chart\n\n```\n다양한 통계 데이터를 시각적인 형태로 바꾸는 것을 데이터 시각화라고 한다.\n그 중에 선 그래프, 막대 그래프, 파이형 그래프 등을 지원하는 라이브러리인\nfl_chart를 사용해 보았다.\n```\n## 첫 번째 화면의 싱글 직선 그래프\n![image](https://user-images.githubusercontent.com/58906858/213902883-171d1716-940b-4677-ba53-0f563958ea22.png)\n\n\n## 두 번째 화면의 멀티플 곡선 그래프\n![image](https://user-images.githubusercontent.com/58906858/213902854-7fb331ac-bcc7-4f9d-a2e2-704bd652d250.png)\n\n## Basic Single Line Chart\n```\n기본 선 그래프 차트를 하나 만들어 보았습니다.\nLineChart 위젯 안에 차트 데이터 속성을 줄 수 있습니다.\nborderData는 데이터의 외곽선을 설정하고 lineBarsData는 각 데이터의 x, y 좌표를\nFlSpot(x, y)의 형태로 spots 프로퍼티로 직접 지정해 줄 수 있습니다.\n\n외곽선은 주지 않고 가로 x 데이터를 1만큼 증가시키면서 y 데이터를 임의로 부여하여\n기본 선 그래프 차트를 구현하였습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/213900879-11983cc1-cd19-4832-b295-f6ef3ca0152a.png)\n\n## 두 번째 화면으로 화면 전환하는 버튼 추가\n```\n두 번째 화면에는 여러 개의 곡선 그래프를 보여주는 화면을 추가합니다.\n화면을 routes 기능을 사용해서 버튼을 누르면 두 번째 화면으로 넘어가도록 버튼을 추가했습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/213901698-7e96a203-a3ab-48d8-aca1-d8040813c764.png)\n\n## 두 번째 화면에 3개의 곡선 그래프 추가\n```\nList.generate로 8개의 랜덤한 y좌표를 가지는 좌표 생성하고 곡선 그래프마다 각각 다른 색상과\n좌표값을 가지도록 하였습니다.\nLineChartBarData 프로퍼티의 값으로 spots(좌표), color(색상), isCurved(곡,직선 판단) 등을 할 수 있습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/213902060-d2c4175a-4590-4af5-b128-db808f73a8b8.png)\n\n## 두 번째 화면 방향 고정\n```\n가로축이 너무 넓어서 화면 방향을 세로로 고정할 필요가 있었습니다.\n따라서 services 라이브러리를 설치한 후에 세로로 고정하는 코드를 추가하였습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/213902852-61cc2238-b8c2-48d1-a2ed-4e667b156b2d.png)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftpdlshdmlrkfmcla%2Fflutter_chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftpdlshdmlrkfmcla%2Fflutter_chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftpdlshdmlrkfmcla%2Fflutter_chart/lists"}