更改 (Syncfusion) 圆环图中弯曲 CornerStyle 的角半径

Question

我在 flutter 中使用syncfusion饼图。我想知道是否有一种方法可以更改父容器内图表的比例而不更改父容器的大小， 以及当 CornerStyle 值为 BothCurved 时如何更改角的半径

这是我的代码：

    class HalfDoughnutChart extends StatelessWidget {
  final List<ChartData> chartData = [
    ChartData('David', 30, Color.fromRGBO(9, 0, 136, 1)),
    ChartData('Mark', 38, Color.fromRGBO(147, 0, 119, 1)),
    ChartData('Test', 34, Color.fromRGBO(228, 0, 124, 1)),
    ChartData('Test', 52, Color.fromRGBO(255, 189, 57, 1))
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Container(
              color: Colors.grey,
              height: 250,
              width: 500,
                child: SfCircularChart(
                    margin: EdgeInsets.all(0),
                   legend: Legend(isVisible: true,position: LegendPosition.right),
                    annotations: <CircularChartAnnotation>[
                      CircularChartAnnotation(
                        widget:
                        Container(
                            child: const Text('Annotation')
                        ),  radius: '2%',
                        verticalAlignment: ChartAlignment.far,
                      ),

                    ],
                    series: <CircularSeries>[
      DoughnutSeries<ChartData, String>(
          dataLabelMapper: (ChartData data, _) => "${data.y.toInt()} %",
          dataSource: chartData,
          enableSmartLabels: true,

          xValueMapper: (ChartData data, _) => data.x,
          yValueMapper: (ChartData data, _) => data.y,
          pointColorMapper: (ChartData data, _) => data.color,
          radius: '70%',
          innerRadius: '65%',
          startAngle: 270, // Starting angle of doughnut
          endAngle: 90,
          dataLabelSettings: DataLabelSettings(
            // Renders the data label
              isVisible: true
          ),


          // Corner style of doughnut segment
          cornerStyle: CornerStyle.bothCurve)
    ]))));
  }
}

class ChartData {
  ChartData(this.x, this.y, [this.color]);
  final String x;
  final double y;
  final Color color;
}

在下面的链接中找到图表图像： https://ibb.co/r7MjNBB

谢谢你

Answer 1

感谢您对我们的 Flutter 图表小部件感兴趣。我们已分析您的疑问并找到以下答复。

查询#1 有没有办法在不改变父级大小的情况下更改父容器内图表的比例。

您可以使用 radius 属性来自定义图表的大小，而无需更改其父级大小。要了解有关我们图表的更多信息，请参阅帮助文档。

查询#2 当CornerStyle值为bothCurved时如何改变拐角的半径？

到目前为止，您无法更改每个点的圆角半径，但是您可以使用枚举属性cornerStyle 自定义圆角样式。要了解有关圆角的更多信息，请查找用户指南。

如果您需要任何进一步的帮助，请回复我们。

谢谢， 陀罗尼塔兰。

Answer 2

我有同样的问题，有谁知道如何制作它。我也尝试过使用油漆和画布，但不知道如何构建角圆形。