在颤振的时间序列图表上显示数据的值

Question

我要显示图表中所选点的值。

多亏了这个答案，我已经完成了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

用GestureDeteector小部件包装你的容器，它有onTap功能…

将你的功能写入onTap(){}函数

通过使用，您可以检索选定点

的值。

Answer 2

所以我终于成功地显示了我想要的。

我已经改变了我的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',
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              );
            },
          ),
        );
      }
    }