如何在flutter饼图中实现标签上的onClick?

发布于 2025-01-19 15:18:20 字数 1725 浏览 0 评论 0原文

我正在使用 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文