如何用颤动在FL图表内绘制标签

Question

我正在尝试将Flu Chart与Flutter结合使用。

https://pub.dev/packages/fl_chart

我想在情节上贴上标签。

现在图片在左侧。

有没有好的样品或文件？ 只有我能找到的是API文档。很难实现。

谢谢。

Answer 1

希望我回答这个还不算太晚。但是谁在寻找答案，这就是我最近想出的答案：

在import 'package:flutter/material.dart'; import 'package:flutter_html/flutter_html.dart'; import 'package:flutter_html/style.dart'; import 'package:flutter_icons/flutter_icons.dart'; import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:Cruise/src/component/part_snippet.dart'; import 'package:Cruise/src/common/helpers.dart'; import 'package:Cruise/src/models/Item.dart'; import 'package:Cruise/src/page/profile.dart'; import 'package:Cruise/src/common/Repo.dart'; import 'package:url_launcher/url_launcher.dart'; final partsProvider = FutureProvider.family((ref, int id) async { return await Repo.fetchItem(id); }); class StoryInformation extends HookWidget { const StoryInformation({ Key key, @required this.item, this.backFunction, }) : super(key: key); final Item item; final Function backFunction; void launchUrl(url) async { if (await canLaunch(url)) { await launch(url); } else { throw 'Could not launch $url'; } } @override Widget build(BuildContext context) { final parts = item.parts.map((i) => useProvider(partsProvider(i))).toList(); Offset _initialSwipeOffset; Offset _finalSwipeOffset; void _onHorizontalDragStart(DragStartDetails details) { _initialSwipeOffset = details.globalPosition; } void _onHorizontalDragUpdate(DragUpdateDetails details) { _finalSwipeOffset = details.globalPosition; } void _onHorizontalDragEnd(DragEndDetails details) { if (_initialSwipeOffset != null) { final offsetDifference = _initialSwipeOffset.dx - _finalSwipeOffset.dx; final direction = offsetDifference > 0 ? print('left') : print('right'); if (offsetDifference > 0) { // detect the right gesture, then back to main list page } } } return Container( color: Theme.of(context).scaffoldBackgroundColor, child: GestureDetector( onHorizontalDragStart: _onHorizontalDragStart, onHorizontalDragUpdate: _onHorizontalDragUpdate, onHorizontalDragEnd: (details) => backFunction(), child: Padding(), ), ) } 内，您可以根据需要在 lineTouchData 属性中自定义工具提示。下面是我用于自定义图表中工具提示信息的代码段。

在LineChartData内，要使用的LineTouchData可能因要绘制的图表类型而异。在我的情况下，Im正在绘制折线图，​​因此im正在使用的类为touchToolTipData。您可能需要检查哪个类适合您要绘制的图表。

图表示例：

LineTouchTootipData

您可以尝试查看此示例代码，以更全面地了解图表。

https://github.com/imaNNeoFighT/fl_chart/blob/master/example/lib/line_chart/samples/line_chart_sample5.dart