首页 > 解决方案 > Flutter SfCartesianChart 不显示 X 。Y 轴

问题描述

我正在尝试显示价格和日期SfCartesianChart。它向我显示空白图表请检查 json 以及。我试图在折线图中显示产品的价格和日期。

    List<SalesData> chartData = [];

      Container(
            height: 250,
            width: (MediaQuery.of(context).size.width),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.all(
                  Radius.circular(2),
                ),
                color: Color(0xff232d37)),
            child: FutureBuilder(
                future: getJsonFromFirebase(),
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    return SfCartesianChart(primaryXAxis: 
             CategoryAxis(),
                        //  tooltipBehavior: _tooltipBehavior,
                        series: <LineSeries<SalesData, String>>[
                          LineSeries<SalesData, String>(
                              dataSource: chartData,
                              xValueMapper: (SalesData sales, _) =>
                                  sales.date,
                              yValueMapper: (SalesData sales, _) =>
                                  sales.price)
                        ]);
                  } else {
                    return Center(child: 
            CircularProgressIndicator());
                  }
                })),



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

         Future loadSalesData() async {
        final String jsonString = await getJsonFromFirebase();
        final dynamic jsonResponse = json.decode(jsonString);
        for (Map<String, dynamic> i in jsonResponse)
       chartData.add(SalesData.fromJson(i));
             }

       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'],
        );
        }
          }

在此处输入图像描述

在此处输入图像描述

标签: androidflutterflutter-dependencies

解决方案


您必须检索 chartData -->if (snapshot.hasData) { loadSalesData() 并解析您的价格double.parse(parsedJson['price'])


推荐阅读