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

coder 2023-07-23 原文

我正在查看 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)

最佳答案

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

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

关于charts - Flutter Google Chart Gauge - 将标签放在中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54649930/

有关charts - Flutter Google Chart Gauge - 将标签放在中心的更多相关文章

ruby - 在院子里用@param 标签警告 - 2
我试图使用yard记录一些Ruby代码，尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么？
css - 用 watir 检查标签类？ - 2
我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。最佳答案试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes
ruby - 如何用 Nokogiri 解析连续的标签？ - 2
我有这样的HTML代码:Label1Value1Label2Value2...我的代码不起作用。doc.css("first").eachdo|item|label=item.css("dt")value=item.css("dd")end显示所有首先标记，然后标记标签，我需要“标签:值” 最佳答案首先，您的HTML应该有和中的元素:Label1Value1Label2Value2...但这不会改变您解析它的方式。你想找到s并遍历它们，然后在每个你可以使用next_element得到;像这样:doc=Nokogiri::HTML(
ruby-on-rails - 在 Label 标签中嵌套 Ruby on Rails HAML 复选框 - 2
我有以下不起作用的代码:=form_for(resource,:as=>resource_name,:url=>session_path(resource_name),:html=>{:class=>"well"})do|f|=f.label:email=f.email_field:email=f.label:password=f.password_field:password-ifdevise_mapping.rememberable?%p=f.label:remember_me,:class=>"checkbox"=f.check_box:remember_me,:class=>"
ruby - 如何使用 Nokogiri::XML::Builder 生成动态标签？ - 2
我正在遍历数组中的一组标签名称，我想使用构建器打印每个标签名称，而不是求助于“我认为:builder=Nokogiri::XML::Builder.newdo|xml|fortagintagsxml.tag!tag,somevalendend会这样做，但它只是创建名称为“tag”的标签，并将标签变量作为元素的文本值。有人可以帮忙吗？这个看起来应该比较简单，我刚刚在搜索引擎上找不到答案。我可能没有以正确的方式提问。最佳答案尝试以下操作。如果我没记错的话，我添加了一个根节点，因为Nokogiri需要一个。builder=Nokogi
ruby-on-rails - 如何将变量值插入 ERB 模板中的 HTML 标签？ - 2
我有一个偏爱:如何将像o.office这样的值插入到属性中？value="#{o.office}"无效。最佳答案 'type='text'/>或者你可以使用表单助手关于ruby-on-rails-如何将变量值插入ERB模板中的HTML标签？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/6172174/
ruby-on-rails - 在 Ruby 中提取 IMG 标签 - 2
是否可以从Ruby中的HTMLblock中提取IMG标签(或只是IMG标签的src属性)？例如，如果我有一个HTMLblock，例如:Loremipsumdolorsitamet,laboreetdoloremagnaaliqua.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.我可以通过正则表达式或其他方法只提取IMG标签或该IMG标签的src吗？提前感谢您的任何建议! 最佳答案使用Nokogiri:re
ruby-on-rails - 使用 stock_quote gem 中的股票报价作为 acts_as_taggable gem 中的标签？ - 2
所以我正在使用acts_as_taggablegem提供的标签。这些帖子是我正在标记的内容。我怎么能说类似=>的东西(这里是伪代码)ifacollectionofPostshasatagwithacorrespondingStockQuote,displaythestockquote所以现在我有一个acts_as_taggable的Post资源。这是我的帖子索引操作现在的样子:defindex@stock=StockQuote::Stock.quote("symbol")ifparams[:tag]@posts=Post.tagged_with(params[:tag])else@po
ruby-on-rails - 如何在 ruby on rails 中为表单字段使用 span 标签？ - 2
在我的表单中，我使用了如下的span标签:在我选择值后，它在HTML中看起来像下面这样:Antony问题是当我们创建表单时，id没有获取到数据库的值。我不知道确切的问题是。我想使用此内容标签而不是text_field来获取值。谢谢。最佳答案当您提交HTML表单时，唯一被POST的值是输入字段中的值，例如文本字段、选择、复选框、按钮等。页面上的内容——无论是否在跨度内--不会发回服务器。这不是Rails的问题，这只是HTML的工作方式。我不太确定你在这里想做什么，但是当你想显示一个值(而不是在输入框中)并将值与表单一起发回时，一种
sql - 如何查询具有 3 个标签的事件？ - 2
我有以下模型:activity.rbtag.rbtagging.rb标签是事件和标签的连接模型。我想搜索具有2个或更多标签的事件。我如何在Rails中执行此操作？例如:我有tag1=Christmas，tag2=Florida，tag3=John如果存在，我想找到tag1、tag2和tag3存在的Activity。[编辑]我最终做了什么:tags=[tag1,tag2,tag3]activities=[]tags.eachdo|tag|activities如果任何组值的大小等于tags.size，则该事件包含所有标签。最佳答案如

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

有关charts - Flutter Google Chart Gauge - 将标签放在中心的更多相关文章

随机推荐