在颤振TimeSeriesChart上显示数据值

Question

我想显示图表中选定点的值。

多亏了这个答案here，我已经完成了90%的工作。

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Graph')),
        body: BlocBuilder<DataBloc, DataState>(
          builder: (context, state) {
            return Padding(
              padding: const EdgeInsets.all(10),
              child: AspectRatio(
                aspectRatio: 1,
                child: Container(
                  padding: const EdgeInsets.all(10),
                  child: charts.TimeSeriesChart(
                    state.series!,
                    animate: false,
                    defaultRenderer:
                        new charts.LineRendererConfig(includePoints: true),
                    behaviors: [
                      charts.LinePointHighlighter(
                        ////////////////////// notice ////////////////////////////
                        symbolRenderer: TextSymbolRenderer(() => 'test'),
                        ////////////////////// notice ////////////////////////////
                      ),
                    ],
                    dateTimeFactory: const charts.LocalDateTimeFactory(),
                    domainAxis: charts.DateTimeAxisSpec(
                      tickFormatterSpec: charts.AutoDateTimeTickFormatterSpec(
                        day: charts.TimeFormatterSpec(
                          format: 'dd',
                          transitionFormat: 'dd MMM',
                      ),
                    ),
                  ),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

因此，现在我可以在单击图表时显示文本，但我想不出如何检索所选点的值

我应该通过什么来改变() => 'test'以显示实际值？

以下是该系列的模型：

class DataSeries {
  final DateTime date;
  final double value;

  DataSeries(
      {required this.date, required this.value,});
}

希望我的问题足够清楚，谢谢！

Answer 1

所以我终于展示了我想要的。

我已经更改了我的TextSymbolRenderer类:转换成字符串(值和日期)是静态的，而不是函数。

关键是将selectionModels: []添加到TimeSerieChart中，并在其中设置值和日期。

下面是我的代码，如果它对未来的任何人有帮助的话：

class DataEvolution extends StatelessWidget {
      const DataEvolution({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('Graph')),
          body: BlocBuilder<DataBloc, DataState>(
            builder: (context, state) {
              return Padding(
                padding: const EdgeInsets.all(10),
                child: AspectRatio(
                  aspectRatio: 1,
                  child: Container(
                    padding: const EdgeInsets.all(10),
                    child: charts.TimeSeriesChart(
                      state.series!,
                      animate: false,
                      defaultRenderer:
                          new charts.LineRendererConfig(includePoints: true),//////////////////// NOTICE CHANGE ////////////////////
                      selectionModels: [
                        SelectionModelConfig(
                            changedListener: (SelectionModel model) {
                          if (model.hasDatumSelection) {
                            final value = model.selectedSeries[0]
                                .measureFn(model.selectedDatum[0].index);
                            final DateTime datetime = model.selectedSeries[0]
                                .domainFn(model.selectedDatum[0].index);
                            var day = datetime.day.toInt() < 10
                                ? "0${datetime.day}"
                                : "${datetime.day}";
                            var month = datetime.month.toInt() < 10
                                ? "0${datetime.month}"
                                : "${datetime.month}";
                            TextSymbolRenderer.value = value.toString();
                            TextSymbolRenderer.date =
                                "$day/$month/${datetime.year}";
                          }
                        })
                      ]///////////////////// NOTICE CHANGE //////////////////,
                      behaviors: [
                        charts.LinePointHighlighter(
                          ////////////////////// NOTICE CHANGE ////////////////////////////
                          symbolRenderer: TextSymbolRenderer(),
                          ////////////////////// NOTICE CHANGE ////////////////////////////
                        ),
                      ],
                      dateTimeFactory: const charts.LocalDateTimeFactory(),
                      domainAxis: charts.DateTimeAxisSpec(
                        tickFormatterSpec: charts.AutoDateTimeTickFormatterSpec(
                          day: charts.TimeFormatterSpec(
                            format: 'dd',
                            transitionFormat: 'dd MMM',
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              );
            },
          ),
        );
      }
    }

Answer 2

用GestureDeteector Widget包装容器，它具有onTap函数。

在onTap(){}函数中编写您的功能

通过使用该方法，可以检索所选点的值。