I want to create a pie chart (or rather a ring chart) that show how much of a given value (say 1000 euros) has been used up. I tried the packages pie_chart and fl_chart and while both draw nice charts, I cannot display it the exact way I want.
What I get from both packages so far is this, where the smaller sections start anywhere on the ring:

我想创建一个饼形图(或者更确切地说是环形图)，显示给定价值(比如1000欧元)中有多少已经用完。我尝试了PIE_CHART和FL_CHART包，虽然这两个包都绘制了很好的图表，但我不能以我想要的方式显示它。到目前为止，我从这两个包中得到的是，较小的部分从环上的任何位置开始：

What I want it to look like is this where the smaller sections start at the top and fill the space clockwise depending on how much of the available money is used up, similar to a progress indicator:

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

I tried rotating the chart, but the rotation degree is always depending on how much space the smaller sections take up and I don't know how to calculate that.

我试着旋转图表，但旋转度总是取决于较小的部分占据了多少空间，我不知道如何计算。

You need to set a transparent color on the section where you want to make a half pie.

你需要在你想做半个馅饼的部分设置一个透明的颜色。

Use this code:

使用此代码：

Colors.transparent,

Code sample:

代码示例：

class Pie_Data {
    static List<Pie_Chart> data = [
        Pie_Chart(name: "Carlos", percent: 20, color:  Colors.transparent),
        Pie_Chart(name: "Alexa", percent: 33, color: const Color(0xffffc107)),
        Pie_Chart(name: "Lucas", percent: 18, color: const Color(0xff1b5e20)),
        Pie_Chart(name: "George", percent: 8, color: const Color(0xffd50000)),
    ];
}

I found a solution here: https://stackoverflow.com/a/54709279/11487803
They use a stack with multiple CircularProgressIndicator to achieve this, but it should also be possible with a CircularPercentIndicator (where you have to set the background color to transparent to see the element behind)

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

The progress indicator package is quite flexible and can solve your problem

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

To get different color of your choice based on percentages, you can use this approach:

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

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;
    }
  }

where, the widget looks something like this:

其中，小部件如下所示：

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

In my case startDegreeoffset solved problem

在我的案例中，startDegreeOffset解决了问题

  child: Stack(
    children: [
      PieChart(
        PieChartData(
          startDegreeOffset: 270,
          borderData: FlBorderData(show: false),
          sectionsSpace: 0,
          centerSpaceRadius: EFRDimen.dimen64,
          sections: getSections(),
        ),
      ),
      Center(
        child: Text(
          'someString',
          style: const TextStyle(
            fontFamily: "ScreenSans",
            fontSize: Dimen.fontSize14,
            color: FRColor.textGray,
          ),
        ),
      ),
    ],
  ),

with fl_chart I used startDegreeOffset set to -90 from PieChartData to make sure the chart starts at the top everytime

对于fl_Chart，我使用PieChartData中的startDegreeOffset设置为-90，以确保图表每次都从顶部开始