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

Question

我试图在颤振应用程序中制作折线图，Y 轴作为值（整数）和 X 轴作为日期（字符串），如下图所示，但颤振预定义类不允许我这样做，因为当我尝试将字符串作为参数发送，然后它抛出错误，说String is not Subtype of int ，我是颤振的新手，请帮助我..

我正在尝试执行的示例单击此处。

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

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,
  )
];
}

相同的输出

Answer 3

我使用 LineChartData 的 titlesData 属性覆盖标题，您可以使用其他属性覆盖其他方的标题：

bottomTitles: SideTitles(
 showTitles: true,
 getTitles: (index) {
 return monthsName[index.toInt()];
}),

包裹：

fl_chart: ^0.35.0

虚拟数据：

final List<FlSpot> dummyData1 = List.generate(12, (index) {
return FlSpot(index.toDouble(), index * Random().nextDouble());
});

月份名称列表：

List<String> monthsName = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"June",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
];

图表代码：

LineChart(
    LineChartData(
      titlesData: FlTitlesData(
        bottomTitles: SideTitles(
            showTitles: true,
            getTitles: (index) {
              return monthsName[index.toInt()];
            }),
        leftTitles: SideTitles(showTitles: false),
        rightTitles: SideTitles(showTitles: false),
        topTitles: SideTitles(showTitles: false),
      ),
      borderData: FlBorderData(show: false),
      lineBarsData: [
        LineChartBarData(
          spots: dummyData1,
          isCurved: false,
          barWidth: 4,
          colors: [
            Colors.orange,
          ],
        ),
      ],
    ),
),      

这肯定会帮助你！ 享受编程。