通过Flutter中的API调用的饼图

Question

我正在尝试在来自API的饼图中显示一些数据，但问题是如何将JSON数据应用于饼图中。

Answer 1

我为此创建了一个自定义json。

异步函数可从API获取数据

    _getData() async{
    final response = await http.get('https://api.myjson.com/bins/16e68w');
    Map<String,dynamic> map = json.decode(response.body);
    return map;
  }

将json响应返回为Map<String, dynamic>。我没有解析json。

Scaffold(
  body: FutureBuilder(
      future: _getData(),
      builder: (BuildContext context,AsyncSnapshot snapshot){
        if(snapshot.connectionState == ConnectionState.done)
          return new charts.PieChart(
              dataList(snapshot.data),
              defaultRenderer: new charts.ArcRendererConfig(
                  arcRendererDecorators: [new charts.ArcLabelDecorator()])
          );
        else
          return Center(child: CircularProgressIndicator());
      }
  ),
);

在charts.Series列表中设置数据格式。

我们将为数据生成LinearSales对象的列表。

    static List<charts.Series<LinearSales, int>> dataList(Map<String, dynamic> apiData) {
      List<LinearSales> list = new List();

      for(int i=0; i<apiData['data'].length; i++)
        list.add(new LinearSales(i, apiData['data'][i]));

      return [
        new charts.Series<LinearSales, int>(
          id: 'Sales',
          domainFn: (LinearSales sales, _) => sales.year,
          measureFn: (LinearSales sales, _) => sales.sales,
          data: list,
          labelAccessorFn: (LinearSales row, _) => '${row.year}: ${row.sales}',
        )
      ];
    }
  }

class LinearSales {
  final int year;
  final int sales;
  LinearSales(this.year, this.sales);
}

最终结果