Flutter-charts_flutter圖表

pub.dev搜索charts_flutter

導入依賴

charts_flutter: ^0.8.1

項目導入

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

例子

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

class IndexGrowUpScreen extends StatefulWidget {
  @override
  _IndexGrowUpScreenState createState() => _IndexGrowUpScreenState();
}

class _IndexGrowUpScreenState extends State<IndexGrowUpScreen> {

  String _year;
  double _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 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 double sales;

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

class ChartFlutterBean {

  static List<charts.Series<OrdinalSales, String>> createSampleData() {
    final data = [
      OrdinalSales('日', 114),
      OrdinalSales('一', 115),
      OrdinalSales('二', 116),
      OrdinalSales('三', 117),
      OrdinalSales('四', 118),
      OrdinalSales('五', 119),
      OrdinalSales('六', 120),
      OrdinalSales('日', 121),
    ];

    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,
      )
    ];
  }
}

一個詳細自定的：https://juejin.im/post/5c67a6a0f265da2dae510fa2