我想从Json文件中为X和Y轴添加标签。我不知道如何在文件中的图形中添加标签。这是我的Json文件,
[
{
"saleyear": "2015",
"saleval": "10",
"salelabel": "first"
},
{
"saleyear": "2016",
"saleval": "30",
"salelabel": "second"
},
{
"saleyear": "2017",
"saleval": "40",
"salelabel": "third"
},
{
"saleyear": "2018",
"saleval": "10",
"salelabel": "fourth"
}
]
这是我的代码,可以显示来自Json文件的X和Y轴数据,
import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
import 'dart:convert';
class HomePage extends StatefulWidget {
final Widget child;
HomePage({Key key, this.child}) : super(key: key);
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List<charts.Series<Sales, String>> seriesBarData;
_generateData() async {
final load =
await DefaultAssetBundle.of(context).loadString("asset/data.json");
var decoded = json.decode(load);
List<Sales> sales = [];
for (var item in decoded) {
sales.add(Sales.fromJson(item));
}
seriesBarData.add(charts.Series(
data: sales,
domainFn: (Sales sales, _) => sales.saleyear,
measureFn: (Sales sales, _) => int.parse(sales.saleval),
//colorFn: (Sales sales, _) => charts.ColorUtil.fromDartColor(Color(int.parse(sales.salelabel))),
id: 'Performance',
//labelAccessorFn: (Sales row,_)=>"${row.saleyear}",
));
setState(() {});
}
@override
void initState() {
super.initState();
seriesBarData = List<charts.Series<Sales, String>>();
_generateData();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.cyan,
title: Text('flutter charts'),
),
body: Column(
children: [
Text(
'Frame per Second',
style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
),
SizedBox(
height: 10.0,
),
if (seriesBarData.length > 0)
Expanded(
child: charts.BarChart(
seriesBarData,
animate: true,
animationDuration: Duration(seconds: 5),
domainAxis: new charts.OrdinalAxisSpec(
viewport: new charts.OrdinalViewport('AePS', 9),
),
behaviors: [
new charts.ChartTitle('Time,seconds',
// titleStyleSpec: chartsCommon.TextStyleSpec(fontSize: 11),
titleOutsideJustification:
charts.OutsideJustification.middleDrawArea),
new charts.ChartTitle('Number of Frames',
behaviorPosition: charts.BehaviorPosition.start,
// titleStyleSpec: chartsCommon.TextStyleSpec(fontSize: 11),
titleOutsideJustification:
charts.OutsideJustification.middleDrawArea),
new charts.DatumLegend(),
],
),
)
else
Container(),
],
),
);
}
}
class Sales {
String saleyear;
String saleval;
String salelabel;
Sales(this.saleyear, this.saleval, this.salelabel);
Sales.fromJson(Map<String, dynamic> json) {
saleyear = json['saleyear'];
saleval = json['saleval'];
salelabel = json['salelabel'];
}
}
但是在这里,我使用行为通过硬编码数据在X和Y轴上显示标签,但是我不知道如何设置它,以便可以直接显示本地json文件或后端的数据。