饼形图Charts_flutter更改选择

如何解决饼形图Charts_flutter更改选择

我用Charts_flutter创建了这样的饼图。文本小部件会随着selectionModels->changedListener的图表选择而改变。

所以我有一个问题，是否有一种方法可以更改用户可以看到的所选项目的颜色或arcWidth，选择了哪个项目。还是有另一种方式显示用户选择的项目？

这是代码

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

解决方法

你可以使用一个行为，像这样：

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

,

我没有找到使用Charts_flutter库的方法，因此将其更改为fl_chart。并且here您可以找到一些示例。