如何在颤振图中显示刻度选择中的数据?

时间:2021-03-15 20:17:26

标签: flutter charts

我正在用Flutter(charts_flutter包)制作一个时间序列图,如下图,我想在用户选择时将相关数据显示到刻度上。我需要在代码中添加什么?

My time series desplayed

我正在使用从我的应用程序中的不同小部件调用的小部件。生成 TimeSeriesChart 的小部件代码为:

    Widget graficoLinealDoble(BuildContext context, List<DateTime> listOfFechas, List<double> listOfCantidades, List<DateTime> listOfFechas2, List<double> listOfCantidades2,String titulo, String subtitulo, String medidaSubtitulo, [String color = '#E0B872', String color2 = '#E5E5E9']) {
    
   // Create titles of Chart

      return Column(
               children: <Widget>[
                 SizedBox(height: 8.0),
                 Text('$titulo', maxLines: 1, overflow: TextOverflow.fade, softWrap: false,
                      style: TextStyle(fontSize: 18.0, color: Theme.of(context).primaryColor, fontWeight: FontWeight.bold)),
                 Row(
                   mainAxisAlignment: MainAxisAlignment.center,
                   children: [
                     Text('$subtitulo ', style: TextStyle(fontSize: 26.0, color: Colors.grey[700])),
                     Text('$medidaSubtitulo', style: TextStyle(fontSize: 16.0, color: Theme.of(context).primaryColor),  strutStyle: StrutStyle(fontSize: 26.0)),
                    //  267,30:                 Text(unidad, strutStyle: StrutStyle(fontSize: 22.0), textAlign: TextAlign.center, style: TextStyle(fontSize: 10.0, color: Theme.of(context).primaryColor),),
                   ],
                 ),
                   Flexible(
                     child: EndPointsAxisTimeSeriesChart(_crearLinea(listOfFechas, listOfCantidades, color, listOfFechas2, listOfCantidades2, color2), animate: true)
                   ),
               ],
             );
        
    }
    
      /// Create series list with multiple series
      List<charts.Series<TimeSeriesSales, DateTime>> _crearLinea(List<DateTime> listOfFechas, List<double> listOfCantidades, String color, List<DateTime> listOfFechas2, List<double> listOfCantidades2, String color2) {
    
        List<charts.Series<TimeSeriesSales, DateTime>> _listSeries;
        _listSeries = List<charts.Series<TimeSeriesSales, DateTime>>();
    
        List<TimeSeriesSales> _listTimeSeriesSales2 = new List();
        List<TimeSeriesSales> _listTimeSeriesSales  = new List();
    
        for (var i = 0; i < listOfFechas2.length; i++) {
          _listTimeSeriesSales2.add(TimeSeriesSales(listOfFechas2[i], listOfCantidades2[i]));
        }
    
        for (var i = 0; i < listOfFechas.length; i++) {
          _listTimeSeriesSales.add(TimeSeriesSales(listOfFechas[i], listOfCantidades[i]));
        }
    
    
        _listSeries.add(charts.Series<TimeSeriesSales, DateTime>(
            id: 'Consumos2',
            strokeWidthPxFn: (TimeSeriesSales sales, _) => 4,
            colorFn: (_, __) => charts.Color.fromHex(code: color2),
            domainFn: (TimeSeriesSales sales, _) => sales.time,
            measureFn: (TimeSeriesSales sales, _) => sales.sales,
            data: _listTimeSeriesSales2
        ));
    
    
        _listSeries.add(charts.Series<TimeSeriesSales, DateTime>(
            id: 'Consumos',
            strokeWidthPxFn: (TimeSeriesSales sales, _) => 4,
            colorFn: (_, __) => charts.Color.fromHex(code: color),
            domainFn: (TimeSeriesSales sales, _) => sales.time,
            measureFn: (TimeSeriesSales sales, _) => sales.sales,
            data: _listTimeSeriesSales
        ));
                 
        return _listSeries;
      }
    
    

// Create the Time Series Chart

      class EndPointsAxisTimeSeriesChart extends StatelessWidget {
        final List<charts.Series> seriesList;
        final bool animate;
    
        EndPointsAxisTimeSeriesChart(this.seriesList, {this.animate});
    
    
          @override
          Widget build(BuildContext context) {
            return new charts.TimeSeriesChart(
              seriesList,
              animate: animate,
              domainAxis: new charts.DateTimeAxisSpec(),
              dateTimeFactory: const charts.LocalDateTimeFactory(),
              primaryMeasureAxis: charts.NumericAxisSpec(
                tickProviderSpec: new charts.BasicNumericTickProviderSpec(desiredTickCount: 4,),
              ),
              defaultRenderer: new charts.LineRendererConfig(
                includePoints: false,
                includeArea: false,
              ),
            );
          }
    }
    
    /// Sample time series data type.
    class TimeSeriesSales {
      final DateTime time;
      final double sales;
    
      TimeSeriesSales(this.time, this.sales);
    }

如何在 Flutter 图表上显示与用户选择相关的数据?

0 个答案:

没有答案