如何在flutter饼图中实现标签上的onClick?
我正在使用 Charts_flutter 库库显示PIECHART。我试图实现的是,当您点击图表的一部分或关联的标签(在外面呈现)时,它会导航到页面。我已经找到了方法,选择了Piechart的一部分并相应地导航,但是由于图中有非常苗条的部分,因此几乎不可能单击它们,因此我需要能够单击其标签,并且仍然导航。这可能吗?
final rendererConfig = charts.ArcRendererConfig(arcWidth: 65, arcRendererDecorators: [
charts.ArcLabelDecorator(
insideLabelStyleSpec: const charts.TextStyleSpec(fontSize: 12, color: charts.Color.black), labelPosition: charts.ArcLabelPosition.outside)
]);
List<charts.Series<CropSeries, String>> series = [
charts.Series(
id: "PieChart",
data: data,
domainFn: (CropSeries series, _) => series.name,
measureFn: (CropSeries series, _) => series.totalArea,
colorFn: (CropSeries series, _) => series.color,
labelAccessorFn: (CropSeries series, _) => '${series.name}: ${numberFormat.format(series.totalArea)} ${series.areaUnit}',
)
];
return charts.PieChart(series, animate: true, defaultRenderer: rendererConfig, selectionModels: [
charts.SelectionModelConfig(
changedListener: (SelectionModel model) {
if (model.hasDatumSelection) {
String cropRotation = model.selectedSeries.first.domainFn(model.selectedDatum.first.index);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => VarietyRotationScreen(cropRotationName: cropRotation),
),
);
}
},
)
]);
I'm using charts_flutter library to display a piechart. What I try to achive, is that, when you tap either a part of the chart, or the associated label (which is rendered outside), it navigates to a page. I have already found the way, to select a section of the piechart, and navigate accordingly, but since there are very slim parts of the diagram, it's nearly impossible to click on them, so i need to be able to click on its labels, and still navigate. Is this possible?
final rendererConfig = charts.ArcRendererConfig(arcWidth: 65, arcRendererDecorators: [
charts.ArcLabelDecorator(
insideLabelStyleSpec: const charts.TextStyleSpec(fontSize: 12, color: charts.Color.black), labelPosition: charts.ArcLabelPosition.outside)
]);
List<charts.Series<CropSeries, String>> series = [
charts.Series(
id: "PieChart",
data: data,
domainFn: (CropSeries series, _) => series.name,
measureFn: (CropSeries series, _) => series.totalArea,
colorFn: (CropSeries series, _) => series.color,
labelAccessorFn: (CropSeries series, _) => '${series.name}: ${numberFormat.format(series.totalArea)} ${series.areaUnit}',
)
];
return charts.PieChart(series, animate: true, defaultRenderer: rendererConfig, selectionModels: [
charts.SelectionModelConfig(
changedListener: (SelectionModel model) {
if (model.hasDatumSelection) {
String cropRotation = model.selectedSeries.first.domainFn(model.selectedDatum.first.index);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => VarietyRotationScreen(cropRotationName: cropRotation),
),
);
}
},
)
]);
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论