Как скрыть одну линию графика в chart_flutter с флажками?

Question

Привет, извините, я не смог прийти с утешением для моего флаттера

Что пытается скрывать один график, когда флажок установлен, как показано на двух рисунках выше

Это мои коды:

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

Это мои коды флажков:

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 пришлось опробовать условия в списке с «if case», но не может передать логическую переменную checkbox в класс диаграмм
Пример:

    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 

] // конец возврата

Если вы читаете это спасибо за время, очень ценю это.

Answer 1

Вы должны добавить это в свои диаграммы. 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
        )
      ],
    );

Затем вы должны устанавливать setState при каждом переключении флажка.