问题描述
我正在尝试为Web创建Flutter TimeSeriesChart。我的数据涵盖多天，但在24小时内仅从07:00到16:00。有没有一种方法可以从时间轴中排除非采样时间？
我已附加了代码来显示生成下表的代表性数据集。我想消除不包含样品的扁平部分。
import 'package:Flutter/material.dart';
import 'package:charts_Flutter/Flutter.dart' as charts;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "Flutter run". You'll see the
// application has a blue toolbar. Then,without quitting the app,try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "Flutter run",// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,// This makes the visual density adapt to the platform that you run
// the app on. For desktop platforms,the controls will be smaller and
// closer together (more dense) than on mobile platforms.
visualDensity: VisualDensity.adaptivePlatformDensity,),home: MainPage(),);
}
}
class MainPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method,and use it to set our appbar title.
title: Text('Title'),body: SimpleTimeSeriesChart.withSampleData(),);
}
}
class SimpleTimeSeriesChart extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
SimpleTimeSeriesChart(this.seriesList,{this.animate});
/// Creates a [TimeSeriesChart] with sample data and no transition.
factory SimpleTimeSeriesChart.withSampleData() {
return new SimpleTimeSeriesChart(
_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(),primaryMeasureAxis: charts.NumericAxisspec(
tickProviderSpec:
charts.BasicNumericTickProviderSpec(zeroBound: false)),behaviors: [
charts.LinePointHighlighter(
drawFollowLinesAcrossChart: true,showHorizontalFollowLine:
charts.LinePointHighlighterFollowLineType.nearest,showVerticalFollowLine:
charts.LinePointHighlighterFollowLineType.nearest,)
],);
}
/// Create one series with sample hard coded data.
static List<charts.Series<TimeSeriesSales,DateTime>> _createSampleData() {
final data = [
TimeSeriesSales(
DateTime.parse('2020-09-08 07:00:00-05'),28133.310000000000),TimeSeriesSales(
DateTime.parse('2020-09-08 08:00:00-05'),27896.299666666667),TimeSeriesSales(
DateTime.parse('2020-09-08 09:00:00-05'),27650.790500000000),TimeSeriesSales(
DateTime.parse('2020-09-08 10:00:00-05'),27663.605833333333),TimeSeriesSales(
DateTime.parse('2020-09-08 11:00:00-05'),27700.321666666667),TimeSeriesSales(
DateTime.parse('2020-09-08 12:00:00-05'),27787.622500000000),TimeSeriesSales(
DateTime.parse('2020-09-08 13:00:00-05'),27671.972500000000),TimeSeriesSales(
DateTime.parse('2020-09-08 14:00:00-05'),27576.781666666667),TimeSeriesSales(
DateTime.parse('2020-09-08 15:00:00-05'),27501.285500000000),TimeSeriesSales(
DateTime.parse('2020-09-08 16:00:00-05'),27500.890000000000),TimeSeriesSales(
DateTime.parse('2020-09-09 07:00:00-05'),TimeSeriesSales(
DateTime.parse('2020-09-09 08:00:00-05'),27626.437666666667),TimeSeriesSales(
DateTime.parse('2020-09-09 09:00:00-05'),27934.255166666667),TimeSeriesSales(
DateTime.parse('2020-09-09 10:00:00-05'),28004.045000000000),TimeSeriesSales(
DateTime.parse('2020-09-09 11:00:00-05'),28043.676500000000),TimeSeriesSales(
DateTime.parse('2020-09-09 12:00:00-05'),28136.987666666667),TimeSeriesSales(
DateTime.parse('2020-09-09 13:00:00-05'),28144.234333333333),TimeSeriesSales(
DateTime.parse('2020-09-09 14:00:00-05'),28134.081166666667),TimeSeriesSales(
DateTime.parse('2020-09-09 15:00:00-05'),27940.841500000000),TimeSeriesSales(
DateTime.parse('2020-09-09 16:00:00-05'),27940.470000000000),TimeSeriesSales(
DateTime.parse('2020-09-10 07:00:00-05'),TimeSeriesSales(
DateTime.parse('2020-09-10 08:00:00-05'),28027.061333333333),TimeSeriesSales(
DateTime.parse('2020-09-10 09:00:00-05'),28059.610666666667),TimeSeriesSales(
DateTime.parse('2020-09-10 10:00:00-05'),27931.955500000000),TimeSeriesSales(
DateTime.parse('2020-09-10 11:00:00-05'),27828.527666666667),TimeSeriesSales(
DateTime.parse('2020-09-10 12:00:00-05'),27829.483666666667),TimeSeriesSales(
DateTime.parse('2020-09-10 13:00:00-05'),27692.033666666667),TimeSeriesSales(
DateTime.parse('2020-09-10 14:00:00-05'),27571.017666666667),TimeSeriesSales(
DateTime.parse('2020-09-10 15:00:00-05'),27534.852833333333),TimeSeriesSales(
DateTime.parse('2020-09-10 16:00:00-05'),27534.580000000000),TimeSeriesSales(
DateTime.parse('2020-09-11 07:00:00-05'),TimeSeriesSales(
DateTime.parse('2020-09-11 08:00:00-05'),27587.593333333333),TimeSeriesSales(
DateTime.parse('2020-09-11 09:00:00-05'),27688.825500000000),TimeSeriesSales(
DateTime.parse('2020-09-11 10:00:00-05'),27789.232000000000),];
return [
new charts.Series<TimeSeriesSales,DateTime>(
id: 'Sales',colorFn: (_,__) => charts.MaterialPalette.blue.shadeDefault,domainFn: (TimeSeriesSales sales,_) => sales.time,measureFn: (TimeSeriesSales sales,_) => sales.sales,data: data,)
];
}
}
/// Sample time series data type.
class TimeSeriesSales {
final DateTime time;
final double sales;
TimeSeriesSales(this.time,this.sales);
}
解决方法
像这样在它们之间放置null值：
...
TimeSeriesSales(
DateTime.parse('2020-09-09 16:00:00-05'),27940.470000000000),TimeSeriesSales(
DateTime.parse('2020-09-09 16:00:00-05'),null),TimeSeriesSales(
DateTime.parse('2020-09-10 07:00:00-05'),...