Flutter中实现带虚线雷达图并添加数据峰值圆点的方法

需求说明 #

需将现有雷达图修改为带虚线边框样式，并在数据点的峰值位置添加圆点标记，替代当前样式。当前使用依赖库：

• fl_chart: ^0.68.0
• flutter_radar_chart: ^0.2.1

修改后的雷达图代码 #

Column(
  children: [
    SizedBox(height: 20),
    Text("Radar Chart", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
    SizedBox(height: 20),
    Container(
      height: 300,
      child: RadarChart(
        RadarChartData(
          radarBackgroundColor: Colors.transparent,
          borderData: FlBorderData(show: false),
          tickCount: 4,
          ticksTextStyle: TextStyle(color: Colors.grey, fontSize: 10),
          tickBorderData: BorderSide(color: Colors.grey, width: 1),
          gridBorderData: BorderSide(color: Colors.grey.withOpacity(0.5), width: 1),
          radarShape: RadarShape.polygon,
          titlePositionPercentageOffset: 0.15,
          getTitle: (index, angle) {
            const titles = ["Operation", "Reporting", "Compliance", "Strategic"];
            return RadarChartTitle(
              text: titles[index],
              angle: angle,
            );
          },
          dataSets: [
            // 主数据虚线雷达图
            RadarDataSet(
              fillColor: Colors.lightBlue.withOpacity(0.4),
              borderColor: Colors.lightBlue,
              borderWidth: 2,
              // 设置虚线样式：[实线长度, 间隔长度]
              borderDashPattern: [4, 2],
              entryRadius: 0, // 隐藏默认数据点，避免和峰值圆点冲突
              dataEntries: [
                RadarEntry(value: 5),
                RadarEntry(value: 3),
                RadarEntry(value: 4),
                RadarEntry(value: 1),
              ],
            ),
            // 峰值圆点标记数据集
            RadarDataSet(
              fillColor: Colors.transparent,
              borderColor: Colors.lightBlue,
              borderWidth: 0,
              entryRadius: 8, // 峰值圆点大小
              dataEntries: [
                // 仅在峰值位置设置对应值，其余设为0（不显示）
                RadarEntry(value: 5),
                RadarEntry(value: 0),
                RadarEntry(value: 0),
                RadarEntry(value: 0),
              ],
            ),
          ],
          radarTouchData: RadarTouchData(enabled: false),
        ),
      ),
    ),
  ],
)

关键修改说明 #

• 虚线边框实现：在主RadarDataSet中添加borderDashPattern: [4, 2]，数组元素分别代表虚线的实线段长度和间隔长度，可根据视觉需求调整数值。
• 峰值圆点标记：新增独立的RadarDataSet，仅在数据峰值对应的位置设置RadarEntry的value，其余位置设为0；同时设置fillColor为透明、borderWidth为0，仅保留entryRadius控制圆点大小，实现峰值位置的圆点标记。

原_buildLabel方法代码 #

Widget _buildLabel(String text, Color color, String value) {
  return Row(
    children: [
      Container(
        padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
        decoration: BoxDecoration(
          color: color,
          borderRadius: BorderRadius.circular(8),
        ),
        child: Row(
          children: [
            CircleAvatar(radius: 10, backgroundColor: Colors.white, child: Text(value, style: TextStyle(fontSize: 10, fontWeight: FontWeight.bold))),
            SizedBox(width: 5),
            Text(text, style: TextStyle(color: Colors.white, fontSize: 12)),
          ],
        ),
      ),
      SizedBox(width: 10),
    ],
  );
}

内容的提问来源于stack exchange，提问作者Andhika Saputra