Flutter中SplineChart绑定List数据时无法绘制曲线的问题排查

你的代码逻辑不符合Syncfusion图表的渲染规则，核心问题有两个：

• 你只往chartData里塞了1个ChartData实例，固定x值为4，却循环生成了27个独立的SplineSeries，每个系列里只有1个坐标点。单个点无法绘制连续样条线，所以图表区域是空的。
• 你搞反了系列和数据点的对应关系：1条样条曲线对应1个SplineSeries，1个系列需要接收所有(x,y)点作为数据源，你把单条线的所有数值拆到了27个独立系列里，每个系列只有1个点，当然画不出线。

你需要先把存储数值的List转成坐标点列表：x轴取数值的索引（从0开始递增），y轴取对应位置的数值，只需要创建1个SplineSeries传入所有点即可。

static List<double> x = [26.0,13.10,1.3,1.5,1.9,1.8,1.9,2.9,3.0,1.9,1.8,1.4,9.0,2.0,3.4,4.7,1.8,1.9,2.9,3.0,1.9,1.8,1.4,1.0,2.0,3.4,4.7];

@override
Widget build(BuildContext context) {
  // 转换为坐标点列表
  final List<ChartData> chartData = List.generate(
    x.length,
    (index) => ChartData(index, x[index])
  );

  return Scaffold(
    body: Center(
      child: Container(
        child: SfCartesianChart(
          series: [
            SplineSeries<ChartData, int>(
              dataSource: chartData,
              xValueMapper: (ChartData data, _) => data.x,
              yValueMapper: (ChartData data, _) => data.y
            )
          ],
        )
      )
    )
  );
}

class ChartData {
  ChartData(this.x, this.y);
  final int x;
  final double y;
}

你的当前错误运行效果：

运行修正后的代码即可正常渲染连续的样条曲线，如果需要绘制多条曲线，再新增对应数量的SplineSeries、分别传入每条线的坐标点列表即可。

内容的提问来源于stack exchange，提问作者taha khamis