如何实现Line Chart的实时变化 about graphic

[CheneyDu0129]

import 'package:flutter/material.dart';
import 'package:graphic/graphic.dart';
import 'dart:async';

class LineAreaPointPage extends StatefulWidget {
  const LineAreaPointPage({Key? key}) : super(key: key);

  @override
  LineAreaPointPageState createState() => LineAreaPointPageState();
}

class LineAreaPointPageState extends State<LineAreaPointPage> {
  int _counter = 0;
  late Timer _timer;
  List<Map> _invalidDateUser = [];

  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  void initState() {
    _invalidDateUser = [
      {"Date": "790085", "Close": 10},
      {"Date": "790086", "Close": 11},
      {"Date": "790087", "Close": 12},
    ];

    _timer = Timer.periodic(const Duration(seconds: 1), (_) {
      setState(() {
        _counter++;
        // _invalidDateUser = [
        //   {"Date": "790085", "Close": _counter + 10},
        //   {"Date": "790086", "Close": _counter + 11},
        //   {"Date": "790087", "Close": _counter + 12},
        // ];
        _invalidDateUser.add(
            {"Date": DateTime.now().microsecond.toString(), "Close": _counter});
      });
    });

    super.initState();
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    print("Rebuild.");
    return Scaffold(
        key: _scaffoldKey,
        appBar: AppBar(
          title: const Text('Line and Area Mark'),
        ),
        backgroundColor: Colors.white,
        body: SingleChildScrollView(
            child: Center(
                child: Column(children: <Widget>[
          Container(
            //测试用图标
            padding: const EdgeInsets.fromLTRB(20, 40, 20, 5),
            child: const Text(
              'User Test Chart',
              style: TextStyle(fontSize: 20),
            ),
          ),
          Container(
            margin: const EdgeInsets.only(top: 10),
            width: 400,
            height: 350,
            child: Chart(
              // rebuild: false,
              data: _invalidDateUser,
              variables: {
                'Date': Variable(
                  accessor: (Map map) => map['Date'] as String,
                  scale: OrdinalScale(tickCount: 5),
                ),
                'Close': Variable(
                  accessor: (Map map) => (map['Close'] ?? double.nan) as num,
                ),
              },
              marks: [
                LineMark(
                  shape: ShapeEncode(value: BasicLineShape(smooth: false)),
                  size: SizeEncode(value: 0.5),
                ),
              ],
              axes: [
                Defaults.horizontalAxis,
                Defaults.verticalAxis,
              ],
              selections: {
                'touchMove': PointSelection(
                  on: {
                    GestureType.scaleUpdate,
                    GestureType.tapDown,
                    GestureType.longPressMoveUpdate
                  },
                  dim: Dim.x,
                )
              },
              tooltip: TooltipGuide(
                followPointer: [false, true],
                align: Alignment.topLeft,
                offset: const Offset(-20, -20),
              ),
              crosshair:
                  CrosshairGuide(followPointer: [false, true]), //指示选中点的样式
              coord: RectCoord(
                horizontalRange: [0, 0.95],
                verticalRange: [0.05, 0.95],
                horizontalRangeUpdater: Defaults.horizontalRangeEvent,
                verticalRangeUpdater: Defaults.verticalRangeEvent,
              ),
            ),
          ),
        ]))));
  }
}

[entronad]

出于性能的考虑，图表只有在 data 变成新数组时更新，而不会检测数组内部的变化。list.add 不会产生新数组，改成：
_invalidDateUser = [..._invalidDateUser, {"Date": DateTime.now().microsecond.toString(), "Close": _counter}];