Question

在chart_flutter TimeSeriesChart中更新数据系列时，指示点消失。 This link提出了一种可能的解决方法，但到目前为止，由于没有完整的示例说明，因此我无法实现它。有没有人能举例说明这一点？具体来说，我试图在图形线上保持指示器点，同时还要更新Text小部件。

TimeSeriesChart的代码：

new charts.TimeSeriesChart(
  getSeries(reading),
  dateTimeFactory: new charts.UTCDateTimeFactory(),
  animate: false,
  selectionModels: [
    new charts.SelectionModelConfig(
      changedListener: _onSelectionChanged,
    )
  ],
  behaviors: [
    new charts.LinePointHighlighter(
      defaultRadiusPx: 20.0,
      radiusPaddingPx: 20.0,
      showHorizontalFollowLine:
        charts.LinePointHighlighterFollowLineType.nearest,
      showVerticalFollowLine:
        charts.LinePointHighlighterFollowLineType.nearest
    ),
    new charts.SelectNearest(
      eventTrigger: charts.SelectionTrigger.tapAndDrag
    )
  ],
  primaryMeasureAxis: ...
  domainAxis: ...

然后输入_onSelectionChanged的代码：

_onSelectionChanged(charts.SelectionModel model) {
  final selectedDatum = model.selectedDatum;

  DateTime time;
  final measures = <String, num>{};
  num value;
  if (selectedDatum.isNotEmpty) {
    time = selectedDatum.first.datum.time;
    value = selectedDatum.first.datum.value;

    selectedDatum.forEach((charts.SeriesDatum datumPair) {
      measures[datumPair.series.displayName] = datumPair.datum.value;
      if (!datumPair.series.id.contains("min") && !datumPair.series.id.contains("max"))
        value = datumPair.datum.value;
    });
  }
  setState(() {
    _time = time;
    _measures = measures;
    _value = value; // This is the value that is used within the `Text` widget
  });
}

Answer 1

我是如何工作的：

class InnerStatefulWidget extends StatefulWidget {
    final List<charts.Series<T, DateTime>> seriesList; //where T is the class used to create the series

    InnerStatefulWidget(this.seriesList);

    factory InnerStatefulWidget.withSampleData(D apiData) { // where D is the class for the data from API
        return new InnerStatefulWidget(
          _createSeriesData(apiData) // the function that receives data from the API and converts it into series
        );
    }

    static List<charts.Series<T, DateTime>> _createSeriesData(D apiData) {
        return new charts.Series<T, DateTime>(
            id: CHART_ID,
            domainFn: (T x, _) => x.dateTime,
            measureFn: (T x, _) => x.value,
            data: apiData));
     }

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

class _InnerStatefulWidgetState extends State<InnerStatefulWidget> {
    @override
    Widget build(BuildContext context) {
        return new charts.TimeSeriesChart(
          widget.seriesList,
          ...
          selectionModels: [
            new charts.SelectionModelConfig(
              type: charts.SelectionModelType.info,
              changedListener: _onSelectionChanged,
            )
          ],
        );
    }

    void _onSelectionChanged(charts.SelectionModel model) {
        ...
    }
}

class OuterStatefulWidget extends StatefulWidget {
  D apiData;

  OuterStatefulWidget(this.apiData);

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

class _OuterStatefulWidgetState extends State<OuterStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return InnerStatefulWidget.withSampleData(widget.apiData); 
  }
}

如何防止指标点消失在chart_flutter

1 个答案: