如何在一张图表中显示三个数据？ （颤振/ fl_chart）
class BottomChart extends StatefulWidget {
final List<String> number;
const BottomChart({this.number});
@override
_BottomChartState createState() => _BottomChartState();
}
class _BottomChartState extends State<BottomChart> {
List<Color> gradientColors = [
const Color(0xff23b6e6),
const Color(0xff02d39a),
];
bool showCnfirmed = true;
bool showRecvred = false;
bool showDead = false;
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
AspectRatio(
aspectRatio: 1 / 3,
child: Container(
child: Padding(
padding: const EdgeInsets.only(right: 0, left: 34.0, top: 24, bottom: 24),
child: LineChart(
if(showCnfirmed){cnfirmedData()}
if(showRecvred){recvredData()}
if(showDead){deadData()}
),
),
),
),
SizedBox(
width: 60,
height: 34,
child: Row(
children: [
FlatButton(
onPressed: () {
setState(() {
showCnfirmed = !showCnfirmed;
});
},
child: Text(
'Confirmed',
style: TextStyle(
fontSize: 12, color: showCnfirmed ? Colors.white.withOpacity(0.5) :Colors.white)
)
),
FlatButton(
onPressed: () {
setState(() {
showRecvred = !showRecvred;
});
},
child: Text(
'Recovered',
style: TextStyle(
fontSize: 12, color: showRecvred ? Colors.white.withOpacity(0.5) :Colors.white)
)
),
FlatButton(
onPressed: () {
setState(() {
showDead = !showDead;
});
},
child: Text(
'Dead',
style: TextStyle(
fontSize: 12, color: showDead ? Colors.white.withOpacity(0.5) :Colors.white)
)
),
],
)
)
],
);
}
}
我厌倦了使用flutter包中的fl_chart制作一个显示三个数据（实际上是折线图中的三个折线）的图表，方法是按其按钮是否被单击。
如您在上面的代码中看到的，我编写了标识符来检查按钮是否被单击，并使用if在LineChart（）部分显示其数据，但是它说，
Performing hot reload...
Syncing files to device Android SDK built for x86...
lib/ui/screens/home_page.dart:106:17: Error: Expected an identifier, but got 'if'.
if(showCnfirmed){cnfirmedData()}
^^
lib/ui/screens/home_page.dart:106:17: Error: Expected ')' before this.
if(showCnfirmed){cnfirmedData()}
^^
在示例代码中，它是这样写的，
LineChart(
showAvg ? avgData() : mainData(),
),
但是该示例涉及两个数据，而我的涉及三个数据。 我该如何解决这个问题？
感谢您阅读，我将等待您的建议！ ：）
1 个答案:
答案 0 :(得分：1)
您可以在下面复制粘贴运行完整代码
您可以使用Map<int, LineChartData>进行选择
并将selection[_selected]传递给LineChart
代码段
Map<int, LineChartData> selection;
int _selected = 0;
@override
void initState() {
selection = {0: cnfirmedData(), 1: recvredData(), 2: deadData()};
super.initState();
}
...
child: LineChart(
selection[_selected],
),
工作演示
完整代码
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
class BottomChart extends StatefulWidget {
@override
_BottomChartState createState() => _BottomChartState();
}
class _BottomChartState extends State<BottomChart> {
List<Color> gradientColors = [
const Color(0xff23b6e6),
const Color(0xff02d39a),
];
Map<int, LineChartData> selection;
int _selected = 0;
bool showAvg = false;
@override
void initState() {
selection = {0: cnfirmedData(), 1: recvredData(), 2: deadData()};
super.initState();
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Stack(
children: <Widget>[
AspectRatio(
aspectRatio: 1 / 3,
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(18),
),
color: Color(0xff232d37)),
child: Padding(
padding: const EdgeInsets.only(
right: 0, left: 34.0, top: 24, bottom: 24),
child: LineChart(
selection[_selected],
),
),
),
),
SizedBox(
width: 300,
height: 34,
child: Row(
children: [
FlatButton(
onPressed: () {
setState(() {
_selected = 0;
});
},
child: Text('Confirmed',
style: TextStyle(
fontSize: 12,
color: _selected == 0
? Colors.white.withOpacity(0.5)
: Colors.white))),
FlatButton(
onPressed: () {
setState(() {
_selected = 1;
});
},
child: Text('Recovered',
style: TextStyle(
fontSize: 12,
color: _selected == 1
? Colors.white.withOpacity(0.5)
: Colors.white))),
FlatButton(
onPressed: () {
print("dead");
setState(() {
_selected = 2;
});
},
child: Text('Dead',
style: TextStyle(
fontSize: 12,
color: _selected == 2
? Colors.white.withOpacity(0.5)
: Colors.white))),
],
))
],
),
);
}
LineChartData cnfirmedData() {
return LineChartData(
gridData: FlGridData(
show: true,
drawVerticalLine: true,
getDrawingHorizontalLine: (value) {
return FlLine(
color: const Color(0xff37434d),
strokeWidth: 1,
);
},
getDrawingVerticalLine: (value) {
return FlLine(
color: const Color(0xff37434d),
strokeWidth: 1,
);
},
),
titlesData: FlTitlesData(
show: true,
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 22,
getTextStyles: (value) => const TextStyle(
color: Color(0xff68737d),
fontWeight: FontWeight.bold,
fontSize: 16),
getTitles: (value) {
switch (value.toInt()) {
case 2:
return 'MAR';
case 5:
return 'JUN';
case 8:
return 'SEP';
}
return '';
},
margin: 8,
),
leftTitles: SideTitles(
showTitles: true,
getTextStyles: (value) => const TextStyle(
color: Color(0xff67727d),
fontWeight: FontWeight.bold,
fontSize: 15,
),
getTitles: (value) {
switch (value.toInt()) {
case 1:
return '10k';
case 3:
return '30k';
case 5:
return '50k';
}
return '';
},
reservedSize: 28,
margin: 12,
),
),
borderData: FlBorderData(
show: true,
border: Border.all(color: const Color(0xff37434d), width: 1)),
minX: 0,
maxX: 11,
minY: 0,
maxY: 6,
lineBarsData: [
LineChartBarData(
spots: [
FlSpot(0, 1),
FlSpot(2.6, 2),
FlSpot(4.9, 3),
FlSpot(6.8, 4.1),
FlSpot(8, 1),
FlSpot(9.5, 3),
FlSpot(11, 4),
],
isCurved: true,
colors: gradientColors,
barWidth: 5,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(
show: true,
colors:
gradientColors.map((color) => color.withOpacity(0.3)).toList(),
),
),
],
);
}
LineChartData recvredData() {
return LineChartData(
lineTouchData: LineTouchData(enabled: false),
gridData: FlGridData(
show: true,
drawHorizontalLine: true,
getDrawingVerticalLine: (value) {
return FlLine(
color: const Color(0xff37434d),
strokeWidth: 1,
);
},
getDrawingHorizontalLine: (value) {
return FlLine(
color: const Color(0xff37434d),
strokeWidth: 1,
);
},
),
titlesData: FlTitlesData(
show: true,
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 22,
getTextStyles: (value) => const TextStyle(
color: Color(0xff68737d),
fontWeight: FontWeight.bold,
fontSize: 16),
getTitles: (value) {
switch (value.toInt()) {
case 2:
return 'MAR';
case 5:
return 'JUN';
case 8:
return 'SEP';
}
return '';
},
margin: 8,
),
leftTitles: SideTitles(
showTitles: true,
getTextStyles: (value) => const TextStyle(
color: Color(0xff67727d),
fontWeight: FontWeight.bold,
fontSize: 15,
),
getTitles: (value) {
switch (value.toInt()) {
case 1:
return '10k';
case 3:
return '30k';
case 5:
return '50k';
}
return '';
},
reservedSize: 28,
margin: 12,
),
),
borderData: FlBorderData(
show: true,
border: Border.all(color: const Color(0xff37434d), width: 1)),
minX: 0,
maxX: 11,
minY: 0,
maxY: 6,
lineBarsData: [
LineChartBarData(
spots: [
FlSpot(0, 3.44),
FlSpot(2.6, 3.44),
FlSpot(4.9, 3.44),
FlSpot(6.8, 3.44),
FlSpot(8, 3.44),
FlSpot(9.5, 3.44),
FlSpot(11, 3.44),
],
isCurved: true,
colors: [
ColorTween(begin: gradientColors[0], end: gradientColors[1])
.lerp(0.2),
ColorTween(begin: gradientColors[0], end: gradientColors[1])
.lerp(0.2),
],
barWidth: 5,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(show: true, colors: [
ColorTween(begin: gradientColors[0], end: gradientColors[1])
.lerp(0.2)
.withOpacity(0.1),
ColorTween(begin: gradientColors[0], end: gradientColors[1])
.lerp(0.2)
.withOpacity(0.1),
]),
),
],
);
}
LineChartData deadData() {
return LineChartData(
gridData: FlGridData(
show: true,
drawVerticalLine: true,
getDrawingHorizontalLine: (value) {
return FlLine(
color: const Color(0xff37434d),
strokeWidth: 1,
);
},
getDrawingVerticalLine: (value) {
return FlLine(
color: const Color(0xff37434d),
strokeWidth: 1,
);
},
),
titlesData: FlTitlesData(
show: true,
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 22,
getTextStyles: (value) => const TextStyle(
color: Color(0xff68737d),
fontWeight: FontWeight.bold,
fontSize: 16),
getTitles: (value) {
switch (value.toInt()) {
case 2:
return 'MAR';
case 5:
return 'JUN';
case 8:
return 'SEP';
}
return '';
},
margin: 8,
),
leftTitles: SideTitles(
showTitles: true,
getTextStyles: (value) => const TextStyle(
color: Color(0xff67727d),
fontWeight: FontWeight.bold,
fontSize: 15,
),
getTitles: (value) {
switch (value.toInt()) {
case 1:
return '10k';
case 3:
return '30k';
case 5:
return '50k';
}
return '';
},
reservedSize: 28,
margin: 12,
),
),
borderData: FlBorderData(
show: true,
border: Border.all(color: const Color(0xff37434d), width: 1)),
minX: 0,
maxX: 11,
minY: 0,
maxY: 6,
lineBarsData: [
LineChartBarData(
spots: [
FlSpot(0, 3),
FlSpot(2.6, 2),
FlSpot(4.9, 5),
FlSpot(6.8, 3.1),
FlSpot(8, 4),
FlSpot(9.5, 3),
FlSpot(11, 4),
],
isCurved: true,
colors: gradientColors,
barWidth: 5,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(
show: true,
colors:
gradientColors.map((color) => color.withOpacity(0.3)).toList(),
),
),
],
);
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: BottomChart(),
);
}
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？