Question

我试图在flutter应用程序中制作一个折线图，Y轴为values（int），X轴为Date（String），如下图所示，但flutter预定义类不允许我这样做导致原因，当我尝试将字符串作为参数发送时，它抛出错误，提示String is not Subtype of int，我是新手，请帮助我。

Example which I am trying to do click here.

这就是我要显示我的图表的方式。

Answer 1

由于域轴（x轴）是天，因此您需要使用TimeSeriesChart，而不是LineChart。然后提供tickFormatterSpec，以将刻度设置为星期几。请参阅下面的完整示例：

class SimpleTimeSeriesChart extends StatelessWidget {
  const SimpleTimeSeriesChart(this.seriesList);

  /// Creates a [TimeSeriesChart] with sample data and no transition.
  factory SimpleTimeSeriesChart.withSampleData() {
    return SimpleTimeSeriesChart(
      _createSampleData(),
    );
  }

  final List<charts.Series<TimeSeriesSales, DateTime>> seriesList;

  @override
  Widget build(BuildContext context) => charts.TimeSeriesChart(
        seriesList,
        animate: false,
        dateTimeFactory: const charts.LocalDateTimeFactory(),
        domainAxis: charts.DateTimeAxisSpec(
          tickFormatterSpec: charts.AutoDateTimeTickFormatterSpec(
            day: charts.TimeFormatterSpec(
              format: 'EEE',
              transitionFormat: 'EEE',
            ),
          ),
        ),
      );

  /// Create one series with sample hard coded data.
  static List<charts.Series<TimeSeriesSales, DateTime>> _createSampleData() {
    final List<TimeSeriesSales> data = <TimeSeriesSales>[
      TimeSeriesSales(DateTime(2019, 1, 7), 5),
      TimeSeriesSales(DateTime(2019, 1, 8), 25),
      TimeSeriesSales(DateTime(2019, 1, 9), 100),
      TimeSeriesSales(DateTime(2019, 1, 10), 75),
    ];

    return <charts.Series<TimeSeriesSales, DateTime>>[
      charts.Series<TimeSeriesSales, DateTime>(
        id: 'Sales',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (TimeSeriesSales sales, _) => sales.time,
        measureFn: (TimeSeriesSales sales, _) => sales.sales,
        data: data,
      )
    ];
  }
}

class TimeSeriesSales {
  TimeSeriesSales(this.time, this.sales);

  final DateTime time;
  final int sales;
}

Answer 2

_graphSection(ScreenType type) {
final customTickFormatter =
charts.BasicNumericTickFormatterSpec((num value) {
  if (value == 0) {
    return "Mon";
  } else if (value == 1) {
    return "Tue";
  } else if (value == 2) {
    return "Wed";
  } else if (value == 3) {
    return "Thr";
  } else if (value == 4) {
    return "Fri";
  } else if (value == 5) {
    return "Sat";
  } else if (value == 6) {
    return "Sun";
  }
});

return SizedBox(
  height: 200,
  child: charts.LineChart(
    _createSampleData(),
    defaultRenderer:
    charts.LineRendererConfig(includeArea: true, stacked: true),
    animate: true,
    // Sets up a currency formatter for the measure axis.

    primaryMeasureAxis: new charts.NumericAxisSpec(
      tickProviderSpec:
      new charts.BasicNumericTickProviderSpec(desiredTickCount: 6),
    ),
    domainAxis: charts.NumericAxisSpec(
      tickProviderSpec:
      charts.BasicNumericTickProviderSpec(desiredTickCount: 7),
      tickFormatterSpec: customTickFormatter,
    ),
  ),
);
}

_createSampleData() {
final myFakeDesktopData = [
  new LinearSales(0, 1000),
  new LinearSales(1, 2000),
  new LinearSales(2, 4000),
  new LinearSales(3, 1000),
  new LinearSales(4, 4000),
  new LinearSales(5, 5000),
  new LinearSales(6, 6000),
];

var shadowColor = chartColor.Color(r: 240, g: 246, b: 244, a: 160);
var yellowThemeColor = chartColor.Color.fromHex(code: "#f4e400");

return [
  charts.Series<LinearSales, int>(
    id: 'Cost',
    domainFn: (LinearSales row, _) => row.day,
    measureFn: (LinearSales row, _) => row.sales,
    colorFn: (_, __) => yellowThemeColor,
    areaColorFn: (_, __) => shadowColor,
    data: myFakeDesktopData,
  )
];
}

相同的输出

如何在折线图X轴颤动中传递字符串参数

2 个答案: