android - 如何在一张图表中显示三个数据？ ( flutter/fl_chart)

Question

class BottomChart extends StatefulWidget {
  final List<String> number;

  const BottomChart({this.number});

  @override
  _BottomChartState createState() => _BottomChartState();
}

class _BottomChartState extends State<BottomChart> {
  List<Color> gradientColors = [
    const Color(0xff23b6e6),
    const Color(0xff02d39a),
  ];

  bool showCnfirmed = true;
  bool showRecvred = false;
  bool showDead = false;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        AspectRatio(
          aspectRatio: 1 / 3,
          child: Container(
            child: Padding(
              padding: const EdgeInsets.only(right: 0, left: 34.0, top: 24, bottom: 24),
              child: LineChart(
                if(showCnfirmed){cnfirmedData()}
                if(showRecvred){recvredData()}
                if(showDead){deadData()}
              ),
            ),
          ),
        ),
        SizedBox(
          width: 60,
          height: 34,
          child: Row(
            children: [
              FlatButton(
                onPressed: () {
                  setState(() {
                    showCnfirmed = !showCnfirmed;
                  });
                },
                child: Text(
                  'Confirmed',
                  style: TextStyle(
                    fontSize: 12, color: showCnfirmed ? Colors.white.withOpacity(0.5) :Colors.white)
                  )
              ),
              FlatButton(
                onPressed: () {
                  setState(() {
                    showRecvred = !showRecvred;
                  });
                },
                child: Text(
                  'Recovered',
                  style: TextStyle(
                    fontSize: 12, color: showRecvred ? Colors.white.withOpacity(0.5) :Colors.white)
                  )
              ),
              FlatButton(
                onPressed: () {
                  setState(() {
                    showDead = !showDead;
                  });
                },
                child: Text(
                  'Dead',
                  style: TextStyle(
                    fontSize: 12, color: showDead ? Colors.white.withOpacity(0.5) :Colors.white)
                  )
              ),
            ],
          )
          )
      ],
    );
  }
}

我厌倦了使用flutter包中的fl_chart制作一个显示三个数据(实际上是折线图中的三个折线)的图表，该图表通过按一下按钮是否单击来显示。
如您在上面的代码中所见，我编写了标识符来检查按钮是否被单击，并使用if在LineChart()部分显示其数据，但是它说，

Performing hot reload...
Syncing files to device Android SDK built for x86...
lib/ui/screens/home_page.dart:106:17: Error: Expected an identifier, but got 'if'.
                if(showCnfirmed){cnfirmedData()}
                ^^
lib/ui/screens/home_page.dart:106:17: Error: Expected ')' before this.
                if(showCnfirmed){cnfirmedData()}
                ^^

在示例代码中，它是这样写的，

LineChart(
                showAvg ? avgData() : mainData(),
              ),

但是该示例涉及两个数据，而我的涉及三个数据。
我怎么解决这个问题？
感谢您的阅读，我将等待您的建议! :)

Answer 1

您可以在下面复制粘贴运行完整代码
您可以使用Map<int, LineChartData>进行选择
并将selection[_selected]传递给LineChart程式码片段

  Map<int, LineChartData> selection;
  int _selected = 0;
  
  @override
  void initState() {
    selection = {0: cnfirmedData(), 1: recvredData(), 2: deadData()};
    super.initState();
  }
  ...  
  child: LineChart(
                  selection[_selected],
                ),  

工作演示

完整的代码

import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';

class BottomChart extends StatefulWidget {
  @override
  _BottomChartState createState() => _BottomChartState();
}

class _BottomChartState extends State<BottomChart> {
  List<Color> gradientColors = [
    const Color(0xff23b6e6),
    const Color(0xff02d39a),
  ];

