饼图颤动 [英] Pie-Chart flutter

问题描述

我正在使用

I'm using pie_chart library to draw pie-chart in my flutter project.

Does anyone know how to add the text in the center of pie, and increase the arc width?

Edit

 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",
                            );

解决方案

Fork or get chart_painter.dart and pie_chart.dart from here

1. chart_painter.dart

add an optional parameter centerText of type String

 final String centerText;

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

Create a method

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

Call it from paint

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

  }

2. PieChart.dart

Do the same for PieChart.dart

 final String centerText;

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

On _getChart method

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

3. In You application

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

这篇关于饼图颤动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！