首页 > 解决方案 > 如何实现chart_flutter时间序列中的数据?

问题描述

我正在尝试在 chart_flutter 时间序列中实现 api 数据。但是我在实施时遇到了问题。这是我的代码如下所示:

class TankChart extends StatefulWidget {
  TankChart({Key key}) : super(key: key);
  @override
  _TankChartState createState() => _TankChartState();
}

class _TankChartState extends State<TankChart> {
  var ping;
List<charts.Series<TankPingProvider, dynamic>> series = [
        charts.Series(
          id: 'Tank Ping',
          data: ping,
          domainFn: (TankPingProvider pings, _) => pings.tankPing[number.toString()][index].trackedAt,
          measureFn: (TankPingProvider pings, _) => pings.tankPing[number.toString()][index].volume
        )
      ];

      return charts.TimeSeriesChart(
        series,
        animate: true,
      );
     
    });
  }
}

如您所见,我在这行代码中有错误:

data: ping,

和这里:

series,

错误是:

The argument type 'TankPingProvider' can't be assigned to the parameter type 'List<TankPingProvider>'.

无论如何要实现数据吗?

这是我的 api 的外观:

{
    "1": [
        {
            "tracked_at": "2020-11-29T17:33:42.000000Z",
            "fuel": 71.05,
            "level": 2.4867087,
            "volume": 41671.1
        },
        {
            "tracked_at": "2020-11-30T01:41:41.000000Z",
            "fuel": 70.04,
            "level": 2.451534,
            "volume": 41031.36
        },
        {
            "tracked_at": "2020-11-30T01:44:05.000000Z",
            "fuel": 68.47,
            "level": 2.396358,
            "volume": 40015.56
        },
        {
            "tracked_at": "2020-11-30T01:46:47.000000Z",
            "fuel": 66.89,
            "level": 2.341182,
            "volume": 38985.96
        },
]
}

我使用模型而不是系列。这是我的模型的样子:

import 'dart:convert';

Map<String, List<TankPing>> tankPingFromJson(dynamic str) => Map.from(json.decode(str)).map((k, v) => MapEntry<String, List<TankPing>>(k, List<TankPing>.from(v.map((x) => TankPing.fromJson(x)))));

String tankPingToJson(Map<String, List<TankPing>> data) => json.encode(Map.from(data).map((k, v) => MapEntry<String, dynamic>(k, List<dynamic>.from(v.map((x) => x.toJson())))));

class TankPing {
    TankPing({
        this.trackedAt,
        this.fuel,
        this.level,
        this.volume,
    });

    DateTime trackedAt;
    double fuel;
    double level;
    double volume;

    factory TankPing.fromJson(Map<String, dynamic> json) => TankPing(
        trackedAt: DateTime.parse(json["tracked_at"]),
        fuel: json["fuel"].toDouble(),
        level: json["level"].toDouble(),
        volume: json["volume"].toDouble(),
    );

    Map<String, dynamic> toJson() => {
        "tracked_at": trackedAt.toString(),
        "fuel": fuel,
        "level": level,
        "volume": volume,
    };
}

任何帮助将不胜感激。

标签: flutterchartsflutter-dependencies

解决方案


问题的根源是当您在代码中放置地图时,图表的数据源需要一个列表。

要修复它,请将 api 结果中的所有项目转换为 List< TankPingProvider> ,它应该可以工作。


推荐阅读