Flutter，如何在BarChart小部件中创建可点击的条形？ [英] Flutter, How to create a clickable bar in a BarChart widget?

问题描述

我有一个 flutter 应用，需要一个条形图，在其中我可以单击条形以打开包含相关信息的新页面。 我应该怎么做？

I have a flutter App and need a Bar chart in which I can click bars to open new page with related information. How should I do it?

/// Bar chart example
charts.BarChart(
    createSampleData(),
    animate: true,
    barGroupingType: charts.BarGroupingType.stacked,
    barRendererDecorator:
        new charts.BarLabelDecorator<String>(),
    domainAxis: new charts.OrdinalAxisSpec(),
  ),

推荐答案

使用 BarChart 小部件的 selectionModels 数组属性：

Use selectionModels array property of BarChart Widget:

new charts.BarChart(
     createSampleData(),
     animate: true,
     barGroupingType: charts.BarGroupingType.stacked,
     selectionModels: [
       new charts.SelectionModelConfig(
         type: charts.SelectionModelType.info,
         changedListener: _onSelectionChanged,
       )
     ],
     barRendererDecorator:
         new charts.BarLabelDecorator<String>(),
     domainAxis: new charts.OrdinalAxisSpec(),
  ),

_onSelectionChanged(charts.SelectionModel model) {
    final selectedDatum = model.selectedDatum;

    if (selectedDatum.isNotEmpty) {
      setState(() {
        print(selectedDatum.first.datum.sales);
      });
    }
  }

这篇关于Flutter，如何在BarChart小部件中创建可点击的条形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！