问题

以下是翻译好的部分：

I want to draw a line chart with some data in Flutter Mobile App, so used fl_chart package.

我想在Flutter移动应用中绘制一条折线图，所以使用了 fl_chart 包。

The data is notified 50 times per second (50Hz) from a BLE-connected device.

数据以每秒50次（50Hz）的频率从一个蓝牙连接的设备中通知。

My app subscribes to the notifications and draws a line chart with notified data.

我的应用程序订阅通知并绘制包含通知数据的折线图。

Unfortunately, the line chart flutters unstably (look for the red line chart).

不幸的是，折线图在绘制时出现不稳定情况（查看红色折线图）。

Even it draws a stable chart when notifications are under 5Hz, but too slow to use.

即使在通知频率低于5Hz时绘制出稳定的图表，但使用起来太慢了。

I want my app to draw the chart with over 50Hz.

我希望我的应用程序能够以超过50Hz的速度绘制图表。

Could you tell me how to solve this fluttering?

你能告诉我如何解决这种抖动问题吗？

Arduino Serial Plotter

Arduino串行绘图仪

Flutter

Flutter

AspectRatio(
  aspectRatio: 1.5,
  child: Padding(
    padding: const EdgeInsets.only bottom: 24.0),
    child: LineChart(
      LineChartData(
        minY: -50,
        maxY: 50,
        minX: iredData.first.x,
        maxX: iredData.last.x,
        lineTouchData: LineTouchData(enabled: false),
        clipData: FlClipData.all(),
        gridData: FlGridData(
          show: true,
          drawVerticalLine: false,
        ),
        borderData: FlBorderData(show: false),
        lineBarsData: [
          iredLine(iredData),
        ],
        titlesData: FlTitlesData(show: false),
      ),
    ),
  ),
)

LineChartBarData iredLine(List<FlSpot> points) {
  return LineChartBarData(
    spots: points,
    dotData: FlDotData(
      show: false,
    ),
    gradient: LinearGradient(
      colors: [widget.sinColor, widget.sinColor],
      stops: const [0.1, 1.0],
    ),
    barWidth: 4,
    isCurved: false,
  );
}

AspectRatio(
  aspectRatio: 1.5,
  child: Padding(
    padding: const EdgeInsets.only(bottom: 24.0),
    child: LineChart(
      LineChartData(
        minY: -50,
        maxY: 50,
        minX: iredData.first.x,
        maxX: iredData.last.x,
        lineTouchData: LineTouchData(enabled: false),
        clipData: FlClipData.all(),
        gridData: FlGridData(
          show: true,
          drawVerticalLine: false,
        ),
        borderData: FlBorderData(show: false),
        lineBarsData: [
          iredLine(iredData),
        ],
        titlesData: FlTitlesData(show: false),
      ),
    ),
  ),
)

LineChartBarData iredLine(List<FlSpot> points) {
  return LineChartBarData(
    spots: points,
    dotData: FlDotData(
      show: false,
    ),
    gradient: LinearGradient(
      colors: [widget.sinColor, widget.sinColor],
      stops: const [0.1, 1.0],
    ),
    barWidth: 4,
    isCurved: false,
  );
}

AspectRatio(
  aspectRatio: 1.5,
  child: Padding(
    padding: const EdgeInsets.only(bottom: 24.0),
    child: LineChart(
      LineChartData(
        minY: -50,
        maxY: 50,
        minX: iredData.first.x,
        maxX: iredData.last.x,
        lineTouchData: LineTouchData(enabled: false),
        clipData: FlClipData.all(),
        gridData: FlGridData(
          show: true,
          drawVerticalLine: false,
        ),
        borderData: FlBorderData(show: false),
        lineBarsData: [
          iredLine(iredData),
        ],
        titlesData: FlTitlesData(show: false),
      ),
    ),
  ),
)

LineChartBarData iredLine(List<FlSpot> points) {
  return LineChartBarData(
    spots: points,
    dotData: FlDotData(
      show: false,
    ),
    gradient: LinearGradient(
      colors: [widget.sinColor, widget.sinColor],
      stops: const [0.1, 1.0],
    ),
    barWidth: 4,
    isCurved: false,
  );
}

答案1

得分: 1

我使用swapAnimationDuration: Duration.zero参数在LineChart小部件中解决了这个问题。

参考链接：https://github.com/imaNNeo/fl_chart/issues/109

AspectRatio(
  aspectRatio: 1.5,
  child: Padding(
    padding: const EdgeInsets.only(bottom: 24.0),
    child: LineChart(
      swapAnimationDuration: Duration.zero,
      minY: -50,
      maxY: 50,
      minX: iredData.first.x,
      maxX: iredData.last.x,
      lineTouchData: LineTouchData(enabled: false),
      clipData: FlClipData.all(),
      gridData: FlGridData(
        show: true,
        drawVerticalLine: false,
      ),
      borderData: FlBorderData(show: false),
      lineBarsData: [
        iredLine(iredData),
      ],
      titlesData: FlTitlesData(show: false),
    ),
  ),
)

AspectRatio(
  aspectRatio: 1.5,
  child: Padding(
    padding: const EdgeInsets.only(bottom: 24.0),
    child: LineChart(
      swapAnimationDuration: Duration.zero,
        minY: -50,
        maxY: 50,
        minX: iredData.first.x,
        maxX: iredData.last.x,
        lineTouchData: LineTouchData(enabled: false),
        clipData: FlClipData.all(),
        gridData: FlGridData(
          show: true,
          drawVerticalLine: false,
        ),
        borderData: FlBorderData(show: false),
        lineBarsData: [
          iredLine(iredData),
        ],
        titlesData: FlTitlesData(show: false),
      ),
    ),
  ),
)