Flutter Charts - 年度销售额比较

Question

我正在使用堆叠的时间序列折线图比较当前年份的 30 天历史销售额与用户选择的任何其他年份。

图表在工作时是这样的：

从服务器完成两次获取：

1. 当前年的选定日期始终为 30 天的列表。
2. 第二个列表在选定年份的选定日期有 30 天。

返回的数据，如下两个列表：

static List<charts.Series<TimeSeriesSales, DateTime>> _createSampleData() {

final currentYear = [
   TimeSeriesSales(timeCurrent: DateTime(2020, 01, 15), sales: 600000),
   TimeSeriesSales(timeCurrent: DateTime(2020, 01, 14), sales: 300000),
   TimeSeriesSales(timeCurrent: DateTime(2020, 01, 13), sales: 450000),
   TimeSeriesSales(timeCurrent: DateTime(2020, 01, 12), sales: 500000),
   TimeSeriesSales(timeCurrent: DateTime(2020, 01, 10), sales: 300000),
   TimeSeriesSales(timeCurrent: DateTime(2020, 01, 11), sales: 500000),
   TimeSeriesSales(timeCurrent: DateTime(2020, 01, 12), sales: 700000),
   TimeSeriesSales(timeCurrent: DateTime(2020, 01, 10), sales: 500000),
   TimeSeriesSales(timeCurrent: DateTime(2020, 01, 09), sales: 300000),
   TimeSeriesSales(timeCurrent: DateTime(2020, 01, 08), sales: 300000),
   TimeSeriesSales(timeCurrent: DateTime(2020, 01, 07), sales: 300000),
   TimeSeriesSales(timeCurrent: DateTime(2020, 01, 06), sales: 400000),
   TimeSeriesSales(timeCurrent: DateTime(2020, 01, 05), sales: 500000),
   TimeSeriesSales(timeCurrent: DateTime(2020, 01, 04), sales: 300000),
   TimeSeriesSales(timeCurrent: DateTime(2020, 01, 03), sales: 700000),
   TimeSeriesSales(timeCurrent: DateTime(2020, 01, 02), sales: 300000),
   TimeSeriesSales(timeCurrent: DateTime(2020, 01, 01), sales: 200000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 12, 31), sales: 500000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 12, 30), sales: 600000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 12, 29), sales: 700000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 12, 28), sales: 400000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 12, 27), sales: 600000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 12, 26), sales: 700000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 12, 25), sales: 300000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 12, 24), sales: 600000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 12, 23), sales: 800000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 12, 22), sales: 700000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 12, 21), sales: 800000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 12, 20), sales: 900000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 12, 19), sales: 900000),

];

final selectedYear = [
   TimeSeriesSales(timeCurrent: DateTime(2019, 01, 15), sales: 600000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 01, 14), sales: 300000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 01, 13), sales: 450000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 01, 12), sales: 500000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 01, 10), sales: 300000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 01, 11), sales: 500000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 01, 12), sales: 700000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 01, 10), sales: 500000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 01, 09), sales: 300000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 01, 08), sales: 300000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 01, 07), sales: 300000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 01, 06), sales: 400000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 01, 05), sales: 500000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 01, 04), sales: 300000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 01, 03), sales: 700000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 01, 02), sales: 300000),
   TimeSeriesSales(timeCurrent: DateTime(2019, 01, 01), sales: 200000),
   TimeSeriesSales(timeCurrent: DateTime(2018, 12, 31), sales: 500000),
   TimeSeriesSales(timeCurrent: DateTime(2018, 12, 30), sales: 600000),
   TimeSeriesSales(timeCurrent: DateTime(2018, 12, 29), sales: 700000),
   TimeSeriesSales(timeCurrent: DateTime(2018, 12, 28), sales: 400000),
   TimeSeriesSales(timeCurrent: DateTime(2018, 12, 27), sales: 600000),
   TimeSeriesSales(timeCurrent: DateTime(2018, 12, 26), sales: 700000),
   TimeSeriesSales(timeCurrent: DateTime(2018, 12, 25), sales: 300000),
   TimeSeriesSales(timeCurrent: DateTime(2018, 12, 24), sales: 600000),
   TimeSeriesSales(timeCurrent: DateTime(2018, 12, 23), sales: 800000),
   TimeSeriesSales(timeCurrent: DateTime(2018, 12, 22), sales: 700000),
   TimeSeriesSales(timeCurrent: DateTime(2018, 12, 21), sales: 800000),
   TimeSeriesSales(timeCurrent: DateTime(2018, 12, 20), sales: 900000),
   TimeSeriesSales(timeCurrent: DateTime(2018, 12, 19), sales: 900000),
];



    List<charts.Series<SalesChartObjects, DateTime>> sales = [

  charts.Series(
      id: "Last Year",
      data: salesChartService.chartObjectsPreviousYear,
      domainFn: (SalesChartObjects data, _) => data.dt,
      measureFn: (SalesChartObjects data, _) => data.amount,
      labelAccessorFn: (SalesChartObjects data, _) => data.amount.toString(),
      colorFn: (_, __) => charts.MaterialPalette.gray.shadeDefault),

  charts.Series(
      id: "This Year",
      data: salesChartService.chartObjectsCurrentYear,
      domainFn: (SalesChartObjects data, _) => data.dt,
      measureFn: (SalesChartObjects data, _) => data.amount,
      labelAccessorFn: (SalesChartObjects data, _) => data.amount.toString(),
      colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault),

];

