Flutter 使用charts_flutter實現折線圖

時間 2019-12-20

標籤 flutter 使用 charts 實現折線简体版

原文原文鏈接

說點兒閒話

最近在學習使用flutter開發app，因爲是公司項目中使用到的技術，邊學習，邊投入到實際開發中，把本身使用到和學到的組件記錄下來，總結一下，以便回顧。html

要實現折線圖效果，查閱資料，發現了charts_flutter，最新的版本號在這裏查看： pub.dev: charts_flutter ，可是，正以下面這位網友說的：git

Goole/charts 這個圖表庫很強大，可是文檔不太友好，只有 online gallery 上有純示例代碼，幾乎沒有 Api 說明。

沒有什麼文檔，只能本身看示例作，還好有這個： flutter使用charts庫定義圖表簡單使用，差很少能當文檔用。
接下來廢話很少說，上代碼。github

代碼實現

實現一個圖表中顯示兩條折線帶圖例折線圖樣式：app

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

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

// 此處例子是從項目中抽象出來的簡寫例子
// 固然了實際項目中使用的數據是dio請求接口的數據
class Chart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: '折線圖',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new ChartPage(),
    );
  }
}

class ChartPage extends StatefulWidget {
  @override
  _ChartPageState createState() => new _ChartPageState();
}

class SeriesDatas {
  final int time;
  final int data;

  SeriesDatas(this.time, this.data);
}

class _ChartPageState extends State<ChartPage> {
  // 折線圖
  Widget _chartWidget() {
    final serial1data = [
      new SeriesDatas(1, 5),
      new SeriesDatas(2, 25),
      new SeriesDatas(3, 100),
      new SeriesDatas(4, 75),
    ];

    final serial2data = [
      new SeriesDatas(1, 15),
      new SeriesDatas(2, 125),
      new SeriesDatas(3, 30),
      new SeriesDatas(4, 175),
    ];
    List<charts.Series<SeriesDatas, int>> seriesList = [
      new charts.Series<SeriesDatas, int>(
        id: 'line1',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (SeriesDatas sales, _) => sales.time,
        measureFn: (SeriesDatas sales, _) => sales.data,
        data: serial1data,
      ),
      new charts.Series<SeriesDatas, int>(
        id: 'line2',
        colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
        domainFn: (SeriesDatas sales, _) => sales.time,
        measureFn: (SeriesDatas sales, _) => sales.data,
        data: serial2data,
      )
    ];

    var chart = new charts.LineChart(
      seriesList,
      animate: true,
      behaviors: [
        new charts.SeriesLegend(
          // 圖例位置 在左側start 和右側end
          position: charts.BehaviorPosition.end,
          // 圖例條目  [horizontalFirst]設置爲false，圖例條目將首先做爲新行而不是新列增加
          horizontalFirst: false,
          // 每一個圖例條目周圍的填充Padding
          cellPadding: new EdgeInsets.only(right: 4.0, bottom: 4.0),
          // 顯示度量
          showMeasures: true,
          // 度量格式
          measureFormatter: (num value) {
            return value == null ? '-' : '${value}k';
          },
        ),
      ],
    );

    return new Card(
      child: Container(
        padding: new EdgeInsets.fromLTRB(16, 10, 16, 20),
        margin: new EdgeInsets.only(bottom: 20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            new Center(
              child: new Text(
                'xxxx (折線圖)',
                style: TextStyle(
                  color: Color.fromRGBO(0, 0, 0, 1.0), //opacity：不透明度
                  fontFamily: 'PingFangBold',
                  fontSize: 15.0,
                ),
              ),
            ),
            new Padding(
              padding: new EdgeInsets.all(32.0),
              child: new SizedBox(
                height: 200.0,
                child: chart,
              ),
            )
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: _chartWidget(),
      ),
    );
  }
}