Question

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

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

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

Answer 1

progress indicator 包非常灵活，可以解决您的问题

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

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（您必须将背景颜色设置为透明才能看到后面的元素）

颤振饼图从顶部开始

2 个答案: