flutter - Flutter 需要一个条形图，我可以在其中单击条形图以打开包含相关信息的新页面

问题描述

我需要一个条形图，我可以在其中单击条形图打开一个带有相关信息的新页面，这是我到目前为止的代码。我一直在寻找解决方案，但找不到。总的来说，这将有助于我正在构建的仪表板应用程序

import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';

class SubscriberChart extends StatelessWidget {

  final List<SubscriberSeries> data;
  final String heading;
  SubscriberChart({@required this.data, String this.heading});

  @override
  Widget build(BuildContext context) {
    List<charts.Series<SubscriberSeries, String>> series
    =  [
      charts.Series(
        id: 'SubscriberSeries',
        domainFn: (SubscriberSeries series, _) => series.year,
        measureFn: (SubscriberSeries series, _)=> series.subscribers,
        data: data,
        colorFn: (SubscriberSeries series, _)=> series.barColor,
        //Bar Label
        labelAccessorFn: (SubscriberSeries series, _)=> (series.subscribers).toString(),
      )//Series(
    ];//List

    return Container(
      height: 400,
      padding: EdgeInsets.all(20),
      child: Card(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
              children: <Widget>[
                Text( heading,
                  style: Theme.of(context).textTheme.body2, //children: <Widget>
                ),//Text
                Expanded(
                  child: charts.BarChart(series,
                      animate: true,
                      barRendererDecorator: new charts.BarLabelDecorator(),
                  // Hide domain axis.
                  //domainAxis:
                  //new charts.OrdinalAxisSpec(renderSpec: new charts.NoneRenderSpec()),
                  ),//charts.BarChart,
                )//Expanded
              ]//children: <Widget>[
          ),
        ),//Column
      ),//card
    );//Container
  }// widget build          
} //SubscriberChart2


class SubscriberSeries{
  final String year;
  final int subscribers;
  final charts.Color barColor;

  SubscriberSeries(
      {@required this.year,
        @required this.subscribers,
        @required this.barColor}
      );
}//class

标签： flutterbar-chart

flutter - Flutter 需要一个条形图，我可以在其中单击条形图以打开包含相关信息的新页面

问题描述

解决方案

推荐阅读