从顶部开始的Flutter饼图

6yjfywim  于 2022-12-24  发布在  Flutter
关注(0)|答案(4)|浏览(145)

我想创建一个饼图(或者更确切地说是一个环形图)来显示一个给定值(比如1000欧元)已经使用了多少。我尝试了pie_chartfl_chart包,虽然它们都能绘制出很好的图表,但我无法按照我想要的方式显示它。到目前为止,我从这两个包中得到的结果是,较小的部分从环形的任何地方开始:

我想让它看起来像这样,较小的部分从顶部开始,根据可用资金的使用情况顺时针填充空间,类似于进度指示器:

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

knsnq2tg

knsnq2tg1#

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

bxgwgixi

bxgwgixi2#

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

mhd8tkvw3#

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

mepcadol4#

您需要在要制作半个饼图的部分上设置透明颜色。
使用此代码:
颜色。透明,
代码示例:

>        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)),
>         ];
>        }

相关问题