如何在 flutter 图表中旋转文本?
How to rotate text in flutter charts?
我正在尝试在 flutter 应用程序中设计一个图表,显示根据时间或日期绘制的数据(取决于按下的按钮),但是,我 运行 遇到了图表标签文本运行的问题彼此。
我想知道是否有办法旋转 fl_chart 对象 LineChartData 中的文本,以倾斜或垂直旋转显示日期或时间?
到目前为止,我的代码看起来像这样,图表的输出像这样:
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:sembast/timestamp.dart';
import '../models/outcome.dart';
dynamic grapher() {
return Stack(
children: <Widget>[
AspectRatio(
aspectRatio: 1.70,
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(18),
),
color: Colors.black),
child: Padding(
padding: const EdgeInsets.only(
right: 18.0, left: 12.0, top: 24, bottom: 12),
child: LineChart(
mainData(),
),
),
),
),
],
);
}
LineChartData mainData() {
return LineChartData(
...
titlesData: FlTitlesData(
show: true,
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 22,
textStyle: const TextStyle(
color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16),
getTitles: (value) {
//return value.round().toString();
for (int i = 0; i <= outcomeList.length; i++) {
return outcomeList[i].recordedTime.toString();
}
},
margin: 8,
),
...
),
...
}
List<FlSpot> datapoints = [
FlSpot(0, outcomeList[0].value),
FlSpot(2.6, outcomeList[1].value),
FlSpot(4.9, outcomeList[2].value),
FlSpot(6.8, outcomeList[3].value),
FlSpot(8, outcomeList[4].value),
FlSpot(10, outcomeList[5].value),
];
List<Outcome> outcomeList = [
Outcome(name: 'mood', recordedTime: Timestamp.now(), value: 5.6),
Outcome(
name: 'mood',
recordedTime:
Timestamp.fromDateTime(DateTime.now().add(new Duration(hours: 1))),
value: 6.7),
Outcome(
name: 'mood',
recordedTime:
Timestamp.fromDateTime(DateTime.now().add(new Duration(hours: 2))),
value: 5.5),
Outcome(
name: 'mood',
recordedTime:
Timestamp.fromDateTime(DateTime.now().add(new Duration(hours: 3))),
value: 6.2),
Outcome(
name: 'mood',
recordedTime:
Timestamp.fromDateTime(DateTime.now().add(new Duration(hours: 4))),
value: 7.7),
Outcome(
name: 'mood',
recordedTime: Timestamp.fromDateTime(
DateTime.now().add(new Duration(hours: 5, minutes: 26))),
value: 6.4),
];
您可以使用 SideTitles
的属性 rotateAngle
完整代码是官方演示 LineChartSample7
使用 rotateAngle
您可以在下面看到工作演示的红色矩形
代码片段
SideTitles(
rotateAngle: 90,
showTitles: true,
工作演示
完整代码
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
class LineChartSample7 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SizedBox(
width: 300,
height: 140,
child: LineChart(
LineChartData(
lineTouchData: LineTouchData(enabled: false),
lineBarsData: [
LineChartBarData(
spots: [
FlSpot(0, 4),
FlSpot(1, 3.5),
FlSpot(2, 4.5),
FlSpot(3, 1),
FlSpot(4, 4),
FlSpot(5, 6),
FlSpot(6, 6.5),
FlSpot(7, 6),
FlSpot(8, 4),
FlSpot(9, 6),
FlSpot(10, 6),
FlSpot(11, 7),
],
isCurved: true,
barWidth: 2,
colors: [
Colors.green,
],
dotData: FlDotData(
show: false,
),
),
LineChartBarData(
spots: [
FlSpot(0, 0),
FlSpot(1, 3),
FlSpot(2, 4),
FlSpot(3, 5),
FlSpot(4, 8),
FlSpot(5, 3),
FlSpot(6, 5),
FlSpot(7, 8),
FlSpot(8, 4),
FlSpot(9, 7),
FlSpot(10, 7),
FlSpot(11, 8),
],
isCurved: true,
barWidth: 2,
colors: [
Colors.black,
],
dotData: FlDotData(
show: false,
),
),
LineChartBarData(
spots: [
FlSpot(0, 7),
FlSpot(1, 3),
FlSpot(2, 4),
FlSpot(3, 0),
FlSpot(4, 3),
FlSpot(5, 4),
FlSpot(6, 5),
FlSpot(7, 3),
FlSpot(8, 2),
FlSpot(9, 4),
FlSpot(10, 1),
FlSpot(11, 3),
],
isCurved: false,
barWidth: 2,
colors: [
Colors.red,
],
dotData: FlDotData(
show: false,
),
),
],
betweenBarsData: [
BetweenBarsData(
fromIndex: 0,
toIndex: 2,
colors: [Colors.red.withOpacity(0.3)],
)
],
minY: 0,
titlesData: FlTitlesData(
bottomTitles: SideTitles(
rotateAngle: 90,
showTitles: true,
textStyle:
TextStyle(fontSize: 10, color: Colors.purple, fontWeight: FontWeight.bold),
getTitles: (value) {
switch (value.toInt()) {
case 0:
return 'Jan';
case 1:
return 'Feb';
case 2:
return 'Mar';
case 3:
return 'Apr';
case 4:
return 'May';
case 5:
return 'Jun';
case 6:
return 'Jul';
case 7:
return 'Aug';
case 8:
return 'Sep';
case 9:
return 'Oct';
case 10:
return 'Nov';
case 11:
return 'Dec';
default:
return '';
}
}),
leftTitles: SideTitles(
showTitles: true,
getTitles: (value) {
return '$ ${value + 0.5}';
},
),
),
gridData: FlGridData(
show: true,
checkToShowHorizontalLine: (double value) {
return value == 1 || value == 6 || value == 4 || value == 5;
},
),
),
),
);
}
}
我正在尝试在 flutter 应用程序中设计一个图表,显示根据时间或日期绘制的数据(取决于按下的按钮),但是,我 运行 遇到了图表标签文本运行的问题彼此。
我想知道是否有办法旋转 fl_chart 对象 LineChartData 中的文本,以倾斜或垂直旋转显示日期或时间?
到目前为止,我的代码看起来像这样,图表的输出像这样:
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:sembast/timestamp.dart';
import '../models/outcome.dart';
dynamic grapher() {
return Stack(
children: <Widget>[
AspectRatio(
aspectRatio: 1.70,
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(18),
),
color: Colors.black),
child: Padding(
padding: const EdgeInsets.only(
right: 18.0, left: 12.0, top: 24, bottom: 12),
child: LineChart(
mainData(),
),
),
),
),
],
);
}
LineChartData mainData() {
return LineChartData(
...
titlesData: FlTitlesData(
show: true,
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 22,
textStyle: const TextStyle(
color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16),
getTitles: (value) {
//return value.round().toString();
for (int i = 0; i <= outcomeList.length; i++) {
return outcomeList[i].recordedTime.toString();
}
},
margin: 8,
),
...
),
...
}
List<FlSpot> datapoints = [
FlSpot(0, outcomeList[0].value),
FlSpot(2.6, outcomeList[1].value),
FlSpot(4.9, outcomeList[2].value),
FlSpot(6.8, outcomeList[3].value),
FlSpot(8, outcomeList[4].value),
FlSpot(10, outcomeList[5].value),
];
List<Outcome> outcomeList = [
Outcome(name: 'mood', recordedTime: Timestamp.now(), value: 5.6),
Outcome(
name: 'mood',
recordedTime:
Timestamp.fromDateTime(DateTime.now().add(new Duration(hours: 1))),
value: 6.7),
Outcome(
name: 'mood',
recordedTime:
Timestamp.fromDateTime(DateTime.now().add(new Duration(hours: 2))),
value: 5.5),
Outcome(
name: 'mood',
recordedTime:
Timestamp.fromDateTime(DateTime.now().add(new Duration(hours: 3))),
value: 6.2),
Outcome(
name: 'mood',
recordedTime:
Timestamp.fromDateTime(DateTime.now().add(new Duration(hours: 4))),
value: 7.7),
Outcome(
name: 'mood',
recordedTime: Timestamp.fromDateTime(
DateTime.now().add(new Duration(hours: 5, minutes: 26))),
value: 6.4),
];
您可以使用 SideTitles
的属性 rotateAngle
完整代码是官方演示 LineChartSample7
使用 rotateAngle
您可以在下面看到工作演示的红色矩形
代码片段
SideTitles(
rotateAngle: 90,
showTitles: true,
工作演示
完整代码
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
class LineChartSample7 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SizedBox(
width: 300,
height: 140,
child: LineChart(
LineChartData(
lineTouchData: LineTouchData(enabled: false),
lineBarsData: [
LineChartBarData(
spots: [
FlSpot(0, 4),
FlSpot(1, 3.5),
FlSpot(2, 4.5),
FlSpot(3, 1),
FlSpot(4, 4),
FlSpot(5, 6),
FlSpot(6, 6.5),
FlSpot(7, 6),
FlSpot(8, 4),
FlSpot(9, 6),
FlSpot(10, 6),
FlSpot(11, 7),
],
isCurved: true,
barWidth: 2,
colors: [
Colors.green,
],
dotData: FlDotData(
show: false,
),
),
LineChartBarData(
spots: [
FlSpot(0, 0),
FlSpot(1, 3),
FlSpot(2, 4),
FlSpot(3, 5),
FlSpot(4, 8),
FlSpot(5, 3),
FlSpot(6, 5),
FlSpot(7, 8),
FlSpot(8, 4),
FlSpot(9, 7),
FlSpot(10, 7),
FlSpot(11, 8),
],
isCurved: true,
barWidth: 2,
colors: [
Colors.black,
],
dotData: FlDotData(
show: false,
),
),
LineChartBarData(
spots: [
FlSpot(0, 7),
FlSpot(1, 3),
FlSpot(2, 4),
FlSpot(3, 0),
FlSpot(4, 3),
FlSpot(5, 4),
FlSpot(6, 5),
FlSpot(7, 3),
FlSpot(8, 2),
FlSpot(9, 4),
FlSpot(10, 1),
FlSpot(11, 3),
],
isCurved: false,
barWidth: 2,
colors: [
Colors.red,
],
dotData: FlDotData(
show: false,
),
),
],
betweenBarsData: [
BetweenBarsData(
fromIndex: 0,
toIndex: 2,
colors: [Colors.red.withOpacity(0.3)],
)
],
minY: 0,
titlesData: FlTitlesData(
bottomTitles: SideTitles(
rotateAngle: 90,
showTitles: true,
textStyle:
TextStyle(fontSize: 10, color: Colors.purple, fontWeight: FontWeight.bold),
getTitles: (value) {
switch (value.toInt()) {
case 0:
return 'Jan';
case 1:
return 'Feb';
case 2:
return 'Mar';
case 3:
return 'Apr';
case 4:
return 'May';
case 5:
return 'Jun';
case 6:
return 'Jul';
case 7:
return 'Aug';
case 8:
return 'Sep';
case 9:
return 'Oct';
case 10:
return 'Nov';
case 11:
return 'Dec';
default:
return '';
}
}),
leftTitles: SideTitles(
showTitles: true,
getTitles: (value) {
return '$ ${value + 0.5}';
},
),
),
gridData: FlGridData(
show: true,
checkToShowHorizontalLine: (double value) {
return value == 1 || value == 6 || value == 4 || value == 5;
},
),
),
),
);
}
}