Flutter对接JSON API实现折线图适配新JSON格式代码修改咨询

核心修改围绕新JSON结构调整解析逻辑即可，新返回的JSON数组仅包含1个对象，对象的键为日期、值为对应价格，无需保留原有针对date/price字段的解析逻辑。

具体修改点 #

1. 重写loadSalesData解析逻辑 #

调整遍历规则，直接取数组第一个元素的键值对生成SalesData实例，同时新增清空旧数据的逻辑避免重复加载数据叠加：

Future<void> loadSalesData() async {
  // 加载前清空历史数据
  chartData.clear();
  final String jsonString = await getJsonFromFirebase(productasin);
  final dynamic jsonResponse = json.decode(jsonString);
  // 取数组首位的日期-价格映射表
  final Map<String, dynamic> datePriceMap = jsonResponse[0];
  // 遍历所有键值对生成图表数据
  datePriceMap.forEach((date, price) {
    chartData.add(SalesData(
      date,
      double.parse(price.toString()),
    ));
  });
  // 可选：按日期排序，避免API返回键顺序混乱导致折线异常
  chartData.sort((a, b) => a.date.compareTo(b.date));
}

2. 修正FutureBuilder冗余请求问题 #

原有代码中FutureBuilder和loadSalesData会重复发起两次API请求，直接将future替换为loadSalesData即可：

child: FutureBuilder(
  future: loadSalesData(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      return SfCartesianChart(
        trackballBehavior: _trackballBehavior,
        primaryXAxis: CategoryAxis(
          majorGridLines: MajorGridLines(width: 0),
          axisLine: AxisLine(width: 0),
        ),
        primaryYAxis: NumericAxis(
          edgeLabelPlacement: EdgeLabelPlacement.shift,
          majorGridLines: MajorGridLines(width: 0),
          axisLine: AxisLine(width: 0)),
        tooltipBehavior: _tooltipBehavior,
        series: <ChartSeries<SalesData, String>>[
          StackedAreaSeries<SalesData, String>(
            dataLabelSettings: DataLabelSettings(
              isVisible: true,
              labelAlignment: ChartDataLabelAlignment.top,
              useSeriesColor: true,
              showCumulativeValues: true,
            ),
            name: 'Price',
            dataSource: chartData,
            borderColor: Colors.white,
            borderWidth: 2,
            xValueMapper: (SalesData sales, _) => sales.date,
            yValueMapper: (SalesData sales, _) => sales.price,
            markerSettings: MarkerSettings(isVisible: true)
          )
        ]);
    } else {
      return Center(child: CircularProgressIndicator());
    }
  }
),

3. 可选冗余代码清理 #

原有SalesData的fromJson工厂方法现在已经不需要使用，可以直接删除，不影响功能运行。

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