Git Product home page Git Product logo

flutter_chart's Introduction

fl_chart

다양한 통계 데이터를 시각적인 형태로 바꾸는 것을 데이터 시각화라고 한다.
그 중에 선 그래프, 막대 그래프, 파이형 그래프 등을 지원하는 라이브러리인
fl_chart를 사용해 보았다.

첫 번째 화면의 싱글 직선 그래프

image

두 번째 화면의 멀티플 곡선 그래프

image

Basic Single Line Chart

기본 선 그래프 차트를 하나 만들어 보았습니다.
LineChart 위젯 안에 차트 데이터 속성을 줄 수 있습니다.
borderData는 데이터의 외곽선을 설정하고 lineBarsData는 각 데이터의 x, y 좌표를
FlSpot(x, y)의 형태로 spots 프로퍼티로 직접 지정해 줄 수 있습니다.

외곽선은 주지 않고 가로 x 데이터를 1만큼 증가시키면서 y 데이터를 임의로 부여하여
기본 선 그래프 차트를 구현하였습니다.

image

두 번째 화면으로 화면 전환하는 버튼 추가

두 번째 화면에는 여러 개의 곡선 그래프를 보여주는 화면을 추가합니다.
화면을 routes 기능을 사용해서 버튼을 누르면 두 번째 화면으로 넘어가도록 버튼을 추가했습니다.

image

두 번째 화면에 3개의 곡선 그래프 추가

List.generate로 8개의 랜덤한 y좌표를 가지는 좌표 생성하고 곡선 그래프마다 각각 다른 색상과
좌표값을 가지도록 하였습니다.
LineChartBarData 프로퍼티의 값으로 spots(좌표), color(색상), isCurved(곡,직선 판단) 등을 할 수 있습니다.

image

두 번째 화면 방향 고정

가로축이 너무 넓어서 화면 방향을 세로로 고정할 필요가 있었습니다.
따라서 services 라이브러리를 설치한 후에 세로로 고정하는 코드를 추가하였습니다.

image

flutter_chart's People

Contributors

chihyeonwon avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.