Flutter Google Chart Gauge-将标签放置在中心 [英] Flutter Google Chart Gauge - place label within center

问题描述

我正在查看

使用Google图表量规示例，我能够实现所需的量规，但是，我正在努力根据要求设置标签。
下面是该类，我用于量规，任何帮助/提示如何添加标签将不胜感激：

  ///量表图表示例，其中数据未涵盖
 ///图表中的完整旋转。 
导入 package：charts_flutter / flutter.dart为图表； 
导入的 package：flutter / material.dart； 
导入 dart：math； 
 
类GaugeChart扩展了StatelessWidget {
 final List< charts.Series> seriesList; 
最终布尔动画； 
 
 GaugeChart（this.seriesList，{this.animate}）; 
 
工厂GaugeChart.fromValue（
 {@必需双值，@required颜色，布尔动画）} {
 return GaugeChart（
 _createDataFromValue（value，color） ，
 //禁用图像测试动画。
 animate：animate，
）; 
} 
 
 @override 
小部件构建（BuildContext上下文）{
返回图表。PieChart（
 seriesList，
 animate：animate，
 //将饼图的宽度设置为30px。
中的剩余空间//图表将保留为中心的一个孔。调整起始
 //角度和圆弧
 defaultRenderer：chart.ArcRendererConfig（
 arcWidth：20，
 startAngle：3/5 * pi，
 arcLength：9/5 * pi，
 // arcRendererDecorators：[charts.ArcLabelDecorator（labelPosition：chart.ArcLabelPosition.outside）]，
），
）; 
} 
 
静态List< charts.Series< GaugeSegment，String>> _createDataFromValue（
 double value，Color color）{
 double toShow =（1 + value）/ 2; 
最终数据= [
 GaugeSegment（'Main'，toShow，color），
 GaugeSegment（'Rest'，1-toShow，Colors.transparent），
]; 
 
 return [
 chart.Series< GaugeSegment，String>（
 id：'Segments'，
 domainFn：（GaugeSegment segment，_）=>段。 segment，
 measureFn：（GaugeSegment段，_）=> segment.value，
 colorFn：（GaugeSegment段，_）=> segment.color，
 //设置标签访问器
 labelAccessorFn：（GaugeSegment segment，_）=> 
 segment.segment =='Main'？'$ {segment.value}'：null，
 data：data，
）
]; 
} 
} 
 
 ///数据类型。 
类GaugeSegment {
最后的String段； 
美元的最终双倍价值； 
最终图表。颜色； 
 
 GaugeSegment（this.segment，this.value，Color color）
：this.color = chart.Color（
r：color.red，g：color.green，b ：color.blue，a：color.alpha）; 
} 
  

使用该类的方式如下：

  //值可以在-1和1之间
 GaugeChart.fromValue（值：0.34，颜色：Colors.red）
  

解决方案

我们使用Stack来实现：

 返回容器（
宽度：120，
高度：120，
孩子：Stack（孩子：[
 GaugeChart（_getChartData（）），
 Center（
 child：Text（
'$ percent'，
））
]）） 
  

I am looking at charts_flutter package. I need to implement a gauge chart, with a single segment and its label value at the gauge's center. See the mockup file below, where three charts from the required type are placed in a row:

Using Google chart gauge sample, I was able to implement the required gauge, however, I am struggling to set the label as per the requirement. Below is the class, I use for the gauge, any help / hints how to add the label would be greatly appreciated:

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

This is how the class can be used:

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

解决方案

We achieved this using a Stack:

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

这篇关于Flutter Google Chart Gauge-将标签放置在中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！