flutter实现五维雷达图

要实现五维雷达图，您可以使用 CustomPainter 类来自定义绘制五边形的图形。以下是一个示例代码，可以让您开始实现五维雷达图：

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

class RadarChart extends StatelessWidget {
  final List<double> data;

  RadarChart({this.data});

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: RadarPainter(data),
      child: Container(),
    );
  }
}

class RadarPainter extends CustomPainter {
  final List<double> data;
  final Paint polygonPaint;
  final Paint linePaint;
  final Paint textPaint;
  final double maxValue;

  RadarPainter(this.data)
      : polygonPaint = Paint()
          ..color = Colors.blue.withOpacity(0.3)
          ..style = PaintingStyle.fill,
        linePaint = Paint()
          ..color = Colors.blue
          ..style = PaintingStyle.stroke
          ..strokeWidth = 2.0,
        textPaint = Paint()
          ..color = Colors.black
          ..style = PaintingStyle.fill
          ..textBaseline = TextBaseline.alphabetic
          ..textAlign = TextAlign.center
          ..fontSize = 14.0,
        maxValue = 1.0;

  @override
  void paint(Canvas canvas, Size size) {
    // 计算五边形中心点
    Offset center = Offset(size.width / 2, size.height / 2);

    // 计算五边形半径
    double radius = min(size.width, size.height) / 2;

    // 计算五边形顶点坐标
    List<Offset> vertices = List.generate(
      5,
      (i) {
        double x = center.dx + radius * cos(2 * pi / 5 * i - pi / 2);
        double y = center.dy + radius * sin(2 * pi / 5 * i - pi / 2);
        return Offset(x, y);
      },
    );

    // 绘制五边形
    Path path = Path();
    path.moveTo(vertices[0].dx, vertices[0].dy);
    for (int i = 1; i < 5; i++) {
      path.lineTo(vertices[i].dx, vertices[i].dy);
    }
    path.close();
    canvas.drawPath(path, polygonPaint);

    // 绘制五边形边线
    for (int i = 0; i < 5; i++) {
      canvas.drawLine(vertices[i], vertices[(i + 1) % 5], linePaint);
    }

    // 绘制五边形对角线
    for (int i = 0; i < 5; i++) {
      canvas.drawLine(center, vertices[i], linePaint);
    }

    // 绘制数据标记点
    Path dataPath = Path();
    for (int i = 0; i < 5; i++) {
      double value = data[i] / maxValue;
      double x = center.dx + radius * value * cos(2 * pi / 5 * i - pi / 2);
      double y = center.dy + radius * value * sin(2 * pi / 5 * i - pi / 2);
      if (i == 0) {
        dataPath.moveTo(x, y);
      } else {
        dataPath.lineTo(x, y);
      }
      canvas.drawCircle(Offset(x, y), 6.0, linePaint);
    }
    dataPath.close();
    canvas.drawPath(dataPath, polygonPaint);

    // 绘制数据标签
    for (int i = 0; i < 5; i++) {
      double value = data[i] / maxValue;
      double x = center.dx + radius * value * cos(2 * pi / 5 * i - pi / 2);
      double y = center.dy + radius * value * sin(2 * pi / 5 * i - pi / 2);
      canvas.drawText(
        value.toStringAsFixed(1),
        Offset(x, y + 16.0),
        textPaint,
      );
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

在上面的示例代码中，我们定义了三个 Paint 对象，一个用于绘制五边形的填充，一个用于绘制五边形的边线和数据标记点的圆圈，还有一个用于绘制数据标签的文本。然后在 RadarPainter 类的 paint 方法中，我们计算五边形的中心点、半径和顶点坐标，并使用这些参数绘制五边形。接着，我们根据传入的数据，计算出每个数据点在五边形中的位置，并使用圆圈标记绘制出来，同时绘制出数据的连线。最后，我们根据位置绘制出数据标签。

要使用 RadarChart 类，只需要在 Widget 树中添加一个 RadarChart 对象，并传入一个包含五个数据点的 List 即可：

RadarChart(data: [0.8, 0.5, 0.6, 0.9, 0.7])

这将会绘制一个五维雷达图，并将五个数据点分别标记在五边形的顶点处。您可以根据需要修改绘制五边形和数据标记点的样式。