  Map<int, LineChartData> selection;
  int _selected = 0;
  bool showAvg = false;
  @override
  void initState() {
    selection = {0: cnfirmedData(), 1: recvredData(), 2: deadData()};
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Stack(
        children: <Widget>[
          AspectRatio(
            aspectRatio: 1 / 3,
            child: Container(
              decoration: const BoxDecoration(
                  borderRadius: BorderRadius.all(
                    Radius.circular(18),
                  ),
                  color: Color(0xff232d37)),
              child: Padding(
                padding: const EdgeInsets.only(
                    right: 0, left: 34.0, top: 24, bottom: 24),
                child: LineChart(
                  selection[_selected],
                ),
              ),
            ),
          ),
          SizedBox(
              width: 300,
              height: 34,
              child: Row(
                children: [
                  FlatButton(
                      onPressed: () {
                        setState(() {
                          _selected = 0;
                        });
                      },
                      child: Text('Confirmed',
                          style: TextStyle(
                              fontSize: 12,
                              color: _selected == 0
                                  ? Colors.white.withOpacity(0.5)
                                  : Colors.white))),
                  FlatButton(
                      onPressed: () {
                        setState(() {
                          _selected = 1;
                        });
                      },
                      child: Text('Recovered',
                          style: TextStyle(
                              fontSize: 12,
                              color: _selected == 1
                                  ? Colors.white.withOpacity(0.5)
                                  : Colors.white))),
                  FlatButton(
                      onPressed: () {
                        print("dead");
                        setState(() {
                          _selected = 2;
                        });
                      },
                      child: Text('Dead',
                          style: TextStyle(
                              fontSize: 12,
                              color: _selected == 2
                                  ? Colors.white.withOpacity(0.5)
                                  : Colors.white))),
                ],
              ))
        ],
      ),
    );
  }

  LineChartData cnfirmedData() {
    return LineChartData(
      gridData: FlGridData(
        show: true,
        drawVerticalLine: true,
        getDrawingHorizontalLine: (value) {
          return FlLine(
            color: const Color(0xff37434d),
            strokeWidth: 1,
          );
        },
        getDrawingVerticalLine: (value) {
          return FlLine(
            color: const Color(0xff37434d),
            strokeWidth: 1,
          );
        },
      ),
      titlesData: FlTitlesData(
        show: true,
        bottomTitles: SideTitles(
          showTitles: true,
          reservedSize: 22,
          getTextStyles: (value) => const TextStyle(
              color: Color(0xff68737d),
              fontWeight: FontWeight.bold,
              fontSize: 16),
          getTitles: (value) {
            switch (value.toInt()) {
              case 2:
                return 'MAR';
              case 5:
                return 'JUN';
              case 8:
                return 'SEP';
            }
            return '';
          },
          margin: 8,
        ),
        leftTitles: SideTitles(
          showTitles: true,
          getTextStyles: (value) => const TextStyle(
            color: Color(0xff67727d),
            fontWeight: FontWeight.bold,
            fontSize: 15,
          ),
          getTitles: (value) {
            switch (value.toInt()) {
              case 1:
                return '10k';
              case 3:
                return '30k';
              case 5:
                return '50k';
            }
            return '';
          },
          reservedSize: 28,
          margin: 12,
        ),
      ),
      borderData: FlBorderData(
          show: true,
          border: Border.all(color: const Color(0xff37434d), width: 1)),
      minX: 0,
      maxX: 11,
      minY: 0,
      maxY: 6,
      lineBarsData: [
        LineChartBarData(
          spots: [
            FlSpot(0, 1),
            FlSpot(2.6, 2),
            FlSpot(4.9, 3),
            FlSpot(6.8, 4.1),
            FlSpot(8, 1),
            FlSpot(9.5, 3),
            FlSpot(11, 4),
          ],
          isCurved: true,
          colors: gradientColors,
          barWidth: 5,
          isStrokeCapRound: true,
          dotData: FlDotData(
            show: false,
          ),
          belowBarData: BarAreaData(
            show: true,
            colors:
                gradientColors.map((color) => color.withOpacity(0.3)).toList(),
          ),
        ),
      ],
    );
  }

  LineChartData recvredData() {
    return LineChartData(
      lineTouchData: LineTouchData(enabled: false),
      gridData: FlGridData(
        show: true,
        drawHorizontalLine: true,
        getDrawingVerticalLine: (value) {
          return FlLine(
            color: const Color(0xff37434d),
            strokeWidth: 1,
          );
        },
        getDrawingHorizontalLine: (value) {
          return FlLine(
            color: const Color(0xff37434d),
            strokeWidth: 1,
          );
        },
      ),
      titlesData: FlTitlesData(
        show: true,
        bottomTitles: SideTitles(
          showTitles: true,
          reservedSize: 22,
          getTextStyles: (value) => const TextStyle(
              color: Color(0xff68737d),
              fontWeight: FontWeight.bold,
              fontSize: 16),
          getTitles: (value) {
            switch (value.toInt()) {
              case 2:
                return 'MAR';
              case 5:
                return 'JUN';
              case 8:
                return 'SEP';
            }
            return '';
          },
          margin: 8,
        ),
        leftTitles: SideTitles(
          showTitles: true,
          getTextStyles: (value) => const TextStyle(
            color: Color(0xff67727d),
            fontWeight: FontWeight.bold,
            fontSize: 15,
          ),
          getTitles: (value) {
            switch (value.toInt()) {
              case 1:
                return '10k';
              case 3:
                return '30k';
              case 5:
                return '50k';
            }
            return '';
          },
          reservedSize: 28,
          margin: 12,
        ),
      ),
      borderData: FlBorderData(
          show: true,
          border: Border.all(color: const Color(0xff37434d), width: 1)),
      minX: 0,
      maxX: 11,
      minY: 0,
      maxY: 6,
      lineBarsData: [
        LineChartBarData(
          spots: [
            FlSpot(0, 3.44),
            FlSpot(2.6, 3.44),
            FlSpot(4.9, 3.44),
            FlSpot(6.8, 3.44),
            FlSpot(8, 3.44),
            FlSpot(9.5, 3.44),
            FlSpot(11, 3.44),
          ],
          isCurved: true,
          colors: [
            ColorTween(begin: gradientColors[0], end: gradientColors[1])
                .lerp(0.2),
            ColorTween(begin: gradientColors[0], end: gradientColors[1])
                .lerp(0.2),
          ],
          barWidth: 5,
          isStrokeCapRound: true,
          dotData: FlDotData(
            show: false,
          ),
          belowBarData: BarAreaData(show: true, colors: [
            ColorTween(begin: gradientColors[0], end: gradientColors[1])
                .lerp(0.2)
                .withOpacity(0.1),
            ColorTween(begin: gradientColors[0], end: gradientColors[1])
                .lerp(0.2)
                .withOpacity(0.1),
          ]),
        ),
      ],
    );
  }

  LineChartData deadData() {
    return LineChartData(
      gridData: FlGridData(
        show: true,
        drawVerticalLine: true,
        getDrawingHorizontalLine: (value) {
          return FlLine(
            color: const Color(0xff37434d),
            strokeWidth: 1,
          );
        },
        getDrawingVerticalLine: (value) {
          return FlLine(
            color: const Color(0xff37434d),
            strokeWidth: 1,
          );
        },
      ),
      titlesData: FlTitlesData(
        show: true,
        bottomTitles: SideTitles(
          showTitles: true,
          reservedSize: 22,
          getTextStyles: (value) => const TextStyle(
              color: Color(0xff68737d),
              fontWeight: FontWeight.bold,
              fontSize: 16),
          getTitles: (value) {
            switch (value.toInt()) {
              case 2:
                return 'MAR';
              case 5:
                return 'JUN';
              case 8:
                return 'SEP';
            }
            return '';
          },
          margin: 8,
        ),
        leftTitles: SideTitles(
          showTitles: true,
          getTextStyles: (value) => const TextStyle(
            color: Color(0xff67727d),
            fontWeight: FontWeight.bold,
            fontSize: 15,
          ),
          getTitles: (value) {
            switch (value.toInt()) {
              case 1:
                return '10k';
              case 3:
                return '30k';
              case 5:
                return '50k';
            }
            return '';
          },
          reservedSize: 28,
          margin: 12,
        ),
      ),
      borderData: FlBorderData(
          show: true,
          border: Border.all(color: const Color(0xff37434d), width: 1)),
      minX: 0,
      maxX: 11,
      minY: 0,
      maxY: 6,
      lineBarsData: [
        LineChartBarData(
          spots: [
            FlSpot(0, 3),
            FlSpot(2.6, 2),
            FlSpot(4.9, 5),
            FlSpot(6.8, 3.1),
            FlSpot(8, 4),
            FlSpot(9.5, 3),
            FlSpot(11, 4),
          ],
          isCurved: true,
          colors: gradientColors,
          barWidth: 5,
          isStrokeCapRound: true,
          dotData: FlDotData(
            show: false,
          ),
          belowBarData: BarAreaData(
            show: true,
            colors:
                gradientColors.map((color) => color.withOpacity(0.3)).toList(),
          ),
        ),
      ],
    );
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: BottomChart(),
    );
  }
}