我正在使用 fl_chart 在 Flutter 应用程序中绘制条形图。我对 x 轴单位有很长的标题,我看到的问题是,标题的长度越长,对齐就越容易折腾。
在下图中,长度较短的 x 轴标题与条正确对齐,而文本较长的标题似乎远离图表。
标题数据:
FlTitlesData get titlesData => FlTitlesData(
show: true,
bottomTitles: SideTitles(
showTitles: true,
getTextStyles: (context, value) => const TextStyle(
color: Color(0xff7589a2),
fontWeight: FontWeight.bold,
fontSize: 14,
),
rotateAngle: 300,
getTitles: (double value) {
switch (value.toInt()) {
case 0:
return 'Test';
case 1:
return 'Unassigned 123434';
case 2:
return 'Alert Saftey 123243';
case 3:
return 'Belfast 12324';
case 4:
return 'Cardiff 243423';
case 5:
return "Domino's Pizza 123234";
case 6:
return 'Glasgow 1232';
case 7:
return 'James Newma 13434';
case 8:
return 'LCC';
case 9:
return 'Liverpool';
case 10:
return 'Testing 123455 454545';
case 11:
return 'Testing 456';
case 12:
return 'Testing 789';
case 13:
return 'Testing 321';
case 14:
return 'Testing 890';
default:
return '';
}
},
),
leftTitles: SideTitles(
showTitles: true,
getTextStyles: (context, value) => const TextStyle(
color: Color(0xff7589a2),
fontWeight: FontWeight.bold,
fontSize: 14),
getTitles: (value) {
if (value == 25) {
return '25';
} else if (value == 50) {
return '50';
} else if (value == 75) {
return '75';
} else {
return '';
}
},
),
topTitles: SideTitles(showTitles: false),
rightTitles: SideTitles(showTitles: false),
);
条形图数据:
BarChart(
BarChartData(
titlesData: titlesData,
gridData:
FlGridData(drawHorizontalLine: true, drawVerticalLine: false),
axisTitleData: axisTitleData(context),
borderData: borderData,
barGroups: barGroups,
maxY: 75,// Dynamic
),
),