我是flutter的一个新开发者,我正在flutter中使用syncfusion_flutter_charts
开发一个条形图,这是我在flutter中想要实现的,Expected Graph,这是我经过几个小时的努力后实现的。Achieved Graph
你注意到,在标签的文本是在上标格式。我试图实现这一点,但所有的努力都是徒劳的,而且还有一些填充开始前的酒吧和y标签的轴线。我做了很多研究,但我不能复制这些东西。这是一个大学项目,任何帮助将不胜感激。这是我的代码。
List<_ChartData> data= [];
int daysInMonth(DateTime date){
var firstDayThisMonth = DateTime(date.year, date.month, date.day);
var firstDayNextMonth = DateTime(firstDayThisMonth.year, firstDayThisMonth.month + 1, firstDayThisMonth.day);
return firstDayNextMonth.difference(firstDayThisMonth).inDays;
}
List<String> months = <String>[ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
String ordinal(int number) {
if(!(number >= 1 && number <= 100)) {
throw Exception('Invalid number');
}
if(number >= 11 && number <= 13) {
return 'th';
}
switch(number % 10) {
case 1: return 'st';
case 2: return 'nd';
case 3: return 'rd';
default: return 'th';
}
}
for(int i=1;i<=daysInMonth(DateTime.now());i++){
data.add(_ChartData('$i${ordinal(i)} ${months[DateTime.now().month-1]}', (Random().nextInt(11)+1).toDouble()));
}
SizedBox(
height: 25.h,
child: SfCartesianChart(
plotAreaBorderWidth: 0,
primaryXAxis: CategoryAxis(
isVisible: true,
majorGridLines: const MajorGridLines(width: 0),
interval: (daysInMonth(DateTime.now())+ ((daysInMonth(DateTime.now())-1) - 28))/2,
labelAlignment: LabelAlignment.center,
labelStyle: TextStyle(
color: lightAxisGreyColor,
fontSize: 10.sp,
),
edgeLabelPlacement: EdgeLabelPlacement.shift,
labelPlacement: LabelPlacement.onTicks,
),
primaryYAxis: NumericAxis(
minimum: 0, maximum: 12, interval: 12,
labelPosition: ChartDataLabelPosition.outside,
labelAlignment: LabelAlignment.end,
rangePadding: ChartRangePadding.additional,
labelStyle: TextStyle(
color: blackBlueText,
fontSize: 10.sp
),
axisLine: const AxisLine(width: 0)),
tooltipBehavior: TooltipBehavior(
enable: true,
),
series: <ChartSeries<_ChartData, String>>[
ColumnSeries<_ChartData, String>(
dataSource: data,
xValueMapper: (_ChartData data, _) => data.x,
yValueMapper: (_ChartData data, _) => data.y,
name: 'Open Tasks',
width: 1,
spacing: 0.05,
borderRadius: BorderRadius.only(topLeft: Radius.circular(0.25.w),topRight: Radius.circular(0.25.w)),
color: colorPurple)
]),
)
1条答案
按热度按时间r3i60tvu1#
我不知道这是不是你想要的方式,但至少我用了Unicode。
我参照了你的代码。
这就是结果。
.
我添加了以下部分。
}
并更改了switch语句
所有代码
最后,我想你最好参考一下这个。
我不知道这是不是你想要的答案。但我希望能有所帮助。