Flutter SfCartesianChart 不显示X/Y轴且图表空白问题排查

问题原因 #

• 1、FutureBuilder的异步任务仅获取了原始JSON字符串，未调用loadSalesData()方法解析数据填充chartData数组，图表渲染时数据源始终为空。
• 2、即使后续填充了chartData，你没有在数据更新后调用setState()触发UI重绘，图表不会自动更新展示新数据。
• 3、图表容器背景为深暗色Color(0xff232d37)，SfCartesianChart默认的轴标签、刻度线都是黑色，就算有数据也会和背景融合看不见。

修复方案 #

第一步：调整FutureBuilder的异步逻辑 #

不要单独调用getJsonFromFirebase，直接把loadSalesData作为FutureBuilder的future，数据加载完成后调用setState更新状态。

第二步：调整轴样式适配深色背景 #

给X轴Y轴设置浅色的标签、刻度样式。

修复后参考代码 #

// chartData放在State类中定义
List<SalesData> chartData = [];

@override
Widget build(BuildContext context) {
  return Container(
    height: 250,
    width: MediaQuery.of(context).size.width,
    decoration: const BoxDecoration(
      borderRadius: BorderRadius.all(Radius.circular(2)),
      color: Color(0xff232d37)
    ),
    child: FutureBuilder(
      // 直接用loadSalesData作为异步任务
      future: loadSalesData(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          return SfCartesianChart(
            primaryXAxis: CategoryAxis(
              // 轴标签改为白色适配深色背景
              labelStyle: const TextStyle(color: Colors.white),
              majorGridLines: const MajorGridLines(width: 0),
            ),
            primaryYAxis: NumericAxis(
              labelStyle: const TextStyle(color: Colors.white),
              majorGridLines: MajorGridLines(color: Colors.grey.withOpacity(0.3)),
            ),
            series: <LineSeries<SalesData, String>>[
              LineSeries<SalesData, String>(
                // 折线改为亮色提高辨识度
                color: Colors.lightBlueAccent,
                dataSource: chartData,
                xValueMapper: (SalesData sales, _) => sales.date,
                yValueMapper: (SalesData sales, _) => sales.price
              )
            ]
          );
        } else {
          return const Center(child: CircularProgressIndicator(color: Colors.white));
        }
      }
    )
  );
}

Future<void> loadSalesData() async {
  final String jsonString = await getJsonFromFirebase();
  final dynamic jsonResponse = json.decode(jsonString);
  // 清空旧数据避免重复添加
  chartData.clear();
  for (Map<String, dynamic> i in jsonResponse) {
    chartData.add(SalesData.fromJson(i));
  }
  // 触发UI重绘
  if(mounted) setState(() {});
}

Future<String> getJsonFromFirebase() async {
  String url = "https://someurl.price.php";
  http.Response response = await http.get(Uri.parse(url));
  return response.body;
}

class SalesData {
  SalesData(this.date, this.price);
  final String date;
  final int price;

  factory SalesData.fromJson(Map<String, dynamic> parsedJson) {
    return SalesData(
      parsedJson['date'].toString(),
      parsedJson['price'],
    );
  }
}

额外排查点 #

如果修复后还是空白，可以在loadSalesData里打印jsonResponse和chartData.length，确认接口返回的JSON格式正确、数据解析没有异常。

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