charts - Flutter Google Chart Gauge - 将标签放在中心

Question

我正在查看 charts_flutter包裹。我需要实现一个仪表图表，其中包含一个分段，其标签值位于仪表的中心。请参阅下面的模型文件，其中来自所需类型的三个图表排成一行:

使用 Google 图表仪表示例，我能够实现所需的仪表，但是，我很难根据要求设置标签。下面是我用于测量的类，任何帮助/提示如何添加标签将不胜感激:

/// Gauge chart example, where the data does not cover a full revolution in the
/// chart.
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';
import 'dart:math';

class GaugeChart extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;

  GaugeChart(this.seriesList, {this.animate});

  factory GaugeChart.fromValue(
      {@required double value, @required Color color, bool animate}) {
    return GaugeChart(
      _createDataFromValue(value, color),
      // Disable animations for image tests.
      animate: animate,
    );
  }

  @override
  Widget build(BuildContext context) {
    return charts.PieChart(
      seriesList,
      animate: animate,
      // Configure the width of the pie slices to 30px. The remaining space in
      // the chart will be left as a hole in the center. Adjust the start
      // angle and the arc length of the pie so it resembles a gauge.
      defaultRenderer: charts.ArcRendererConfig(
        arcWidth: 20,
        startAngle: 3 / 5 * pi,
        arcLength: 9 / 5 * pi,
        //arcRendererDecorators: [charts.ArcLabelDecorator(labelPosition: charts.ArcLabelPosition.outside)],
      ),
    );
  }

  static List<charts.Series<GaugeSegment, String>> _createDataFromValue(
      double value, Color color) {
    double toShow = (1 + value) / 2;
    final data = [
      GaugeSegment('Main', toShow, color),
      GaugeSegment('Rest', 1 - toShow, Colors.transparent),
    ];

    return [
      charts.Series<GaugeSegment, String>(
        id: 'Segments',
        domainFn: (GaugeSegment segment, _) => segment.segment,
        measureFn: (GaugeSegment segment, _) => segment.value,
        colorFn: (GaugeSegment segment, _) => segment.color,
        // Set a label accessor to control the text of the arc label.
        labelAccessorFn: (GaugeSegment segment, _) =>
            segment.segment == 'Main' ? '${segment.value}' : null,
        data: data,
      )
    ];
  }
}

/// data type.
class GaugeSegment {
  final String segment;
  final double value;
  final charts.Color color;

  GaugeSegment(this.segment, this.value, Color color)
      : this.color = charts.Color(
            r: color.red, g: color.green, b: color.blue, a: color.alpha);
}

类的使用方式如下:

// value can take values between -1 and 1
GaugeChart.fromValue(value: 0.34, color: Colors.red)

Answer 1

我们使用 Stack 实现了这一点:

return Container(
    width: 120,
    height: 120,
    child: Stack(children: [
        GaugeChart(_getChartData()),
        Center(
            child: Text(
        '$percent',
        ))
    ]));