中间有百分比的 Flutter 图表

Question

我正在使用 flutter 开发移动应用程序。我想显示一个图表如下。它显示了某些属性的进度。所以我只有他们的百分比属性。我尝试了 charts_flutter 和 syncfusion_flutter_charts。但是我无法按原样实现中间百分比值。

Answer 1

我认为 percent_indicator 在这种情况下很有用。为了同样的目的，我在我的一个应用程序中使用了这个库。

您可以通过添加以下代码来实现基本外观：

CircularPercentIndicator(
    radius: 60.0,
    lineWidth: 5.0,
    percent: 0.5,
    center: Text("50%"),
        progressColor: Colors.green,
)

你可以用这个库做很多定制，查看他们的文档了解更多细节。

Answer 2

您的要求可以使用圆形图表小部件的 annotations 功能来实现。您可以从下面的 link,

中找到示例

https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/doughnut_series/doughnut_with_center_elevation.dart

有关 CircularChartAnnotation 中可用属性的更多信息，请在下面找到 API 参考资料，

https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularChartAnnotation-class.html

注意：我为 Syncfusion 工作。