如何在Flutter的SfCartesianChart中展示URL获取的JSON数据

1. 定义数据模型类 #

根据你的JSON结构创建Dart模型类，用于解析和存储数据。假设你的JSON结构如下（可根据实际结构调整）：

[
  {"recordDate": "2024-05-01", "sales": 180},
  {"recordDate": "2024-05-02", "sales": 220},
  {"recordDate": "2024-05-03", "sales": 150}
]

对应的模型类：

class SalesData {
  final String date;
  final double sales;

  SalesData({required this.date, required this.sales});

  // 从JSON对象转换为模型实例
  factory SalesData.fromJson(Map<String, dynamic> json) {
    return SalesData(
      date: json['recordDate'],
      sales: (json['sales'] as num).toDouble(),
    );
  }
}

如果你的JSON是嵌套结构（比如{"data": {"date": "...", "sales": ...}}），只需在fromJson里先提取嵌套层级的字段即可。

2. 从URL获取并解析JSON数据 #

使用http包发起网络请求，将返回的JSON数组解析为模型列表：

import 'package:http/http.dart' as http;
import 'dart:convert';

Future<List<SalesData>> fetchSalesData() async {
  final response = await http.get(Uri.parse('你的JSON数据接口URL'));

  if (response.statusCode == 200) {
    List<dynamic> jsonArray = json.decode(response.body);
    return jsonArray.map((json) => SalesData.fromJson(json)).toList();
  } else {
    throw Exception('加载图表数据失败');
  }
}

3. 在SfCartesianChart中绑定解析后的数据 #

结合FutureBuilder处理异步数据加载，将模型列表作为折线图的数据源：

import 'package:syncfusion_flutter_charts/charts.dart';

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: FutureBuilder<List<SalesData>>(
      future: fetchSalesData(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return SfCartesianChart(
            title: ChartTitle(text: '销售数据折线图'),
            primaryXAxis: CategoryAxis(
              title: AxisTitle(text: '日期'),
            ),
            primaryYAxis: NumericAxis(
              title: AxisTitle(text: '销售额'),
            ),
            series: <ChartSeries>[
              LineSeries<SalesData, String>(
                dataSource: snapshot.data!,
                xValueMapper: (SalesData data, _) => data.date,
                yValueMapper: (SalesData data, _) => data.sales,
                markerSettings: MarkerSettings(isVisible: true),
              )
            ],
          );
        } else if (snapshot.hasError) {
          return Center(child: Text('${snapshot.error}'));
        }
        // 加载中状态
        return const Center(child: CircularProgressIndicator());
      },
    ),
  );
}

关键适配调整 #

• 日期轴适配：如果X轴是时间序列，可将模型类的date字段改为DateTime类型，在fromJson中用DateTime.parse(json['recordDate'])转换，同时将折线图的X轴改为DateTimeAxis，xValueMapper返回data.date即可。
• 数据类型兼容：JSON中的数值可能是int或double，统一转换为double避免图表渲染报错。
• 多系列适配：如果需要绘制多条折线，只需新增LineSeries，并对应不同的yValueMapper字段即可。

内容的提问来源于stack exchange，提问作者Mohammed H. S.