The side dish is prepared to show a simple pie chart. Because it needs to be simple and single, the side dish is prepared to draw one by itself. Today’s dish only attempts to draw the process, temporarily does not involve gesture operation;

ACEPieWidget

Side dishes for drawing are divided into three steps:

  1. Category option ball;
  2. Cutting drawing pie chart;
  3. Pie chart drawing text;

1. Category option ball

For different color categories on both sides of the Container TAB, simply set the decoration of the Container to facilitate the classification of the pie chart.

Return Container(height: 45, Width: 45, margin: EdgeInsets. Symmetric (vertical: 2.5, horizontal: 10), decoration: BoxDecoration(color: _color, borderRadius: borderRadius. Circular ((25.0))), child: Center(child: Text(_text, style: TextStyle(fontSize: 12, color: Colors.white))));Copy the code

2. Pie chart drawing

As for the basic drawing of Canvas, side dishes have been briefly introduced in previous blogs. The dish also uses the most basic drawArc to draw fan-shaped splicing into a complete circle;

  1. Get ListData total data value;
  2. Traverse ListData according to each subcategory data proportion and rotation Angle of different colors of the sector chart drawing;
  3. Finally splicing into a complete pie chart;

Note: It is necessary to pay attention to the starting Angle and ending Angle of the pie chart when drawing the pie chart, and the Angle of the pie chart drawn last time should be accumulated.

// 1. Set Paint _paint = Paint().. color = Colors.grey .. StrokeWidth = 4.0.. style = PaintingStyle.fill; Sumdata () {if (_listData! = null) { for (int i = 0; i < _listData.length; i++) { _sum += _listData[i].values.first; If (_listData! = null) { for (int i = 0; i < _listData.length; i++) { startAngle += sweepAngle; sweepAngle = _listData[i].values.first * 2 * PI / _sum; canvas.drawArc(_circle, startAngle, sweepAngle, true, _paint.. color = _subPaint(_listData[i].keys.first)); }}}Copy the code

3. Text drawing

After the pie chart is drawn, the text is drawn on the respective fan area; The side dish stipulates that the text will be drawn only when the Angle of the pie chart is greater than or equal to 30 degrees. If the Angle of the pie chart is too small, the display effect will be poor.

  1. By default, the initial drawing point of text is based on the upper left corner of the screen. In this case, when drawing in the sector, the coordinate system needs to translate() to the center of the pie chart.
  2. The Angle of the text should be parallel to the Angle bisector of the sector. Rotate () to rotate the coordinate system at an appropriate Angle.
  3. It is impossible to know the length of the coordinate occupied by the text, but the height occupied by the text can be obtained through the Paragraph. Therefore, when the text is drawn through the drawParagraph, the starting coordinate of the text is appropriately set, and the Y-axis coordinates are moved up half of the height of the text.
  4. After the text is drawn, rotate the coordinate system rotate() back to the normal horizontal and vertical direction and shift the starting coordinate Translate () back to the upper left corner of the screen. Wait for the next text drawing;
// 1. Draw the writing attributes (color, size, etc.) and the maximum paragraph width ParagraphBuilder _pb = ParagraphBuilder(ParagraphStyle(textAlign: TextAlign.left, fontWeight: FontWeight.w600, fontStyle: FontStyle.normal, fontSize: 14)) .. pushStyle(ui.TextStyle(color: Colors.white)); ParagraphConstraints _paragraph = ParagraphConstraints(width: sie.width * 0.5); if (sweepAngle >= PI / 6) { // 2. Canvas. Translate (size.width * 0.5, size.height * 0.5); Rotate (startAngle + sweepAngle * 0.5); Paragraph = (_pb.. addText(_subName)).build().. layout(_paragraph); Canvas. drawParagraph(paragraph, Offset(50.0, 0.0-paragraph. Height * 0.5)); Rotate (-startangle-sweepangle * 0.5); rotate(-startangle-sweepangle * 0.5); Width * 0.5, -size. Height * 0.5); // 6. }Copy the code

ACEPieWidget case source code

The side dish only briefly introduces the basic pie chart style drawing, its function is not perfect, will add appropriate gesture operation later; If there are mistakes, please give more guidance!

Source: Little Monk A Ce