[Flutter] 원형 그래프(PieChart) 만들기

JO_CHOI·2021년 3월 22일
0

Flutter

목록 보기
3/5

1. 환경설정

pubspec.yaml파일에 해당 코드를 추가한다.
charts_flutter: ^버전

dependencies:
  charts_flutter: ^0.9.0

2. 설치

커맨드 창에서

$ flutter pub get

명령어를 입력한다.

3. 불러오기

import 'package:charts_flutter/flutter.dart' as charts;

4. 사용하기

1) _seriesPieData 등록하기

class _AutoAssetChartState extends State<AutoAssetChart> {
  List<charts.Series<AssetPortfolio, String>> _seriesPieData;

2) 사용할 리스트 등록하기

class _AutoAssetChartState extends State<AutoAssetChart> {
  List<charts.Series<AssetPortfolio, String>> _seriesPieData;
  List<AssetPortfolio> mydata;

3) generateData 등록하기

  _generateData(mydata) {
    _seriesPieData = List<charts.Series<AssetPortfolio, String>>();
    _seriesPieData = [];
    _seriesPieData.add(
      charts.Series(
        id: 'assetportfolios',
        domainFn: (AssetPortfolio portfolio, _) => portfolio.kind, // 도메인 이름
        measureFn: (AssetPortfolio portfolio, _) => portfolio.money, //실제 그려지는 데이터의 크기
        data: mydata, 
        // Set a label accessor to control the text of the arc label.
        labelAccessorFn: (AssetPortfolio row, _) => //그래프에 라벨 표시
            '${row.percent.toStringAsFixed(1)}%',
      ),
    );
  }

4) generateData 사용하기

@override
Widget build(BuildContext context) {
  _generateData(data); //원하는 데이터 입력
}

5) PieChart 리턴하기

 @override
Widget build(BuildContext context) {
  _generateData(data);
  return new charts.PieChart(_seriesPieData,
      animate: false,
      animationDuration: Duration.zero,
      behaviors: [
        new charts.DatumLegend( //데이터 범례 등록
            outsideJustification: charts.OutsideJustification.middleDrawArea,
            horizontalFirst: false,
            desiredMaxRows: 4,
            cellPadding: new EdgeInsets.only(right: 4.0, bottom: 4.0),
            entryTextStyle: charts.TextStyleSpec(
                color: charts.MaterialPalette.purple.shadeDefault,
                fontFamily: 'Georgia',
                fontSize: 11))
      ],
      defaultRenderer: new charts.ArcRendererConfig(
        arcWidth: 100,
        arcRendererDecorators: [
          new charts.ArcLabelDecorator(
            labelPosition: charts.ArcLabelPosition.inside, //라벨 위치 지정
          )
        ],
      ));
}
profile
꾸준함이 최선이다.

0개의 댓글