dart - 有没有办法调用 4 个 API，然后创建一个列表并绘制一个饼图

Question

我需要在同一台服务器上调用 4 个 API，然后使用结果创建一个列表，并希望传递相同的列表来创建饼图。

我已经创建了一个列表，但无法在饼图中传递该列表。

main() async {
 // returned dataset example:
 //  [{females: 1367341, country: Brazil, age: 18, males: 1368729, 
year: 1980, total: 2736070}]
 final age18data = await getJson(
    'http://api.population.io:80/1.0/population/2019/India/18/');
final age30data = await getJson(
  'http://api.population.io:80/1.0/population/2019/India/30/');
final age45data = await getJson(
  'http://api.population.io:80/1.0/population/2019/India/45/');
final age60data = await getJson(
  'http://api.population.io:80/1.0/population/2019/India/60/');

final values = [
age18data[0]["total"],
age30data[0]["total"],
age45data[0]["total"],
age60data[0]["total"]

];

到目前为止我已经完成了，现在我想使用这些值列表使用 charts_flutter 包绘制饼图

Answer 1

给你，对同一个服务器的 4 个 api 调用，以及一个饼图:

import "dart:math" as math;
import "dart:io";
import "dart:convert";

main() async {
  // returned dataset example:
  //  [{females: 1367341, country: Brazil, age: 18, males: 1368729, year: 1980, total: 2736070}]
  final age18data = await getJson(
      'http://api.population.io:80/1.0/population/2019/India/18/');
  final age30data = await getJson(
      'http://api.population.io:80/1.0/population/2019/India/30/');
  final age45data = await getJson(
      'http://api.population.io:80/1.0/population/2019/India/45/');
  final age60data = await getJson(
      'http://api.population.io:80/1.0/population/2019/India/60/');

  final values = [
    age18data[0]["total"],
    age30data[0]["total"],
    age45data[0]["total"],
    age60data[0]["total"]
  ];

  final allTotal = values[0] + values[1] + values[2] + values[3];

  final proportion = values.map((v) => v / allTotal).toList();

  print("Population of India:");
  print("A - 18 y.o. ${values[0]} (${proportion[0]})");
  print("B - 25 y.o. ${values[1]} (${proportion[1]})");
  print("C - 45 y.o. ${values[2]} (${proportion[2]})");
  print("D - 60 y.o. ${values[3]} (${proportion[3]})");

  final labels = ["A", "B", "C", "D"];

  asciiPieChart(labels, proportion);
}

Future<dynamic> getJson(String url) async {
  var request =
      await HttpClient().getUrl(Uri.parse(url)); // produces a request object
  var response = await request.close(); // sends the request

  var body = await response.transform(Utf8Decoder()).join("");

  return json.decode(body);
}

void asciiPieChart(dynamic k, dynamic v) {
  // adapted from javascript version:
  // https://codegolf.stackexchange.com/a/23351/18464
  dynamic d, y, s, x, r, a, i, f, p, t, j;

  r = 10.0;
  d = r * 2;
  p = [];
  for (y = 0; y < d; y++) {
    p.add([]);
    for (x = 0; x < d; x++) p[y].add(" ");
  }
  t = 0;
  i = -1;
  for (f = 0; f < 1; f += 1 / (r * 20)) {
    if (f > t) t += v[++i];
    a = math.pi * 2 * f;
    for (j = 0; j < r; j++) {
      int px = ((math.sin(a) * j).round() + r).toInt();
      int py = ((math.cos(a) * j).round() + r).toInt();

      p[px][py] = k[i < 0 ? k.length + i : i];
    }
  }
  s = "";
  for (y = 0; y < d; y++) {
    for (x = 0; x < d; x++) s += p[y][x];
    s += "\n";
  }

  print(s);
}

运行 dart example.dart 打印出:

Population of India:
A - 18 y.o. 25026690 (0.33671242865945705)
B - 25 y.o. 22643410 (0.30464746133954734)
C - 45 y.o. 16325200 (0.21964142043359983)
A - 60 y.o. 10331300 (0.13899868956739578)

       CCCCCCC
     CCCCCCCCCCC
    CCCCCCCCCCCCD
   BBCCCCCCCCCCDDD
  BBBBCCCCCCCCDDDDD
  BBBBBCCCCCCDDDDDD
 BBBBBBBCCCCCDDDDDDD
 BBBBBBBCCCDDDDDDDDD
 BBBBBBBBCCDDDDDDDDD
 BBBBBBBBBDDDDDDDDDD
 BBBBBBBBBAAAAAAAAAA
 BBBBBBBBBAAAAAAAAAA
 BBBBBBBBAAAAAAAAAAA
  BBBBBBAAAAAAAAAAA
  BBBBBBAAAAAAAAAAA
   BBBBAAAAAAAAAAA
    BBBAAAAAAAAAA
     BAAAAAAAAAA
       AAAAAAA

您当然可以应用相同的想法并使用不同的制图方法，例如，如 https://google.github.io/charts/flutter/example/pie_charts/donut.html

使用 https://pub.dartlang.org/packages/http 也可以更轻松地执行 http 请求