我用这种方式遇到的问题是：

如果两个列表中的年份不同，我接受时间线图表不会将两个图层放在一起。因此，我目前正在将返回的 2019 年替换为当前年份，因此它可以按日期和月份将它们很好地相互映射，以查看它在第一张图像中的方式。

但是当我用当前年份替换年份的列表包含超过两年的数据时，例如 15/12/2019 - 15/01/2020，我也将 2019 替换为 2020，这会弄乱整个偏离路线，将 2019 年 12 月的数据放在当年的 12 月，看起来像这样????

我正在寻找进行这种比较的正确方法，但我感到非常困惑。是否有制作销售/日期比较图表的标准方法？

我可以单独使用折线图，但是如何在域轴“26/08/2020”上显示日期，因为它只接受整数？任何建议将不胜感激。

Answer 1

要让两个图层在 dd/mm/yyyy 上始终对齐，您需要使两个图层的 dd/mm/yyyy 相同。

我的第一层总是会获取当前年份。 第二层任何其他年份。 “任何其他年份”是需要将 yy 切换到当前 yy 的地方。问题是提取跨越两年的数据，例如 2019 年 12 月 15 日至 2020 年 1 月 15 日。因为您不能像 2019 年那样将它们全部设为“2020”。

我设法通过检查 yy 是否都相同来解决此问题，如果不是，则将两者中较小的一个更改为当前年份 - 1，将较大的年份更改为当前年份，如下所示。

我不知道这对任何人是否有意义，但效果很好，我无法想象我是唯一一个寻找年度销售图表的人。这不是图形课程所需的所有代码，但具有问题陈述的解决方案。我使用提供程序使 chartObjectsPrevious 年份可用于图表。下面的代码是我对上一年日期对象所做的。

List<SalesChartObjects> chartObjectsPreviousYear = [];

chartObjectsPreviousYear = SalesChartModel.fromJson(jsonRaw).objects;
var firstDayFromRange = chartObjectsPreviousYear[1].dt.year;
var lastDayFromRange = chartObjectsPreviousYear[30].dt.year;

if (firstDayFromRange != lastDayFromRange) {
  chartObjectsPreviousYear.forEach((element) {
    if (element.dt.year == firstDayFromRange) {
      String pDay = element.dt.day < 10 ? "0${element.dt.day.toString()}" : element.dt.day.toString();
      String pMonth = element.dt.month < 10 ? "0${element.dt.month.toString()}" : element.dt.month.toString();
      int subtractOne = DateTime.now().year - 1;
      String pYear = subtractOne.toString();
      element.dt = DateTime.parse("$pYear-$pMonth-$pDay 00:00:00");
    } else {
      String pDay = element.dt.day < 10 ? "0${element.dt.day.toString()}" : element.dt.day.toString();
      String pMonth = element.dt.month < 10 ? "0${element.dt.month.toString()}" : element.dt.month.toString();
      String pYear = DateTime.now().year.toString();
      element.dt = DateTime.parse("$pYear-$pMonth-$pDay 00:00:00");
    }
  });
} else {
  chartObjectsPreviousYear.forEach((element) {
    String cDay = element.dt.day < 10 ? "0${element.dt.day.toString()}" : element.dt.day.toString();
    String cMonth = element.dt.month < 10 ? "0${element.dt.month.toString()}" : element.dt.month.toString();
    String cYear = DateTime.now().year.toString();
    element.dt = DateTime.parse("$cYear-$cMonth-$cDay 00:00:00");
  });
}