如何使用复选框隐藏chart_flutter中的一行图形？

Question

Hi, sorry I was unable to come with solation for my flutter app

What trying to do hide one graph when the checkbox is true shown in two pictures above

This my grapgh codes:

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;


 class AbminetCharts extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;

  AbminetCharts(this.seriesList, {this.animate});

  /// Creates a [LineChart] with sample data and no transition.
  factory AbminetCharts.withSampleData() {
    return new AbminetCharts(
      _createSampleData(),
      // Disable animations for image tests.
      animate: false,
    );
  }

  @override
  Widget build(BuildContext context) {
    return new charts.TimeSeriesChart(
      seriesList,
      animate: animate,
      // Optionally pass in a [DateTimeFactory] used by the chart. The factory
      // should create the same type of [DateTime] as the data provided. If none
      // specified, the default creates local date time.
      dateTimeFactory: const charts.LocalDateTimeFactory(),
    );
  }

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

    final myCo2data = [
      new TimeSeriesSales(new DateTime(2017, 9, 19), 1.0),
      new TimeSeriesSales(new DateTime(2017, 9, 26), 2.3),
      new TimeSeriesSales(new DateTime(2017, 10, 3), 2.2),
    ];

    final myhumditydata = [
      new TimeSeriesSales(new DateTime(2017, 9, 19), 3.5),
      new TimeSeriesSales(new DateTime(2017, 9, 26), 2.3),
      new TimeSeriesSales(new DateTime(2017, 10, 3), 1.2),
    ];


    final mytempturedata = [
      new TimeSeriesSales(new DateTime(2017, 9, 19), 25),
      new TimeSeriesSales(new DateTime(2017, 9, 26), 30),
      new TimeSeriesSales(new DateTime(2017, 10, 3), 17),
    ];

    return  [

     new charts.Series<TimeSeriesSales, DateTime>(
        id: 'Co2',
        colorFn: (_, __) => charts.MaterialPalette.gray.shadeDefault,
        domainFn: (TimeSeriesSales sales, _) => sales.time,
        measureFn: (TimeSeriesSales sales, _) => sales.data,
        data: myCo2data,
      ),


      new charts.Series<TimeSeriesSales, DateTime>(
        id: 'Humdity',
        colorFn: (_, __) => charts.MaterialPalette.deepOrange.shadeDefault,
        domainFn: (TimeSeriesSales sales, _) => sales.time,
        measureFn: (TimeSeriesSales sales, _) => sales.data,
        data: myhumditydata,
      ),

      new charts.Series<TimeSeriesSales, DateTime>(
      id: 'tempture',
      colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
      domainFn: (TimeSeriesSales sales, _) => sales.time,
      measureFn: (TimeSeriesSales sales, _) => sales.data,
      data: mytempturedata,     
      ),

          ];
        }
      }

/// time series data type.
class TimeSeriesSales {
  final DateTime time;
  final double data;

  TimeSeriesSales(this.time, this.data);
}

This is my Checkbox codes:

class MyAbmientCheckbox extends StatefulWidget {
  @override
  Selectcheckbox createState() => Selectcheckbox();
}

class Selectcheckbox extends State<MyAbmientCheckbox> {

bool co2Val = false;
bool humVal = false;
bool tempVal = false;

  @override
  Widget build(BuildContext context) {
  return 
  //padding effects
     Material(
            borderRadius: BorderRadius.circular(30),
            shadowColor: Colors.black,
            color: Colors.lightGreenAccent.shade100,
            elevation: 5,


  child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // [Monday] checkbox
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Text("Co2/",
                  style: TextStyle(color: Colors.grey.withOpacity(1)),
                  ),
                  Checkbox(
                    value: co2Val,
                    onChanged: (bool value) {
                      setState(() {
                        co2Val = value;
                      });
                    },
                  ),
                ],
              ),
              // [Tuesday] checkbox
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Text("Huminty/",
                  style: TextStyle(color: Colors.orange.withOpacity(1)),
                  ),
                  Checkbox(
                    value: humVal ,
                    onChanged: (bool value) {
                      setState(() {
                        humVal  = value;
                      });
                    },
                  ),
                ],
              ),
              // [Temptures] checkbox
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Text("Temptures/",
                  style: TextStyle(color: Colors.red.withOpacity(1)),
                  ),
                  Checkbox(
                    value: tempVal,
                    onChanged: (bool value) {
                      setState(() {
                        tempVal = value;
                      });
                    },
                  ),
                ],
              ),
            ],
           )
          );
  }
}

I had to try out conditions within the list, with "if the case" but can't pass the checkbox boolean variable into the charts class
Example:

    return  [

if(humVal == false)(
      new charts.Series<TimeSeriesSales, DateTime>(
        id: 'Humdity',
        colorFn: (_, __) => charts.MaterialPalette.deepOrange.shadeDefault,
        domainFn: (TimeSeriesSales sales, _) => sales.time,
        measureFn: (TimeSeriesSales sales, _) => sales.data,
        data: myhumditydata,
      ),
)//end of if 

] // end of return

If your reading this thank you for time, really appreciate it.

Answer 1

You basically should add this to your charts.TimeSeriesChart

var _listHiddenIds = [];
// ex : _listHiddenIds = ["Humdity"]

return new charts.TimeSeriesChart(
      seriesList,
      animate: animate,
      // Optionally pass in a [DateTimeFactory] used by the chart. The factory
      // should create the same type of [DateTime] as the data provided. If none
      // specified, the default creates local date time.
      dateTimeFactory: const charts.LocalDateTimeFactory(),
      // add this attribute
      behaviors: [
        new charts.SeriesLegend(
          defaultHiddenSeries: _listHiddenIds, // list of ids to be hidden
        )
      ],
    );

Then you should setState everytime the checkbox is toggled.