饼图 charts_flutter 根据选择更改
Pie chart charts_flutter change on selection
我用 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);
},
),
],
),
),
);
}
}
我用 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);
},
),
],
),
),
);
}
}