flutter繪制柱狀圖和折線圖-有解無憂

老規矩，看效果圖
在這里插入圖片描述

下載依賴，導包

charts_flutter: ^0.9.0
import ‘package:charts_flutter/flutter.dart’ as charts;

上代碼

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: zhuzhuangtupage(),
    );
  }
}
//柱狀圖
class zhuzhuangtupage extends StatefulWidget {
  @override
  _zhuzhuangtupageState createState() => _zhuzhuangtupageState();
}
class _zhuzhuangtupageState extends State<zhuzhuangtupage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('各類圖表'),
      ),
      body: Container(
        child: ListView(
          children: <Widget>[
            Container(
              //柱狀圖
              height: 300,
              child: getBar(),
            ),
            Container(
              //折線圖
              height: 300,
              child: getLine(),
            )
          ],
        ),
      ),
    );
  }

//折線圖
  Widget getLine() {
    List<Linesales> dataLine = [
      new Linesales(new DateTime(2021, 7, 2), 33),
      new Linesales(new DateTime(2021, 7, 3), 55),
      new Linesales(new DateTime(2021, 7, 4), 22),
      new Linesales(new DateTime(2021, 7, 5), 88),
      new Linesales(new DateTime(2021, 7, 6), 123),
      new Linesales(new DateTime(2021, 7, 7), 75),
    ];

    var seriesLine = [
      charts.Series<Linesales, DateTime>(
        data: dataLine,
        domainFn: (Linesales lines, _) => lines.time,
        measureFn: (Linesales lines, _) => lines.sale,
        id: "Lines",
      )
    ];
    //是TimeSeriesChart，而不是LineChart,因為x軸是DataTime類
    Widget line = charts.TimeSeriesChart(seriesLine);
    //line = charts.LineChart(series);
    return line;
  }

//柱狀圖
  Widget getBar() {
    List<Barsales> dataBar = [
      new Barsales("10月", 20),
      new Barsales("11月", 50),
      new Barsales("12月", 20),
      new Barsales("1月", 80),
      new Barsales("2月", 120),
    ];

    var seriesBar = [
      charts.Series(
        data: dataBar,
        domainFn: (Barsales sales, _) => sales.day,
        measureFn: (Barsales sales, _) => sales.sale,
        id: "Sales",
      )
    ];
    return charts.BarChart(seriesBar);
  }
}
//柱狀圖
class Barsales {
  String day;
  int sale;

  Barsales(this.day, this.sale);
}

//折線圖
class Linesales {
  DateTime time;
  int sale;

  Linesales(this.time, this.sale);
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/263881.html

標籤：區塊鏈

上一篇：Windows下安裝etcd集群及zRPC的簡單使用

下一篇：好用的數字貨幣交易所SDK，目前包含幣安，火幣，歐易