饼图charts_flutter 选择时的变化答案

【问题标题】：Pie chart charts_flutter change on selection饼图charts_flutter 选择时的变化
【发布时间】：2020-09-03 16:11:47
【问题描述】：

我用charts_flutter 创建了这样的饼图。使用selectionModels->changedListener 选择图表时，文本小部件会发生变化。

所以我有一个问题，有没有办法改变所选项目的颜色或弧宽，用户可以看到他选择了哪个项目。或者是否存在另一种方式来显示用户选择的项目？

这里是代码

class OutcomeChart extends StatefulWidget {
  @override
  _OutcomeChartState createState() => _OutcomeChartState();

  Widget _buildLabel({String label, double money}) {
    return Center(
      child: SizedBox(
        width: 150,
        child: Text(
          '$label\n$money',
          overflow: TextOverflow.ellipsis,
          textAlign: TextAlign.center,
          style: TextStyle(fontSize: 18),
        ),
      ),
    );
  }
}

class _OutcomeChartState extends State<OutcomeChart> {
  String _categoryName = '';
  double _money = 0;

  List<charts.Series<Map, dynamic>> _createSampleData(List<Map> data) {
    return [
      new charts.Series<Map, dynamic>(
        id: 'Sales',
        domainFn: (Map item, _) => item['category_id'],
        measureFn: (Map item, _) => item['money'],
        data: data,
      )
    ];
  }

  void _onSelectionChanged(charts.SelectionModel model) {
    if (model.hasDatumSelection) {
      final selectedDatum = model.selectedDatum.first;

      setState(() {
        _categoryName = selectedDatum.datum['category_name'];
        _money = selectedDatum.datum['money'].toDouble();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      child: SizedBox(
        height: 450,
        child: Stack(
          children: [
            BlocBuilder<HomePageBloc, HomePageState>(
              builder: (context, state) {
                var data = state is HomePageDataLoaded
                    ? state.outcome
                    : <Map<dynamic, dynamic>>[];

                var widgets = <Widget>[
                  charts.PieChart(
                    _createSampleData(data),
                    defaultInteractions: true,
                    animate: false,
                    behaviors: [
                      new charts.SelectNearest(),
                      charts.DomainHighlighter(),
                    ],
                    selectionModels: [
                      charts.SelectionModelConfig(
                        type: charts.SelectionModelType.info,
                        changedListener: _onSelectionChanged,
                      )
                    ],
                    defaultRenderer: charts.ArcRendererConfig(
                      arcWidth: 60,
                    ),
                  )
                ];

                if (0 == _money) {
                  var sum = 0;
                  data
                      .map((e) => e['money'])
                      .forEach((element) => sum += element);
                  widgets.add(widget._buildLabel(money: sum.toDouble(), label: 'All'));
                } else {
                  widgets.add(
                      widget._buildLabel(money: _money, label: _categoryName));
                }

                return Stack(children: widgets);
              },
            ),
          ],
        ),
      ),
    );
  }
}

【问题讨论】：

Ihor，你能找到这个问题的答案吗？
@max.kuzmentsov 不，有这个包。我选择pub.dev/packages/fl_chart
你可以用这个回复来回答你自己的问题，fl_chart 似乎工作得更好

标签： flutter dart pie-chart

【解决方案1】：

你可以使用这样的行为：

behaviors: [
    new charts.InitialSelection(selectedDataConfig: [
      new charts.SeriesDatumConfig<String>('Purchases', 'Eating Out'),
    ]),
    new charts.DomainHighlighter(),
  ],

【讨论】：

如何以编程方式选择或突出显示饼图切片？例如 - 由于一些其他要求，我没有使用默认的饼图图例，而是使用我自己的饼图图例。单击任何图例值时，我想突出显示或选择与该值关联的饼图。

【解决方案2】：

我没有找到如何使用charts_flutter 库，所以我将其更改为fl_chart。 here 你可以找到一些例子。

【讨论】：