flutter - 折线图动画：在线本身显示图例

Question

我在 SfCartesianChart 中有 2 个系列。其中年份在 x 轴上，人口在 Y 轴上。每个系列表示一个国家。我在图表中添加了动画持续时间（20 秒），以便在过去 10 年中提供更多人口变化的视觉效果。

我想在 series 的最后一个数据点上显示国家名称（图例），以便在动画进行时更具可读性。一种：运行蛇（行），头上有名字（最后一个数据点）

Answer 1

您可以使用注释功能来实现您的要求。我们创建了一个用于在最后一点渲染文本的示例，因为文本移出图表区域，我们为 x 轴设置了一个可见范围来克服这个问题。我们附上了下面的代码片段供您参考，我们希望它可以帮助您实现您的场景。

代码片段：

import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: UpdatedScroll(),
    );
  }
}

class UpdatedScroll extends StatefulWidget {
  const UpdatedScroll({Key? key}) : super(key: key);
  @override
  _UpdatedScrollState createState() => _UpdatedScrollState();
}

class _UpdatedScrollState extends State<UpdatedScroll> {
  _UpdatedScrollState() {
    timer = Timer.periodic(const Duration(seconds: 21), _updateDataSource);
  }
  List<ChartData> chartDataLine = [];
  @override
  void initState() {
    chartDataLine = <ChartData>[
      ChartData(DateTime(2001), 10, 40),
      ChartData(DateTime(2002), 50, 40),
      ChartData(DateTime(2003), 20, 10)
    ];
    super.initState();
  }

  Timer? timer;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: SizedBox(
          child: Stack(
            children: [
              SfCartesianChart(
                onActualRangeChanged: (ActualRangeChangedArgs args) {
                  if (args.axisName == 'primaryXAxis') {
                    args.visibleMax = DateTime(chartDataLine.last.x.year + 1);
                  }
                },
                annotations: <CartesianChartAnnotation>[
                  CartesianChartAnnotation(
                    widget: Container(
                        decoration: const BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(5)),
                          color: Colors.black87,
                        ),
                        height: 20,
                        width: 50,
                        child: const Center(
                            child: Text('China',
                                style: TextStyle(color: Colors.white)))),
                    coordinateUnit: CoordinateUnit.point,
                    x: DateTime(chartDataLine.last.x.year),
                    y: chartDataLine.last.y,
                  ),
                  CartesianChartAnnotation(
                      widget: Container(
                          decoration: const BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(5)),
                            color: Colors.black87,
                          ),
                          height: 20,
                          width: 50,
                          child: const Center(
                              child: Text(
                            'Japan',
                            style: TextStyle(color: Colors.white),
                          ))),
                      coordinateUnit: CoordinateUnit.point,
                      x: DateTime(chartDataLine.last.x.year),
                      y: chartDataLine.last.y1)
                ],
                primaryXAxis:
                    DateTimeAxis(intervalType: DateTimeIntervalType.years),
                series: <ChartSeries<ChartData, DateTime>>[
                  LineSeries(
                    animationDuration: 20000,
                    dataSource: chartDataLine,
                    xValueMapper: (ChartData data, _) => data.x,
                    yValueMapper: (ChartData data, _) => data.y,
                  ),
                  LineSeries(
                    animationDuration: 20000,
                    dataSource: chartDataLine,
                    xValueMapper: (ChartData data, _) => data.x,
                    yValueMapper: (ChartData data, _) => data.y1,
                  ),
                ],
              ),
            ],
          ),
        ));
  }

  void _updateDataSource(Timer timer) {
    chartDataLine.add(ChartData(DateTime(chartDataLine.last.x.year + 1),
        getRandomInt(50, 100), getRandomInt(50, 100)));
    if (chartDataLine.length > 10) {
      chartDataLine.removeAt(0);
    }
    setState(() {});
  }

  int getRandomInt(int min, int max) {
    final Random random = Random();
    return min + random.nextInt(max - min);
  }
}

class ChartData {
  ChartData(this.x, this.y, [this.y1]);
  final DateTime x;
  final int y;
  final int? y1;
}

UG：https ://help.syncfusion.com/flutter/cartesian-charts/annotations