如何在Flutter中为Syncfusion Chart对接无.json后缀的API

实现步骤 #

Syncfusion Chart并不强制要求API链接带.json后缀，只要能正确获取并解析JSON数据即可，以下是具体实现方案：

• 发起网络请求获取数据
  使用http包直接请求目标API，无需修改原始链接：

  import 'package:http/http.dart' as http;
  import 'dart:convert';
  
  Future<List<dynamic>> fetchPriceData() async {
    final response = await http.get(Uri.parse('https://api.myproject/v2/price'));
    if (response.statusCode == 200) {
      return json.decode(response.body);
    } else {
      throw Exception('加载价格数据失败');
    }
  }
  

• 转换为Chart适配的数据模型
  将解析后的原始JSON数据转换成Syncfusion Chart能直接使用的实体类：

  class PricePoint {
    final DateTime time;
    final double price;
  
    PricePoint(this.time, this.price);
  }
  
  List<PricePoint> transformToChartData(List<dynamic> rawData) {
    return rawData.map((item) => PricePoint(
      DateTime.parse(item['timestamp']),
      double.parse(item['price'].toString())
    )).toList();
  }
  

• 渲染Syncfusion Chart
  用转换后的数据源配置并渲染图表：

  import 'package:syncfusion_flutter_charts/charts.dart';
  
  SfCartesianChart buildPriceChart(List<PricePoint> chartData) {
    return SfCartesianChart(
      series: <LineSeries<PricePoint, DateTime>>[
        LineSeries<PricePoint, DateTime>(
          dataSource: chartData,
          xValueMapper: (PricePoint point, _) => point.time,
          yValueMapper: (PricePoint point, _) => point.price,
        )
      ],
      primaryXAxis: DateTimeAxis(),
      primaryYAxis: NumericAxis(),
    );
  }
  

关键注意点 #

• 确认目标API返回的是标准JSON格式，若存在格式异常，需在解析阶段添加兼容处理逻辑
• 完善网络请求异常捕获，处理超时、无网络、接口报错等场景
• 若API需要认证或自定义请求头，直接在http.get方法中添加headers参数即可

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