flutter - Flutter 饼图从顶部开始

Question

我想创建一个饼图（或者更确切地说是一个环形图），显示给定值（比如 1000 欧元）已用完多少。我尝试了pie_chart和fl_chart包，虽然它们都绘制了漂亮的图表，但我无法以我想要的确切方式显示它。到目前为止，我从这两个包中得到的是，较小的部分从环上的任何地方开始：

我希望它看起来像这样，较小的部分从顶部开始并顺时针填充空间，具体取决于用完多少可用资金，类似于进度指示器：

我尝试旋转图表，但旋转程度始终取决于较小部分占用多少空间，我不知道如何计算。

Answer 1

进度指示器包非常灵活，可以解决您的问题

要根据百分比获得您选择的不同颜色，您可以使用以下方法：

final double _profilePercentage = 0.25;

Color getProfileStatusColor() {
    switch ((_profilePercentage * 100).toInt()) {
      case 100:
        return kSuccessColor;
      case 75:
        return kSuccessColor;
      case 50:
        return kAccentColor;
      case 25:
        return kErrorColor;

      default:
        return kGreyColor;
    }
  }

其中，小部件看起来像这样：

LinearPercentIndicator(
                              width: MediaQuery.of(context).size.width * 0.85 -
                                  60.0,
                              animation: true,
                              lineHeight: 7.0,
                              animationDuration: 500,
                              percent: _profilePercentage,
                              linearStrokeCap: LinearStrokeCap.roundAll,
                              progressColor: getProfileStatusColor(),
                            ),

Answer 2

我在这里找到了一个解决方案：https ://stackoverflow.com/a/54709279/11487803 他们使用具有多个 CircularProgressIndicator 的堆栈来实现这一点，但也应该可以使用 CircularPercentIndicator （您必须将背景颜色设置为透明看到后面的元素）