美文网首页
flutter 数据可视化——饼图

flutter 数据可视化——饼图

作者: 渣渣曦 | 来源:发表于2018-12-28 10:58 被阅读0次

    1、pubspec文件管理Flutter应用程序的assets(资源,如图片、package等)。 在pubspec.yaml中,通过网址“https://pub.dartlang.org/packages/charts_flutter”确认版本号后,将charts_flutter(0.5.0或更高版本)添加到依赖项列表。

    2、在Android Studio的编辑器视图中查看pubspec时,单击右上角的 Packages get,或者在命令行输入“flutter packages get”;这会将依赖包安装到您的项目。

    3、运行以下代码

    import 'package:flutter/material.dart';
    import 'package:charts_flutter/flutter.dart' as charts;
    
    void main() => runApp(new MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          title: 'Flutter Demo',
          theme: new ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: new MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => new _MyHomePageState();
    }
    
    class ClicksPerYear {
      final String year;
      final int clicks;
      final charts.Color color;
    
      ClicksPerYear(this.year, this.clicks, Color color)
          : this.color = new charts.Color(
          r: color.red, g: color.green, b: color.blue, a: color.alpha);
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      int _counter = 0;
    
      void _incrementCounter() {
        setState(() {
          _counter++;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        var data = [
          new ClicksPerYear('2016', 12, Colors.red),
          new ClicksPerYear('2017', 42, Colors.yellow),
          new ClicksPerYear('2018', _counter, Colors.green),
        ];
    
        var series = [
          new charts.Series(
            domainFn: (ClicksPerYear clickData, _) => clickData.year,
            measureFn: (ClicksPerYear clickData, _) => clickData.clicks,
            colorFn: (ClicksPerYear clickData, _) => clickData.color,
            id: 'Clicks',
            data: data,
          ),
        ];
        var chart = new charts.BarChart(
          series,
          animate: true,
        );
        var chartWidget = new Padding(
          padding: new EdgeInsets.all(32.0),
          child: new SizedBox(
            height: 200.0,
            child: chart,
          ),
        );
    
        return new Scaffold(
          appBar: new AppBar(
            title: new Text(widget.title),
          ),
          body: new Center(
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Text(
                  'You have pushed the button this many times:',
                ),
                new Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.display1,
                ),
                chartWidget,
              ],
            ),
          ),
          floatingActionButton: new FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: new Icon(Icons.add),
          ),
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:flutter 数据可视化——饼图

          本文链接:https://www.haomeiwen.com/subject/dmkslqtx.html