【发布时间】：2021-01-24 06:27:27
【问题描述】：
我有一个调用特定用户并返回数据集的 API。我需要根据它们的类别将这些数据设置为条形图。宏观类别数据的条形图和微观类别数据的条形图。
这是我得到的 API 响应
{
"id": 17,
"activity_level_name": "Low Activity (<1hr/day)",
"age": 2,
"birth_day": "12",
"birth_month": "12",
"birth_year": "2018",
"breed_name": "Australian Kelpie",
"daily_allowance_guidelines_details": [
{
"name": "Muscle Meat",
"bones": true,
"percentage": 60
},
{
"name": "Organ Meat",
"bones": false,
"percentage": 10
},
{
"name": "Fruit and Veg",
"bones": false,
"percentage": 20
},
{
"name": "Bone",
"bones": true,
"percentage": 10
}
],
"eatbone": true,
"ideal_weight": 12,
"image": {
"url": null,
"thumb": {
"url": null
}
},
"imperial_weight": 0.38801399999999997,
"name": "gummy",
"nutrient_guideline_detail": [
{
"name": "Protein",
"amount": 25.82,
"unit": "g",
"imperial_amount": "0.91"
},
{
"name": "Crude fat",
"amount": 7.92,
"unit": "g",
"imperial_amount": "0.28"
},
{
"name": "Calcium/Phosphorus ratio",
"amount": 1.15,
"unit": "ratio",
"imperial_amount": "N/A"
},
{
"name": "Omega-3/6 ratio",
"amount": 0.14,
"unit": "ratio",
"imperial_amount": "N/A"
},
{
"name": "Omega-6",
"amount": 1.61,
"unit": "g",
"imperial_amount": "0.06"
},
{
"name": "Omega-3 excl. ALA and SDA",
"amount": 0.06,
"unit": "g",
"imperial_amount": "0.0"
},
{
"name": "Calcium",
"amount": 0.72,
"unit": "g",
"imperial_amount": "0.03"
},
{
"name": "Phosphorus",
"amount": 0.57,
"unit": "g",
"imperial_amount": "0.02"
},
{
"name": "Potassium",
"amount": 0.86,
"unit": "g",
"imperial_amount": "0.03"
},
{
"name": "Sodium (Na)",
"amount": 0.11,
"unit": "mg",
"imperial_amount": "0.000004048114788"
},
{
"name": "Magnesium",
"amount": 0.09,
"unit": "mg",
"imperial_amount": "0.000003036086091"
},
{
"name": "Iron",
"amount": 5.74,
"unit": "mg",
"imperial_amount": "0.0002024057394"
},
{
"name": "Copper",
"amount": 1.05,
"unit": "mg",
"imperial_amount": "0.0000370402503102"
},
{
"name": "Manganese",
"amount": 0.72,
"unit": "mg",
"imperial_amount": "0.000025300717425"
},
{
"name": "Zinc (Zn)",
"amount": 11.48,
"unit": "mg",
"imperial_amount": "0.0004048114788"
},
{
"name": "Iodine",
"amount": 143.45,
"unit": "mcg",
"imperial_amount": "0.000005060143485"
},
{
"name": "Selenium",
"amount": 0.05,
"unit": "mcg",
"imperial_amount": "0.0000000016192459152"
},
{
"name": "Vitamin A",
"amount": 215.18,
"unit": "mcg",
"imperial_amount": "0.0000075902152275"
},
{
"name": "Vitamin D",
"amount": 1.78,
"unit": "mcg",
"imperial_amount": "0.000000062745779214"
},
{
"name": "Vitamin E",
"amount": 6.46,
"unit": "mg",
"imperial_amount": "0.000227706456825"
},
{
"name": "Thiamin (B1)",
"amount": 0.32,
"unit": "mg",
"imperial_amount": "0.000011334721406400002024057394"
},
{
"name": "Riboflavin (B2)",
"amount": 0.75,
"unit": "mg",
"imperial_amount": "0.000026312746122"
},
{
"name": "Niacin (B3)",
"amount": 1.95,
"unit": "mg",
"imperial_amount": "0.000068817951396"
},
{
"name": "Pantothenic acid (B5)",
"amount": 1.72,
"unit": "mg",
"imperial_amount": "0.00006072172182"
},
{
"name": "Folate",
"amount": 30.99,
"unit": "mcg",
"imperial_amount": "0.00000109299099276"
},
{
"name": "Choline",
"amount": 195.1,
"unit": "mg",
"imperial_amount": "0.0068817951396"
},
{
"name": "Vitamin C",
"amount": 0,
"unit": "mg",
"imperial_amount": "0.0"
}
],
"pet_life_stage_name": null,
"sex": "male",
"total_daily_calories": "573.81",
"weight": 11
}
如何检索这些数据并将它们绑定到条形图。到目前为止，我已经实现了这条聊天线
child: Column(
...
children: [
ChartLine(title: 'Fat', number: 1800, rate: 1),
....
ChartLine 类
class ChartLine extends StatelessWidget {
const ChartLine({
Key key,
@required this.rate,
@required this.title,
this.number,
}) : assert(title != null),
assert(rate != null),
assert(rate > 0),
assert(rate <= 1),
super(key: key);
final double rate;
final String title;
final int number;
final int _baseDurationMs = 1000;
final double _maxElementWidth = 100;
@override
Widget build(BuildContext context) {
return ControlledAnimation(
duration: Duration(milliseconds: (rate * _baseDurationMs).round()),
tween: Tween(begin: 0.0, end: rate),
builder: (context, animatedHeight) {
return LayoutBuilder(builder: (context, constraints) {
final lineWidget = constraints.maxWidth * animatedHeight;
// ignore: deprecated_member_use
return
Padding(
padding: const EdgeInsets.only(bottom:8.0),
child:
Column(
crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
constraints: BoxConstraints(minWidth: lineWidget),
child: IntrinsicWidth(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
title,
style: TextStyle(
fontSize: 16.0, color: Colors.black87, fontWeight: FontWeight.w400
),
),
if (number != null)
Text(
number.toString(),
style: TextStyle(
fontSize: 16.0, color: Colors.black87, fontWeight: FontWeight.w500
),
),
],
),
),
),
Container(
color: Color(0xFF32BEFA),
height: 24,
width: lineWidget,
),
],
),
);
});
});
}
}
谁能帮我实现这个目标？一个代码示例会有很大帮助。提前谢谢你们。
【问题讨论】：
标签： json rest flutter bar-chart