charts_flutter: show y-axis value for corresponding x-axis value flutter

Question

我想在我的 flutter 应用程序中显示时间序列图表。问题是当我点击 x 轴上的日期时，相应的 y 值没有显示在 y 轴上。我在文档中进行了深入搜索，但没有提供这样的示例。我需要做哪些不同的事情？

class MyLineChart extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;

  MyLineChart(this.seriesList, {this.animate});

  @override
  Widget build(BuildContext context) {
    return new charts.TimeSeriesChart(
      seriesList,
      animate: animate,
      dateTimeFactory: const charts.LocalDateTimeFactory(),
    );
  }
}

Answer 1

试试这个，使用 LinePointHighlighter:

class MyLineChart extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;

  MyLineChart(this.seriesList, {this.animate});

  @override
  Widget build(BuildContext context) {
    return new charts.TimeSeriesChart(
      seriesList,
      animate: animate,
      dateTimeFactory: const charts.LocalDateTimeFactory(),
      behaviors: [
        LinePointHighlighter(
          drawFollowLinesAcrossChart: true,
          showHorizontalFollowLine: LinePointHighlighterFollowLineType.all,
        ),
      ],
    );
  }
}

编辑：对不起，我看错了你的问题。

要在 y 轴上显示值，我认为您必须创建自己的 LinePointHighlighter 或 SymbolRenderer 来传递您的 LinePointHighlighter。两者都需要您在图表的 canvas 上作画。

使用SelectionModelConfig获取您要显示的选定值。参见：https://google.github.io/charts/flutter/example/behaviors/selection_callback_example

我自己没有做过，但我希望这对你有所帮助。

charts_flutter: show y-axis value for corresponding x-axis value flutter

charts_flutter: Show y-axis value for corresponding x-axis value flutter

google-visualization

dart

flutter