饼图颤动答案

【问题标题】：Pie-Chart flutter饼图颤动
【发布时间】：2020-04-12 18:52:26
【问题描述】：

我正在使用 pie_chart 库在我的颤振项目中绘制 pie-chart。

有谁知道如何在饼图中心添加文字，并增加圆弧宽度？

编辑

 return PieChart(
                              dataMap: dataMap,
                              animationDuration: Duration(milliseconds: 800),
                              chartRadius:
                                  MediaQuery.of(context).size.width / 1.7,
                              showChartValuesInPercentage: true,
                              showChartValues: true,
                              showChartValuesOutside: true,
                              chartValueBackgroundColor: Colors.grey[200],
                              colorList: colorList,
                              showLegends: true,
                              legendPosition: LegendPosition.right,
                              decimalPlaces: 1,
                              showChartValueLabel: true,
                              chartType: ChartType.ring,
                              centerText: "Title",
                            );

【问题讨论】：

您可以使用Stack 将您的图表和文本小部件放在Positioned 下以在图表上添加文本。否则，您可以根据需要分叉包并修改源代码。
@OMiShah 是的，我使用的是Stack，但是当我使用其他设备运行时，文本位置略有变化。
那么最好的办法是分叉包并修改它。 :)
@OMiShah 但找不到修改方法
我会尝试修改并尽快通知您

标签： flutter dart stack pie-chart

【解决方案1】：

Fork 或从here 获取chart_painter.dart 和pie_chart.dart

1. chart_painter.dart

添加String类型的可选参数centerText

 final String centerText;

  PieChartPainter(
    //..
    this.centerText
  }) { //..

创建一个方法

  void _drawCenterText(Canvas canvas, double side) {
    final radius = side * 0.5;
    final xy = radius * math.sin((_totalAngle * _subParts.last)) / 8;

    _drawName(canvas, centerText, xy, xy, side);
  }

从paint拨打电话

  @override
  void paint(Canvas canvas, Size size) {
     //..
    if(centerText != null) {
      _drawCenterText(canvas, side);
    }

  }

2。 PieChart.dart

对PieChart.dart做同样的事情

 final String centerText;

 PieChart({
    //..
    this.centerText,
    Key key,
  }) : super(key: key);

关于_getChart 方法

 _getChart() {
    return Flexible(
      //..
          child: CustomPaint(
            painter: PieChartPainter(
              //..
              centerText: widget.centerText
            ),
            child: AspectRatio(aspectRatio: 1),
          ),
        ),
      ),
    );
  }

3.在你的应用程序中

PieChart(
      //..           
      chartType: ChartType.disc,
      centerText: "Your Center Text Here"
  )

【讨论】：

我使用ChartType.ring，但文字不在中心
@JohnJoe 对我来说看起来很中心。检查更新的屏幕截图。
是饼图参数造成的吗？
你根据这个答案改过代码了吗？
检查更新的 _drawCenterText 方法。它将处理问题