Flutter 饼图从顶部开始

Question

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

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

我试过旋转图表，但旋转的角度总是取决于space小部分占了多少，我不知道如何计算。

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

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

Answer 3

在我的例子中，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,
          ),
        ),
      ),
    ],
  ),

Flutter 饼图从顶部开始

Flutter pie chart starting at top

charts

dart

pie-chart

flutter

fl-chart