flutter之charts_flutter圖表插件超簡單實踐

先上圖

引入插件

在pubspec.yaml中引入charts_flutter插件

使用的時候版本到0.6.0，插件地址：https://github.com/google/charts

使用插件

import 'package:flutter/material.dart';
引入插件
import 'package:charts_flutter/flutter.dart' as charts;
class Test extends StatefulWidget{
    _TestState createState() => _TestState();
}

class _TestState extends State<Test> {

    String _year;
    int _sales;
     //點擊柱狀圖觸發的函數
     _onSelectionChanged(charts.SelectionModel model) {
        final selectedDatum = model.selectedDatum;
        print(selectedDatum.first.datum.year);
        print(selectedDatum.first.datum.sales);
        print(selectedDatum.first.series.displayName);
        setState(() {
            //改變兩個顯示的數值
            _year = selectedDatum.first.datum.year;
            _sales = selectedDatum.first.datum.sales;
        });
    }

    

  @override
  Widget build(BuildContext context) {

    return new Scaffold(
        appBar: AppBar(
            title: Text("圖表"),
            centerTitle: true,
        ),
        body:Container(
            child: Column(
                children: <Widget>[
                    Row(
                        children: <Widget>[
                            Expanded(
                                child: Container(
                                    alignment: Alignment.center,
                                    child: Text("年份：${_year}"),
                                ),
                            ),
                            Expanded(
                                child: Container(
                                    alignment: Alignment.center,
                                    child: Text("數值：${_sales}"),
                                ),
                            )
                        ],
                    ),
                    Container(
                        width: double.infinity,
                        height: 200.0,
                        child: charts.BarChart(
                            //經過下面獲取數據傳入
                            ChartFlutterBean.createSampleData(),
                            //配置項，以及設置觸發的函數
                            selectionModels: [
                                charts.SelectionModelConfig(
                                    type: charts.SelectionModelType.info,
                                    changedListener: _onSelectionChanged,
                                )
                            ],
                        ),
                    ),
                ],
            ),
        )     
    );
  }


}
//一下爲組合柱狀圖數據部分
class OrdinalSales {
  final String year;
  final int sales;

  OrdinalSales(this.year, this.sales);
}


class ChartFlutterBean {

  static List<charts.Series<OrdinalSales, String>> createSampleData() {
    final data = [
      new OrdinalSales('2014', 5),
      new OrdinalSales('2015', 25),
      new OrdinalSales('2016', 100),
      new OrdinalSales('2017', 75),
    ];

    return [
      new charts.Series<OrdinalSales, String>(
        id: 'Sales',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        data: data,
      )
    ];
  }
}