Flutter图表库graphic,自定义TooltipGuide

Flutter用过的图表库:
  1. fl_chart ,缺点是自定义一些东西比较麻烦,而且数据填入的层级问题比较反人类
  2. graphic ,缺点是数据不能为空,没有空布局,可以先判断是否有数据然后在加载列表
graphic自定义TooltipGuide的实现:
  List<Figure> _renderer(Offset anchor, Map<int, Tuple> selectedTuples, Map<String, Color> groupColors) {
    if (anchor.dy.isNaN) {
      anchor = Offset(anchor.dx, 50);
    }
    final windowPath = Path();
    const space = 5;
    const bgColor = Color(0xFF4C4C4C);
    List<Figure> figures = [];
    var width = 0.0;
    var height = 0.0;
    List<TextPainter> textPainters = [];
    List<String> groupNames = [];
    selectedTuples.removeWhere((key, value) => value[yName].isNaN);
    selectedTuples.forEach((key, value) {
      final text = '${value[xName]} ${value[groupName] ?? ''}:${value[yName]}';
      final textPaint = TextPainter(
        text: TextSpan(text: text, style: TextStyle(color: Colors.white, fontSize: 11.fontSize)),
        textDirection: TextDirection.ltr,
      );
      textPaint.layout();
      if (width < textPaint.width) {
        width = textPaint.width;
      }
      height = height + textPaint.height + space;
      textPainters.add(textPaint);
      groupNames.add(value[groupName] ?? '');
    });
    width = width + 4 * space;
    var start = Offset(anchor.dx - width / 2, anchor.dy - height);
    var windowRect = Rect.fromLTWH(
      start.dx,
      start.dy - space * 3,
      width,
      height,
    );
    if (windowRect.left < 0) {
      final left = -windowRect.left + space;
      windowRect = windowRect.translate(left, 0);
      start = Offset(start.dx + left, start.dy);
    }
    if (windowRect.right > GetUtil.width) {
      final right = -(windowRect.right - GetUtil.width) - space;
      windowRect = windowRect.translate(right, 0);
      start = Offset(start.dx + right, start.dy);
    }
    windowPath.addRect(windowRect);
    figures.add(PathFigure(
      windowPath,
      Paint()..color = bgColor,
    ));
    var startX = start.dx + space;
    var startY = windowRect.top + space / 2;
    textPainters.asMap().forEach((key, value) {
      final hint = Path()
        ..addRRect(
          RRect.fromLTRBR(startX, startY, startX + 4, startY + value.height, const Radius.circular(0)),
        );
      figures.add(PathFigure(
        hint,
        Paint()..color = groupColors[groupNames[key]] ?? Colours.primaryColor,
      ));
      figures.add(TextFigure(
        value,
        Offset(startX + 2 * space, startY),
      ));
      startY = startY + value.height + space;
    });
    //三角
    final trianglePath = Path();
    final x = anchor.dx;
    final y = windowRect.bottom - 1;
    trianglePath.moveTo(x, y);
    trianglePath.lineTo(x - 5, y);
    trianglePath.lineTo(x, y + 5);
    trianglePath.lineTo(x + 5, y);
    trianglePath.close();
    figures.add(PathFigure(trianglePath, Paint()..color = bgColor));
    return figures;
  }

变量
变量名类型备注
xNameStringx轴的名称
yNameStringy轴的名称
groupNameString组的名称(也就是不同线)
groupColorsMap<String, Color>不同组对应的颜色
效果图:

自定义效果图

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值