在波动图上显示跟随线和工具提示

问题描述

我是不熟悉Flutter的人，我正在尝试使用Flutter chart包绘制带有下图和工具提示的类似于下图的图表。

desired chart

我搜索并发现了一个有用的GitHub问题。解决方案是创建一个自定义的CircleSymbolRenderer并覆盖绘画功能并绘制工具提示。它可以单独工作，但是当我将其放在实际项目中时，以下行和工具提示不可见。这是我图表的完整代码。

class ShoeDetailPage extends StatefulWidget {
  String imageUrl,shoeName,shoeId,shoeSizeId,topMover;

  ShoeDetailPage({this.imageUrl,this.shoeName,this.shoeId,this.shoeSizeId,this.topMover});

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

class _ShoeDetailPageState extends State<ShoeDetailPage> with AfterLayoutMixin {
  ShoeFullInfo bloc = new ShoeFullInfo();

  String _dateTime;
  String capital;
  DateTime selectedDate;

  Map<String,String> headers = {
    "Content-type": "application/json","Accept": "application/json","Authorization": "Bearer ${UserInfo.GetToken()}"
  };

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.instance = ScreenUtil(width: 1080,height: 1920)..init(context);
    return SafeArea(
      child: Scaffold(
        appBar: displayAppBarWithCentertitle("",blueColor,context),body: Container(
          height: ScreenUtil.instance.height,width: ScreenUtil.instance.width,color: backgroundColor,child: StreamBuilder<bool>(
              stream: bloc.loading,builder: (context,snapshot) {
                if (!snapshot.hasData || snapshot.data) {
                  return displayCircularProgressIndicater(context);
                }
                if(bloc.statusCode!=200){
                  return alertCode(bloc.statusCode);
                }
                if (!bloc.connection) {
                  return displayNoInternet();
                }

                return displayGraphContainer();
              }),),);
  }

List<charts.Series<TimeSeriesSales,DateTime>> _createSampleData() {
    return [
      new charts.Series<TimeSeriesSales,DateTime>(
        id: 'US Sales',domainFn: (TimeSeriesSales sales,_) => sales.time,measureFn: (TimeSeriesSales sales,_) => sales.sales,data: bloc.salesData,radiusPxFn: (a,b) => b == bloc.lastIndex ? 8 : 0,fillColorFn: (a,b) {
          return b == bloc.lastIndex
              ? charts.ColorUtil.fromDartColor(Colors.pinkAccent)
              : charts.ColorUtil.fromDartColor(Colors.blue);
        },patternColorFn: (a,b) => charts.ColorUtil.fromDartColor(Colors.red),colorFn: (a,b) {
          return b == bloc.lastIndex
              ? charts.ColorUtil.fromDartColor(Colors.pinkAccent.withOpacity(0.7))
              : charts.ColorUtil.fromDartColor(Colors.blue);
        },];
  }

  Widget displayGraphContainer() {
    String amount;
    return StreamBuilder<bool>(
        stream: bloc.onChangeData,snapshot) {
          if (snapshot.hasData && snapshot.data) {
            return new Container(
              width: MediaQuery.of(context).size.width,height: 250,);
          }

          return Container(
            width: MediaQuery.of(context).size.width,child: charts.TimeSeriesChart(
              _createSampleData(),animate: false,defaultRenderer: new charts.LineRendererConfig(
                includePoints: true,includeLine: true,roundEndCaps: true,stacked: true
              ),primaryMeasureAxis: new charts.NumericAxisspec(
                renderSpec: new charts.NoneRenderSpec(),domainAxis: new charts.DateTimeAxisspec(
                tickProviderSpec: charts.DayTickProviderSpec(increments: [40]),tickFormatterSpec: new charts.AutoDateTimeTickFormatterSpec(
                  day: new charts.TimeFormatterSpec(
                    format: 'dd',transitionFormat: 'MMM-dd',noonFormat: 'EEE'
                  )
                )
              ),selectionModels: [
                new charts.SelectionModelConfig(
                  type: charts.SelectionModelType.info,changedListener: (charts.SelectionModel data) {
                    bloc.changeChartPoint(data.selectedDatum[0].index);
                  }
                )
              ],behaviors: [
                new charts.LinePointHighlighter(
                  symbolRenderer: (CustomCircleSymbolRenderer("3")),showHorizontalFollowLine: charts.LinePointHighlighterFollowLineType.none,showVerticalFollowLine: charts.LinePointHighlighterFollowLineType.nearest,drawFollowLinesAcrossChart: true
                ),new charts.SelectNearest(
                  eventTrigger: charts.SelectionTrigger.tapAndDrag
                )
              ],);
        });
  }

这是自定义的CircleSymbolRendererClass

    class CustomCircleSymbolRenderer extends charts.CircleSymbolRenderer {
  String amount;

  CustomCircleSymbolRenderer(this.amount);
  @override
  void paint(charts.ChartCanvas canvas,Rectangle<num> bounds,{List<int> dashPattern,chart_color.Color fillColor,charts.FillPatternType fillPattern,chart_color.Color strokeColor,double strokeWidthPx,String text}) {
    super.paint(canvas,bounds,dashPattern: dashPattern,fillColor: fillColor,strokeColor: strokeColor,strokeWidthPx: strokeWidthPx);
    canvas.drawRect(
        Rectangle(bounds.left - 5,bounds.top - 30,bounds.width + 10,bounds.height + 10),fill: chart_color.Color.white
    );


    var textStyle = style.TextStyle();
    textStyle.color = chart_color.Color.black;
    textStyle.fontSize = 25;
    canvas.drawText(
        te.TextElement("1",style: textStyle),(bounds.left).round(),(bounds.top - 28).round()
    );
  }
}

有人知道可能出了什么问题吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）