Flutter中使用onCreateAxisRenderer自定义SfRadialGauge时的指针与范围指针问题

问题1：指针值60显示位置错误（超过150刻度） #

问题根源是valueToFactor方法中的区间逻辑存在多处错误：

• 遗漏了10 < value <=25的刻度区间
• value>25 && <=50的计算分母错误（写成了50-30，实际应为50-25）
• 区间顺序与自定义刻度不匹配，导致数值对应的位置计算偏差

修正后的valueToFactor方法：

@override
double valueToFactor(double value) {
  // 对应自定义刻度：0、2、5、10、25、50、100、150、200、300、500、1000
  if (value >= 0 && value <= 2) {
    return (value * 0.125) / 2;
  } else if (value > 2 && value <= 5) {
    return (((value - 2) * 0.125) / (5 - 2)) + (1 * 0.125);
  } else if (value > 5 && value <= 10) {
    return (((value - 5) * 0.125) / (10 - 5)) + (2 * 0.125);
  } else if (value > 10 && value <= 25) {
    return (((value - 10) * 0.125) / (25 - 10)) + (3 * 0.125);
  } else if (value > 25 && value <= 50) {
    return (((value - 25) * 0.125) / (50 - 25)) + (4 * 0.125);
  } else if (value > 50 && value <= 100) {
    return (((value - 50) * 0.125) / (100 - 50)) + (5 * 0.125);
  } else if (value > 100 && value <= 150) {
    return (((value - 100) * 0.125) / (150 - 100)) + (6 * 0.125);
  } else if (value > 150 && value <= 200) {
    return (((value - 150) * 0.125) / (200 - 150)) + (7 * 0.125);
  } else if (value > 200 && value <= 300) {
    return (((value - 200) * 0.125) / (300 - 200)) + (8 * 0.125);
  } else if (value > 300 && value <= 500) {
    return (((value - 300) * 0.125) / (500 - 300)) + (9 * 0.125);
  } else if (value > 500 && value <= 1000) {
    return (((value - 500) * 0.125) / (1000 - 500)) + (10 * 0.125);
  } else {
    return value > 1000 ? 1 : 0;
  }
}

问题2：将刻度1000替换为1Gbps #

修改generateVisibleLabels方法，在创建刻度标签时判断当前值是否为1000，若是则替换文本为"1Gbps"：

@override
List<CircularAxisLabel> generateVisibleLabels() {
  final List<CircularAxisLabel> _visibleLabels = <CircularAxisLabel>[];
  for (num i = 0; i < 12; i++) {
    final double _value = _calculateLabelValue(i);
    // 替换1000为1Gbps
    final String labelText = _value == 1000 ? "1Gbps" : _value.toInt().toString();
    final CircularAxisLabel label = CircularAxisLabel(
        this.axis.axisLabelStyle, labelText, i, false);
    label.value = _value;
    _visibleLabels.add(label);
  }
  return _visibleLabels;
}

完整修正后的CustomAxisRenderer代码 #

class CustomAxisRenderer extends RadialAxisRenderer {
  CustomAxisRenderer() : super();

  @override
  List<CircularAxisLabel> generateVisibleLabels() {
    final List<CircularAxisLabel> _visibleLabels = <CircularAxisLabel>[];
    for (num i = 0; i < 12; i++) {
      final double _value = _calculateLabelValue(i);
      final String labelText = _value == 1000 ? "1Gbps" : _value.toInt().toString();
      final CircularAxisLabel label = CircularAxisLabel(
          this.axis.axisLabelStyle, labelText, i, false);
      label.value = _value;
      _visibleLabels.add(label);
    }
    return _visibleLabels;
  }

  @override
  double valueToFactor(double value) {
    if (value >= 0 && value <= 2) {
      return (value * 0.125) / 2;
    } else if (value > 2 && value <= 5) {
      return (((value - 2) * 0.125) / (5 - 2)) + (1 * 0.125);
    } else if (value > 5 && value <= 10) {
      return (((value - 5) * 0.125) / (10 - 5)) + (2 * 0.125);
    } else if (value > 10 && value <= 25) {
      return (((value - 10) * 0.125) / (25 - 10)) + (3 * 0.125);
    } else if (value > 25 && value <= 50) {
      return (((value - 25) * 0.125) / (50 - 25)) + (4 * 0.125);
    } else if (value > 50 && value <= 100) {
      return (((value - 50) * 0.125) / (100 - 50)) + (5 * 0.125);
    } else if (value > 100 && value <= 150) {
      return (((value - 100) * 0.125) / (150 - 100)) + (6 * 0.125);
    } else if (value > 150 && value <= 200) {
      return (((value - 150) * 0.125) / (200 - 150)) + (7 * 0.125);
    } else if (value > 200 && value <= 300) {
      return (((value - 200) * 0.125) / (300 - 200)) + (8 * 0.125);
    } else if (value > 300 && value <= 500) {
      return (((value - 300) * 0.125) / (500 - 300)) + (9 * 0.125);
    } else if (value > 500 && value <= 1000) {
      return (((value - 500) * 0.125) / (1000 - 500)) + (10 * 0.125);
    } else {
      return value > 1000 ? 1 : 0;
    }
  }

  double _calculateLabelValue(num value) {
    if (value == 0) {
      return 0;
    } else if (value == 1) {
      return 2;
    } else if (value == 2) {
      return 5;
    } else if (value == 3) {
      return 10;
    } else if (value == 4) {
      return 25;
    } else if (value == 5) {
      return 50;
    } else if (value == 6) {
      return 100;
    } else if (value == 7) {
      return 150;
    } else if (value == 8) {
      return 200;
    } else if (value == 9) {
      return 300;
    } else if (value == 10) {
      return 500;
    } else {
      return 1000;
    }
  }
}

内容的提问来源于stack exchange，提问作者Dhaval Chaudhari