Flutter中通过API调用的饼图答案

【问题标题】：Pie chart through API call in FlutterFlutter中通过API调用的饼图
【发布时间】：2018-12-18 09:51:46
【问题描述】：

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

【问题讨论】：

你为此使用任何软件包吗？
是的，我正在使用 charts_flutter 并用于 JSON 解析 http

【解决方案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;
  }

以Map<String, dynamic> 的形式返回 json 响应。我没有解析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);
}

最终结果

【讨论】：

我已经更新了答案。现在它从 API 获取数据。希望这能解决您的问题。
我想要完整的例子，包括 main 方法。我在调试时遇到问题。
这里是完整代码gist.github.com/armaansandhu/5d60c4492722b85097f2944e77ddf03b
发生异常。 _TypeError（类型 'List' 不是类型 'Map' 的子类型）
我认为您传递的是 Array 而不是 Map。尝试一个新的颤振项目。只需将确切的代码粘贴到“main.dart”中即可。这是一个完美的工作代码。