带有 String domainFn 的 Flutter googele LineChart

Question

使用 google LineChart 我无法为 domainFn 参数设置字符串

_generateData() {
  var data = [
    Task('05/10',20),
    Task('05/20',24),
    Task('05/30',25),
    Task('06/05',40),
  ];

  _seriesLineData.add(charts.Series(
    data: data,
    domainFn: (Task task, _) => task.task,
    measureFn: (Task task, _) => task.taskValue,
    colorFn: (Task task, _) => charts.ColorUtil.fromDartColor(Color(0xff990099)),
    id: 'weights',
    labelAccessorFn: (Task row, _) => '${row.taskValue}',
  ));
}

当我尝试这个时出现错误：

type 'List<Series<Task, String>>' is not a subtype of type
 'List<Series<dynamic, num>>'

我找不到任何好的参考来解决这个问题

我的代码：

class FragmentAddNewWeight extends StatefulWidget{
  @override
  State<StatefulWidget> createState() => FragmentAddNewWeightState();
}

class FragmentAddNewWeightState extends State<FragmentAddNewWeight> {
  List<charts.Series<Task, String>> _seriesLineData;

_generateData() {
  var data = [
    Task('05/10',20),
    Task('05/20',24),
    Task('05/30',25),
    Task('06/05',40),
  ];

  _seriesLineData.add(charts.Series(
    data: data,
    domainFn: (Task task, _) => task.task,
    measureFn: (Task task, _) => task.taskValue,
    colorFn: (Task task, _) => charts.ColorUtil.fromDartColor(Color(0xff990099)),
    id: 'weights',
    labelAccessorFn: (Task row, _) => '${row.taskValue}',
  ));
}

  @override
  void initState() {
    super.initState();
    _seriesLineData = List<charts.Series<Task, String>>();
    _generateData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Container(
        child: Column(children: <Widget>[
          Directionality(
            textDirection: TextDirection.ltr,
            child: Column(
              children: <Widget>[
                Card(
                  clipBehavior: Clip.antiAlias,
                  margin:EdgeInsets.all(10.0),
                  color: Colors.grey[200],
                  child: Container(
                    height:200.0,
                    padding:EdgeInsets.all(10.0),
                    child: charts.LineChart(
                      _seriesLineData,
                      defaultRenderer: charts.LineRendererConfig(includeArea: true, stacked: true),
                      animate: true,
                      animationDuration: Duration(milliseconds: 500),
                      behaviors: [new charts.PanAndZoomBehavior()],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ]),
      ),
    );
  }
}

class Task {
  String task;
  int taskValue;

  Task(this.task, this.taskValue);
}

Answer 1

您不能将字符串值用作折线图的 X 轴。该值必须是数字 - int 或 double。

你的字符串真的有日期吗？在这种情况下，您应该使用时间序列图表。如果它们只是离散点，则应使用条形图。

折线图将沿线性轴在适当的点绘制 X 轴点。如果值不是均匀分布的，数据点将不会均匀分布。（当然 ticks 会是。）

带有 String domainFn 的 Flutter googele LineChart

Flutter googele LineChart with String domainFn

linechart

flutter