时间戳

首页 > 解决方案 > 当 defaultRender 设置为非常基本的 ArcRendererConfig() 时，Flutter GoogleChart 饼图不呈现

flutter - 当 defaultRender 设置为非常基本的 ArcRendererConfig() 时，Flutter GoogleChart 饼图不呈现

问题描述

使用以下 PieChart 小部件按预期显示图表。

class ABCPieChart extends StatefulWidget {
  @override
  _ABCPieChartState createState() => _ABCPieChartState();
}

class _TABCPieChartState extends State<ABCPieChart> {
  List<charts.Series<ChartEntity, String>> _entities = List();

  _initData() {
    var values = [
      ChartEntity("Food", 30, Colors.greenAccent),
      ChartEntity("Clothing", 30, Colors.cyan),
      ChartEntity("Fashion", 20, Colors.red),
      ChartEntity("Gadgets", 20, Colors.blue),
    ];

    _entities.add(charts.Series(
        data: values,
        domainFn: (ChartEntity entity, _) => entity.title,
        measureFn: (ChartEntity entity, _) => entity.percentage,
        colorFn: (ChartEntity entity, _) =>
            charts.ColorUtil.fromDartColor(entity.color),
        id: "random chart",
        labelAccessorFn: (ChartEntity entity, _) => "${entity.percentage}"));
  }

  @override
  void initState() {
    super.initState();
    _entities = List<charts.Series<ChartEntity, String>>();
    _initData();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 400.0,
      width: 400,
      child: charts.PieChart(
        _entities,
        animate: true,
        animationDuration: Duration(milliseconds: 500),
      ),
    );
  }
}

没有默认渲染器 但是当我尝试将其自定义为甜甜圈形状时，即使添加了一个非常基本defaultRenderer的，图表也不再呈现在屏幕上。

 class ABCPieChart extends StatefulWidget {
  @override
  _ABCPieChartState createState() => _ABCPieChartState();
}

class _TABCPieChartState extends State<ABCPieChart> {
  List<charts.Series<ChartEntity, String>> _entities = List();

  _initData() {
    var values = [
      ChartEntity("Food", 30, Colors.greenAccent),
      ChartEntity("Clothing", 30, Colors.cyan),
      ChartEntity("Fashion", 20, Colors.red),
      ChartEntity("Gadgets", 20, Colors.blue),
    ];

    _entities.add(charts.Series(
        data: values,
        domainFn: (ChartEntity entity, _) => entity.title,
        measureFn: (ChartEntity entity, _) => entity.percentage,
        colorFn: (ChartEntity entity, _) =>
            charts.ColorUtil.fromDartColor(entity.color),
        id: "random chart",
        labelAccessorFn: (ChartEntity entity, _) => "${entity.percentage}"));
  }

  @override
  void initState() {
    super.initState();
    _entities = List<charts.Series<ChartEntity, String>>();
    _initData();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 400.0,
      width: 400,
      child: charts.PieChart(
        _entities,
        animate: true,
        animationDuration: Duration(milliseconds: 500),
        defaultRenderer: charts.ArcRendererConfig(),

      ),
    );
  }
}

添加 defaultRenderer 后

即使我在这里复制并粘贴来自 google sample 的代码，它也不会呈现。（在 hotreload、Hotrestart 和 Coldrestart 中都没有）

此问题仅适用于PieChart and ArcRendererConfig. BarChart正常BarRendererConfig工作

我认为这可能是设置问题，或者可能错过了一个非常小但至关重要的东西，有人知道可能出了什么问题吗？

我已经在 Github 上交叉发布了这个问题，希望这个问题会被 GitHub 和 SO（我就是其中之一）中任何不相交的观众看到。不是为了发送垃圾邮件或惹恼任何人。

标签： flutterchartsdartgoogle-visualizationflutter-plugin

解决方案

这里可能有一个解决方案

我得到了（在我的情况下是条形图）：

 defaultRenderer: new charts.BarRendererConfig(
    fillPattern: charts.FillPatternType.solid,
    //customRendererId: "id",
    barRendererDecorator: charts.BarLabelDecorator(
        labelPosition: charts.BarLabelPosition.auto,
        labelAnchor: charts.BarLabelAnchor.middle),
    cornerStrategy: const charts.ConstCornerStrategy(10),
  ),

推荐阅读