如何在颤音中显示sfcartesianchart中的JSON数据？

Question

请帮助..我试图将JSON数据放入扑动图表中

。 '包装：颤音/材料.dart'; 导入'软件包：syncfusion_flutter_charts/charts.dart';

import '../constant/app_colors.dart';
import '../models/chart_model.dart';

class CustomChartData extends StatefulWidget {
  const CustomChartData({Key? key}) : super(key: key);

  @override
  State<CustomChartData> createState() => _CustomChartDataState();
}

class _CustomChartDataState extends State<CustomChartData> {
  TooltipBehavior? _tooltipBehavior;

  @override
  void initState() {
    _tooltipBehavior = TooltipBehavior(
      enable: true,
      color: AppColors.primaryColor,
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;
    return SizedBox(
      width: width * 0.95,
      height: height * 0.35,
      child: SfCartesianChart(
        primaryXAxis: CategoryAxis(),
        legend: Legend(isVisible: false),
        tooltipBehavior: _tooltipBehavior,
        series: <LineSeries<SalesData, String>>[
          LineSeries<SalesData, String>(
            dataSource: <SalesData>[
              SalesData('Mon', 25),
              SalesData('Tue', 50),
              SalesData('Wed', 70),
              SalesData('Thu', 80),
              SalesData('Fri', 105),
              SalesData('Sat', 105),
              SalesData('Sun', 105),
            ],
            xValueMapper: (SalesData sales, _) => sales.year,
            yValueMapper: (SalesData sales, _) => sales.sales,
          ),
        ],
      ),
    );
  }
}

JSON数据

{
    "expense_data": [
        {
            "date": "2022-07-05",
            "total": 123
        }
    ]
}

数据模型

class ExpenseDatum {
    ExpenseDatum({
        this.date,
        this.total,
    });

    DateTime date;
    int total;

    factory ExpenseDatum.fromJson(Map<String, dynamic> json) => ExpenseDatum(
        date: DateTime.parse(json["date"]),
        total: json["total"],
    );

    Map<String, dynamic> toJson() => {
        "date": "${date.year.toString().padLeft(4, '0')}-${date.month.toString().padLeft(2, '0')}-${date.day.toString().padLeft(2, '0')}",
        "total": total,
    };
}

图表

[在此处输入图像说明] [1]

[1]: https://i.sstatic.net/N6i8x.png

常数

const baseURL = 'https://www.any****.app/api';
const expenseURL = baseURL + '/expense';

// ----- Errors -----
const serverError = 'Server error';
const unauthorized = 'Unauthorized';
const somethingWentWrong = 'Something went wrong, try again!';

getExpenses

    Future<ApiResponse> getExpense() async {
      ApiResponse apiResponse = ApiResponse();
      try {
        String token = await getToken();
        final response = await http.get(Uri.parse(expenseURL), headers: {
          'Accept': 'application/json',
          'Authorization': 'Bearer $token'
        });
        print(response.body);
        print(token);
        switch (response.statusCode) {
          case 200:
            apiResponse.data = User.fromJson(jsonDecode(response.body));
            break;
          case 401:
            apiResponse.error = unauthorized;
            break;
          default:
            apiResponse.error = somethingWentWrong;
            break;
        }
      } catch (e) {
        apiResponse.error = serverError;
      }
      return apiResponse;
    }