我想创建一个饼图(或者更确切地说是一个环形图)来显示一个给定值(比如1000欧元)已经使用了多少。我尝试了pie_chart和fl_chart包,虽然它们都能绘制出很好的图表,但我无法按照我想要的方式显示它。到目前为止,我从这两个包中得到的结果是,较小的部分从环形的任何地方开始:
我想让它看起来像这样,较小的部分从顶部开始,根据可用资金的使用情况顺时针填充空间,类似于进度指示器:
我试着旋转图表,但是旋转的程度总是取决于较小的部分占用多少空间,我不知道如何计算。
knsnq2tg1#
我在这里找到了一个解决方案:https://stackoverflow.com/a/54709279/11487803他们使用带有多个CircularProgressIndicator的堆栈来实现这一点,但也可以使用CircularPercentIndicator(您必须将背景颜色设置为透明才能看到后面的元素)
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(), ),
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, ), ), ), ], ),
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)), > ]; > }
4条答案
按热度按时间knsnq2tg1#
我在这里找到了一个解决方案:https://stackoverflow.com/a/54709279/11487803他们使用带有多个CircularProgressIndicator的堆栈来实现这一点,但也可以使用CircularPercentIndicator(您必须将背景颜色设置为透明才能看到后面的元素)
bxgwgixi2#
progress indicator包非常灵活,可以解决您的问题
要根据百分比选择不同的颜色,可以使用以下方法:
其中,小部件类似于:
mhd8tkvw3#
在我的例子中,startDegreeoffset解决了问题
mepcadol4#
您需要在要制作半个饼图的部分上设置透明颜色。
使用此代码:
颜色。透明,
代码示例: