如何通过flutter(charts_flutter)在饼图上添加图例?

时间:2018-08-16 14:46:34

标签: dart flutter

我想使用Charts_flutter包在我的饼图中添加图例。我该怎么办?

1 个答案:

答案 0 :(得分:1)

我实施了一个肮脏的解决方案。通过在饼图附近添加新的小部件作为图例。

    Widget pieChart3()=>new Container(
      color:Colors.white,
      height: 220.0,
      width: 220.0,
      child:Stack(
          children: <Widget>[
            Positioned(
              top: 50.0,
              right: 10.0,
              child:   new Container(
                    height: 180,
                    width: 280,
                    color:Colors.white,
                    child:new charts.PieChart(seriesList,
                        animate: animate,
                        defaultRenderer: new charts.ArcRendererConfig(
                          arcRendererDecorators: [
                            new charts.ArcLabelDecorator(
                              //labelPadding:-25,
                                labelPosition: charts.ArcLabelPosition.outside),
                          ],
                          arcWidth: 30,
                        )
                    )
                )
            ),
            Positioned(
              bottom: 20.0,
              left: 10.0,
              child: new Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children:listWidgets(slices)
              ),
            ),
          ]
      )
  );

并且其中列出了图例项。

      List<Widget> listWidgets(List<Slice> sliceList) {
    List<Widget> list = sliceList == null ? new List() : sliceList.map((value) {
      return new Row(
          crossAxisAlignment:  CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(width: 10.0),
            Container(
                color: Color.fromARGB(value.color.a, value.color.r, value.color.g,value.color.b),
                width: 10.0,
                height: 15.0,
            ),
            Container(width: 5.0),
            new Text(value.name),
          ]
      );
    }).toList();
    return list;
  }

和Slice类

    class Slice {
  final String name;
  final int percent;
  final Color color;

  Slice(this.color,this.name, this.percent);
}

pie chart with legend widget