【发布时间】：2020-09-02 07:31:44
【问题描述】：
我想在 Flutter 中创建一个饼图。我在网上观看了几个视频，并在更改了一些参数和参数后进行了复制。我创建的饼图将代表 Recovered、Active 和印度的冠状病毒死亡病例。我要使用的数据来自https://coronavirus-19-api.herokuapp.com/countries
通常，饼图需要 3 个图例，如上所述。我尝试实现此功能，但遇到了非常规错误。我已经获取了数据并用 dart 对其进行了解码，但我很遗憾未能在饼图中实现它。
import 'dart:async';
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:http/http.dart' as http;
void main()=>runApp(App());
class Task{
String task;
int taskvalue;
Color colors;
Task({this.task,this.taskvalue,this.colors});
}
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home:Home()
);
}
}
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
List<dynamic> data;
Map<String,dynamic> statsIndia;
List<charts.Series<Task,String>> _seriesPieData;
int a,b,c;
Future<String> getData() async {
var response = await http.get(
Uri.encodeFull("https://coronavirus-19-api.herokuapp.com/countries"), //https://corona-virus-stats.herokuapp.com/api/v1/cases/countries-search
//https://api.thevirustracker.com/free-api?global=stats print(data["results"][0]["total_cases"])
headers: {
"Accept": "application/json"
}
);
this.setState(() {
data = json.decode(response.body);
statsIndia=data[11];
a = statsIndia["cases"];
b=statsIndia["recovered"];
c = statsIndia["deaths"];
});
return "Sucesss!";
}
get(){
var piedata=[
new Task(task: "Confirmed",taskvalue: a,colors:Color(0xFF003cbf)),
new Task(task: "Recovered",taskvalue: b,colors:Color(0xFF06cafd)),
new Task(task:"Deaths",taskvalue: c,colors:Color(0xFFff5c4d))
];
_seriesPieData.add(
charts.Series(
data:piedata,
domainFn: (Task task,_)=>task.task,
measureFn: (Task task,_)=>task.taskvalue,
colorFn: (Task task,_)=>
charts.ColorUtil.fromDartColor(task.colors),
id:"India",
labelAccessorFn: (Task row,_)=>'${row.taskvalue}',
)
);
}
@override
void initState() {
super.initState();
this.getData();
_seriesPieData=List<charts.Series<Task,String>>();
get();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child:Padding(
padding:EdgeInsets.all(8.0),
child:Container(
child:Center(
child:Column(
children: <Widget>[
Text("Stats"),
Expanded(
child:charts.PieChart(
_seriesPieData,
animate: true,
animationDuration: Duration(seconds:5),
behaviors: [
new charts.DatumLegend(
outsideJustification: charts.OutsideJustification.endDrawArea,
horizontalFirst: false,
desiredMaxRows: 2,
cellPadding: new EdgeInsets.only(right:4.0,bottom:4.0),
entryTextStyle: charts.TextStyleSpec(
color:charts.MaterialPalette.purple.shadeDefault,
fontFamily: "Montserrat",
fontSize: 11),
),
],
defaultRenderer: new charts.ArcRendererConfig(
arcWidth: 50,
arcRendererDecorators: [
new charts.ArcLabelDecorator(
labelPosition: charts.ArcLabelPosition.inside
)
]
),
),
)
],
)
)
)
)
),
);
}
}
序列化 json 没有问题。噩梦在于将其可视化为饼图。因此，必须用于绘制饼图的数据存储在 statsIndia 中。经过数小时的调试，我无法弄清楚出了什么问题。错误日志是
I/flutter ( 5237): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 5237): The following RangeError was thrown during performLayout():
I/flutter ( 5237): RangeError (index): Invalid value: Valid value range is empty: 0
I/flutter ( 5237):
I/flutter ( 5237): The relevant error-causing widget was:
I/flutter ( 5237): ChartContainer<dynamic>
I/flutter ( 5237): file:///C:/flutter/flutter/.pub-cache/hosted/pub.dartlang.org/charts_flutter-0.9.0/lib/src/base_chart_state.dart:89:32
I/flutter ( 5237):
I/flutter ( 5237): When the exception was thrown, this was the stack:
I/flutter ( 5237): #0 List.[] (dart:core-patch/growable_array.dart:146:60)
I/flutter ( 5237): #1 ArcRenderer.update.<anonymous closure> (package:charts_common/src/chart/pie/arc_renderer.dart:231:39)
I/flutter ( 5237): #2 List.forEach (dart:core-patch/growable_array.dart:282:8)
I/flutter ( 5237): #3 ArcRenderer.update (package:charts_common/src/chart/pie/arc_renderer.dart:176:16)
I/flutter ( 5237): #4 BaseChart.onPostLayout.<anonymous closure> (package:charts_common/src/chart/common/base_chart.dart:584:37)
I/flutter ( 5237): #5 _LinkedHashMapMixin.forEach (dart:collection-patch/compact_hash.dart:379:8)
I/flutter ( 5237): #6 BaseChart.onPostLayout (package:charts_common/src/chart/common/base_chart.dart:583:10)
I/flutter ( 5237): #7 BaseChart.layout (package:charts_common/src/chart/common/base_chart.dart:398:7)
I/flutter ( 5237): #8 ChartContainerRenderObject.performLayout (package:charts_flutter/src/chart_container.dart:215:12)
I/flutter ( 5237): #9 RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5237): #10 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5237): #11 RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5237): #12 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5237): #13 RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5237): #14 MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:171:11)
I/flutter ( 5237): #15 WidgetLayoutDelegate.performLayout (package:charts_flutter/src/widget_layout_delegate.dart:80:7)
I/flutter ( 5237): #16 MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:240:7)
I/flutter ( 5237): #17 RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:399:14)
I/flutter ( 5237): #18 RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5237): #19 RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:808:17)
I/flutter ( 5237): #20 RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5237): #21 RenderPositionedBox.performLayout (package:flutter/src/rendering/shifted_box.dart:394:13)
I/flutter ( 5237): #22 RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5237): #23 RenderPadding.performLayout (package:flutter/src/rendering/shifted_box.dart:207:11)
I/flutter ( 5237): #24 RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5237): #25 MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:171:11)
I/flutter ( 5237): #26 _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:484:7)
I/flutter ( 5237): #27 MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:240:7)
I/flutter ( 5237): #28 RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:399:14)
I/flutter ( 5237): #29 RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5237): #30 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5237): #31 RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5237): #32 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5237): #33 _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1248:11)
I/flutter ( 5237): #34 RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5237): #35 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5237): #36 RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5237): #37 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5237): #38 RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5237): #39 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5237): #40 RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5237): #41 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5237): #42 RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5237): #43 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5237): #44 RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5237): #45 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5237): #46 RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5237): #47 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5237): #48 RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5237): #49 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5237): #50 RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.dart:3225:13)
I/flutter ( 5237): #51 RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5237): #52 _RenderTheatre.performLayout (package:flutter/src/widgets/overlay.dart:700:15)
I/flutter ( 5237): #53 RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5237): #54 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5237): #55 RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5237): #56 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5237): #57 RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5237): #58 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5237): #59 RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5237): #60 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5237): #61 RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5237): #62 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5237): #63 RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5237): #64 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5237): #65 RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5237): #66 RenderView.performLayout (package:flutter/src/rendering/view.dart:167:13)
I/flutter ( 5237): #67 RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1630:7)
I/flutter ( 5237): #68 PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:887:18)
I/flutter ( 5237): #69 RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:402:19)
I/flutter ( 5237): #70 WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:884:13)
I/flutter ( 5237): #71 RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:284:5)
I/flutter ( 5237): #72 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1113:15)
I/flutter ( 5237): #73 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1052:9)
I/flutter ( 5237): #74 SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> (package:flutter/src/scheduler/binding.dart:861:7)
I/flutter ( 5237): (elided 11 frames from class _RawReceivePortImpl, class _Timer, dart:async, and dart:async-patch)
I/flutter ( 5237):
I/flutter ( 5237): The following RenderObject was being processed when the exception was fired: ChartContainerRenderObject<dynamic>#9a7c9 NEEDS-LAYOUT NEEDS-PAINT:
I/flutter ( 5237): creator: ChartContainer<dynamic> ← _PointerListener ← Listener ← _GestureSemantics ←
I/flutter ( 5237): RawGestureDetector ← GestureDetector ← LayoutId-[<chartContainer>] ← CustomMultiChildLayout ←
I/flutter ( 5237): PieChart<dynamic> ← Expanded ← Column ← Center ← ⋯
I/flutter ( 5237): parentData: <none> (can use size)
I/flutter ( 5237): constraints: BoxConstraints(w=395.4, h=651.4)
I/flutter ( 5237): semantic boundary
I/flutter ( 5237): size: MISSING
I/flutter ( 5237): This RenderObject has no descendants.
I/flutter ( 5237): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter ( 5237): Another exception was thrown: RenderBox was not laid out: ChartContainerRenderObject<dynamic>#9a7c9 NEEDS-PAINT
I/flutter ( 5237): Another exception was thrown: RenderBox was not laid out: RenderPointerListener#7e538 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 5237): Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#5b0cd NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 5237): Another exception was thrown: RenderBox was not laid out: ChartContainerRenderObject<dynamic>#9a7c9
I/flutter ( 5237): Another exception was thrown: RangeError (index): Invalid value: Valid value range is empty: 0
I/flutter ( 5237): Another exception was thrown: RenderBox was not laid out: ChartContainerRenderObject<dynamic>#9a7c9 NEEDS-PAINT
I/flutter ( 5237): Another exception was thrown: RenderBox was not laid out: RenderPointerListener#7e538 NEEDS-PAINT
I/flutter ( 5237): Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#5b0cd NEEDS-PAINT
I/flutter ( 5237): Another exception was thrown: RenderBox was not laid out: ChartContainerRenderObject<dynamic>#9a7c9
I/flutter ( 5237): Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#5b0cd NEEDS-PAINT
I/flutter ( 5237): Another exception was thrown: RenderBox was not laid out: ChartContainerRenderObject<dynamic>#9a7c9
I/flutter ( 5237): Another exception was thrown: 'package:flutter/src/rendering/object.dart': Failed assertion: line 1697 pos 12: '!_debugDoingThisLayout': is not true.
I/flutter ( 5237): Another exception was thrown: RangeError (index): Invalid value: Valid value range is empty: 0
I/flutter ( 5237): Another exception was thrown: RenderBox was not laid out: ChartContainerRenderObject<dynamic>#9a7c9 NEEDS-PAINT
I/flutter ( 5237): Another exception was thrown: RenderBox was not laid out: ChartContainerRenderObject<dynamic>#9a7c9
I/flutter ( 5237): Another exception was thrown: 'package:flutter/src/rendering/object.dart': Failed assertion: line 1697 pos 12: '!_debugDoingThisLayout': is not true.
I/flutter ( 5237): Another exception was thrown: RenderBox was not laid out: ChartContainerRenderObject<dynamic>#9a7c9
【问题讨论】：
标签： json api flutter dart charts