Flutter 饼图从顶部开始答案

【问题标题】：Flutter pie chart starting at topFlutter 饼图从顶部开始
【发布时间】：2021-02-18 10:47:58
【问题描述】：

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

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

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

【问题讨论】：

标签： flutter dart charts pie-chart fl-chart

【解决方案1】：

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

【讨论】：

【解决方案2】：

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(),
                            ),

【讨论】：

它看起来不错，但据我所知，进度条只能有一种颜色，但我希望它有多种颜色显示：从 1000 欧元起，你已经用完了 25% 和这些由 10% X 和 15% Y 组成（每个都有不同的颜色）
对于不同的百分比，你可以自己写一个颜色getter方法。我在我的回答中附上了一个示例方法供您理解。看看吧。
看来我没有正确解释我想要什么。我希望在相同的百分比指示器中使用多种颜色，如初始帖子中的图像所示。我设法使它与堆叠的 PercemtIndicators 一起工作。