自定义syncfusion_flutter_charts中的标签并添加额外的填充

lzfw57am  于 2023-02-25  发布在  Flutter
关注(0)|答案(1)|浏览(255)

我是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)
      ]),
)
r3i60tvu

r3i60tvu1#

我不知道这是不是你想要的方式,但至少我用了Unicode。
我参照了你的代码。
这就是结果。


.
我添加了以下部分。

var re = RegExp(r'(%u(?<hexData>[0-9A-Fa-f]{4}))|.');

var th_sup = '%u1d57%u02b0';
var st_sup = '%u02e2%u1d57';
var nd_sup = '%u207f%u1d48';
var rd_sup = '%u02b3%u1d48';

convertedUnicodeStr(String sup) {
  var matches = re.allMatches(sup);
  var hexDatas = <int>[];
  for (var match in matches) {
    var hexData = match.namedGroup('hexData');
    if (hexData != null) {
    hexDatas.add(int.parse(hexData, radix: 16));
  } else {
    hexDatas += match.group(0)!.runes.toList();
  }
 }
 var decodedStr = String.fromCharCodes(hexDatas);
 return decodedStr;

}
并更改了switch语句

switch (number % 10) {
  case 1:
    return convertedUnicodeStr(st_sup); // previous one : return 'st';
  case 2:
    return convertedUnicodeStr(nd_sup); // previous one : return 'nd';
  case 3:
    return convertedUnicodeStr(rd_sup); // previous one : return 'rd';
  default:
    return convertedUnicodeStr(th_sup); // previous one : return 'th';
}

所有代码

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class _ChartData {
  final String x;
  final double y;

  _ChartData(this.x, this.y);
}

class ChartExample extends StatefulWidget {
  const ChartExample({Key? key}) : super(key: key);

  @override
  State<ChartExample> createState() => _ChartExampleState();
}

class _ChartExampleState extends State<ChartExample> {
  var re = RegExp(r'(%u(?<hexData>[0-9A-Fa-f]{4}))|.');
  var th_sup = '%u1d57%u02b0';
  var st_sup = '%u02e2%u1d57';
  var nd_sup = '%u207f%u1d48';
  var rd_sup = '%u02b3%u1d48';

  List<_ChartData> data = [];

  List<String> months = <String>[
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec'
  ];

  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;
  }

  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 convertedUnicodeStr(st_sup);
      case 2:
        return convertedUnicodeStr(nd_sup);
      case 3:
        return convertedUnicodeStr(rd_sup);
      default:
        // return 'th';
        return convertedUnicodeStr(th_sup);
    }
  }

  init() {
    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()));
    }
  }

  convertedUnicodeStr(String sup) {
    var matches = re.allMatches(sup);
    var hexDatas = <int>[];
    for (var match in matches) {
      var hexData = match.namedGroup('hexData');
      if (hexData != null) {
        hexDatas.add(int.parse(hexData, radix: 16));
      } else {
        hexDatas += match.group(0)!.runes.toList();
      }
    }
    var decodedStr = String.fromCharCodes(hexDatas);
    return decodedStr;
  }

  @override
  void initState() {
    init();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 195,
          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: Colors.green,
                  fontSize: 10,
                ),
                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: Colors.black, fontSize: 10),
                  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),
                        topRight: Radius.circular(0.25)),
                    color: Colors.purple)
              ]),
        ),
      ),
    );
  }
}

最后,我想你最好参考一下这个。
我不知道这是不是你想要的答案。但我希望能有所帮助。

相关问题