时间戳

首页 > 解决方案 > 在颤动中绘制双打列表

flutter - 在颤动中绘制双打列表

问题描述

我的应用程序中有一种数据类型，其中包含两个列表：

class DeviceData {
    List<double> frequency;
    List<double> value;
    DeviceData({this.frequency, this.value});
}

我不想将我的应用程序中的数据类型分成单独的数字，因为它在从显示原始数据到从数据库写入/读取的所有地方都被重用。我需要在 Flutter 中绘制两个列表，频率在 y 轴上，值在 x 上。

我在 pub.dev 上找到的所有库/包都使用包含纯 int/double 值的数据模型来绘制数据，然后将其转换为该数据模型的列表。我想使用包含所有 x 和所有 y 数据的列表，而不是包含对应于一个 y 值的一个 x 频率的列表。如何做到这一点？如果我想使用地图来绘制数据怎么办？

一个例子：

SfCartesianChart(
    plotAreaBorderWidth: 0,
    primaryXAxis: NumericAxis(
        edgeLabelPlacement: EdgeLabelPlacement.shift,
        interval: 2,
        majorGridLines: MajorGridLines(width: 0)),
    primaryYAxis: NumericAxis(
        labelFormat: '{value}',
        axisLine: AxisLine(width: 0),
        majorTickLines: MajorTickLines(color: Colors.transparent)),
    series: <LineSeries<DeviceData, List<num>>>[
      LineSeries<DeviceData, List<num>>(
          animationDuration: 1500,
          dataSource: _result, //Contains List<DeviceData>
          xValueMapper: (DeviceData data, _) => data.frequency,
          yValueMapper: (DeviceData data, _) => data.value,
          width: 2,
          markerSettings: MarkerSettings(isVisible: true))
    ],
    tooltipBehavior: TooltipBehavior(enable: true),
);

我在这里做错了什么？

标签： flutterdart

解决方案

您可以轻松地将当前映射devideData到List<SingleDeviceData>：

dataSource: List.generate(
  deviceData.frequency.length,
  (index) => SingleDeviceData(
    frequency: deviceData.frequency[index],
    value: deviceData.value[index],
  ),
).toList(),

在此处输入图像描述

轻松复制粘贴的完整源代码：

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: Scaffold(
        body: MyWidget(),
      ),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SfCartesianChart(
      plotAreaBorderWidth: 0,
      primaryXAxis: NumericAxis(
          edgeLabelPlacement: EdgeLabelPlacement.shift,
          interval: 2,
          majorGridLines: MajorGridLines(width: 0)),
      primaryYAxis: NumericAxis(
          labelFormat: '{value}',
          axisLine: AxisLine(width: 0),
          majorTickLines: MajorTickLines(color: Colors.transparent)),
      series: dataList
          .map((deviceData) => LineSeries<SingleDeviceData, double>(
              animationDuration: 1500,
              dataSource: List.generate(
                deviceData.frequency.length,
                (index) => SingleDeviceData(
                  frequency: deviceData.frequency[index],
                  value: deviceData.value[index],
                ),
              ).toList(),
              xValueMapper: (SingleDeviceData data, _) => data.frequency,
              yValueMapper: (SingleDeviceData data, _) => data.value,
              width: 2,
              markerSettings: MarkerSettings(isVisible: true)))
          .toList(),
      tooltipBehavior: TooltipBehavior(enable: true),
    );
  }
}

class DeviceData {
  List<double> frequency;
  List<double> value;
  DeviceData({this.frequency, this.value});
}

class SingleDeviceData {
  final double frequency;
  final double value;

  SingleDeviceData({this.frequency, this.value});
}

final Random random = Random();

final List<DeviceData> dataList = List.generate(
  10,
  (_) => DeviceData(
    frequency: List.generate(100, (_) => random.nextDouble() * 100)..sort(),
    value: List.generate(100, (_) => random.nextDouble() * 10 - 3)
        .fold([0], (prev, curr) => prev..add(prev.last + curr)),
  ),
);

推荐阅读