我正在用Flutter(charts_flutter包)制作一个时间序列图,如下图,我想在用户选择时将相关数据显示到刻度上。我需要在代码中添加什么?
我正在使用从我的应用程序中的不同小部件调用的小部件。生成 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 图表上显示与用户选择相关的数据?