Flutter中Syncfusion堆叠折线图系列以零为基准绘制的问题

问题根源 #

你当前使用的是堆叠折线图系列（StackedLineSeries），这类系列的设计逻辑就是将后续系列的数值叠加在前一个系列的顶部，因此第二个系列会基于第一个系列的10值累加，呈现出10-15-20的效果。

解决方案 #

将系列类型从StackedLineSeries替换为普通的LineSeries，每个系列会独立基于Y轴的0基准绘制，不会产生叠加效果。

修改代码示例 #

找到生成系列的_getStackedLineSeries()方法，将其中的StackedLineSeries替换为LineSeries：

// 修改前的堆叠折线系列
List<StackedLineSeries<ChartData, DateTime>> _getStackedLineSeries() {
  return [
    StackedLineSeries<ChartData, DateTime>(
      dataSource: firstSeriesData,
      xValueMapper: (ChartData data, _) => data.time,
      yValueMapper: (ChartData data, _) => data.value,
      name: '系列1',
    ),
    StackedLineSeries<ChartData, DateTime>(
      dataSource: secondSeriesData,
      xValueMapper: (ChartData data, _) => data.time,
      yValueMapper: (ChartData data, _) => data.value,
      name: '系列2',
    ),
  ];
}

// 修改后的普通折线系列
List<LineSeries<ChartData, DateTime>> _getStackedLineSeries() {
  return [
    LineSeries<ChartData, DateTime>(
      dataSource: firstSeriesData,
      xValueMapper: (ChartData data, _) => data.time,
      yValueMapper: (ChartData data, _) => data.value,
      name: '系列1',
      // 可保留原有的样式属性，比如颜色、线条宽度等
      color: Colors.blue,
      width: 2,
    ),
    LineSeries<ChartData, DateTime>(
      dataSource: secondSeriesData,
      xValueMapper: (ChartData data, _) => data.time,
      yValueMapper: (ChartData data, _) => data.value,
      name: '系列2',
      color: Colors.orange,
      width: 2,
    ),
  ];
}

注意事项 #

• 确保代码中已正确导入LineSeries对应的包：import 'package:syncfusion_flutter_charts/charts.dart';
• 原有的图表配置（如X轴、Y轴、图例、追踪球等）无需修改，可直接保留。

内容的提问来源于stack exchange，提问作者Mücahit Zengin