1
votes

Appeler plusieurs graphiques différents dans Flutter - Package charts_flutter 0.5.0

J'ai ce graphique à barres simple du package charts_flutter 0.5.0 et je veux l'appeler dans une autre page comme celle-ci, ou mon objectif est d'y intégrer plus de graphiques comme des graphiques à secteurs et d'autres une fois. pre> XXX

le code du graphique est le suivant: trouvez plus ici: https://google.github.io/charts/flutter/gallery.html

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

class SimpleBarChart extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;

  SimpleBarChart(this.seriesList, {this.animate});

  /// Creates a [BarChart] with sample data and no transition.
  factory SimpleBarChart.withSampleData() {
    return new SimpleBarChart(
      _createSampleData(),
      // Disable animations for image tests.
      animate: false,
    );
  }


  @override
  Widget build(BuildContext context) {
    return new charts.BarChart(
      seriesList,
      animate: animate,
    );
  }

  /// Create one series with sample hard coded data.
  static List<charts.Series<OrdinalSales, String>> _createSampleData() {
    final data = [
      new OrdinalSales('2014', 5),
      new OrdinalSales('2015', 25),
      new OrdinalSales('2016', 100),
      new OrdinalSales('2017', 75),
    ];

    return [
      new charts.Series<OrdinalSales, String>(
        id: 'Sales',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        data: data,
      )
    ];
  }
}

/// Sample ordinal data type.
class OrdinalSales {
  final String year;
  final int sales;

  OrdinalSales(this.year, this.sales);
}

Je reçois actuellement une page blanche avec cette erreur

E / flutter (14450): [ERROR: flutter / shell / common / shell.cc (184)] Dart Error: Exception non gérée:

E / flutter (14450): Impossible de tester une boîte de rendu qui n'a jamais été mise en page.

E / flutter (14450): La méthode hitTest () a été appelée sur cette RenderBox:

E / flutter (14450) ): RenderErrorBox # 20cd4 NEEDS-LAYOUT NEEDS-PAINT

E / flutter (14450): Malheureusement, la géométrie de cet objet n'est pas connue pour le moment, probablement parce qu'elle n'a jamais été mise en page. Cela signifie qu'il ne peut pas être testé avec précision. Si vous essayez d'effectuer un test de succès pendant la phase de mise en page elle-même, assurez-vous de ne toucher que les nœuds de test qui ont terminé la mise en page (par exemple, les enfants du nœud, après que leur méthode layout () a été appelée).

voici le package: https://pub.dartlang.org/packages/charts_flutter # -readme-tab-

flutter charts package

0 commentaires

3 Réponses :

2
votes

Le problème est que vous transmettez un objet nul ( seriesList ) dans votre constructeur BarChart .

Essayez ceci:

Widget build(BuildContext context) {
  List<Series> seriesList;

  return Scaffold(
    appBar: AppBar(
      elevation: 0,
      title: Text(
        "Charts",
        style: TextStyle(color: Colors.blueGrey),
        textAlign: TextAlign.center,
      ),
      backgroundColor: Colors.transparent,
      iconTheme: IconThemeData(color: Colors.blueGrey),
    ),
    body: SimpleBarChart.withSampleData(), //<-- I've added this line
  );
}

0 commentaires

5
votes

Juste pour les autres personnes qui verront cette question à l'avenir et qui souhaitent ajouter plusieurs graphiques différents:

body: ListView(
        children: <Widget>[
              Column(
                children: <Widget>[
                  Container(
                      width: 200.0,
                      height: 200.0,
                      child: SimpleBarChart.withSampleData()
                  ),
                  Container(
                    height: 200.0,
                    width: 200.0,
                    child: PieOutsideLabelChart.withSampleData(),
                  ),
                ],
              ),
        ],
      )

1 commentaires

comment ouvrir un nouveau graphique en cliquant sur des barres dans un graphique à barres en flutter?

1
votes

Pour obtenir plusieurs graphiques sur un seul écran, vous pouvez y parvenir avec le widget Flexible () qui est meilleur que les tailles de code en dur (à mon avis). Avec flexible, vous définissez par exemple flex: 5 sur les deux et il divisera automatiquement l'espace de manière égale dans les deux graphiques

  Column(
  children: [
    Flexible( flex: 5,
    child:
    Card(
      child:
        new charts.PieChart(
          seriesList,
          animate: animate,
            defaultRenderer: new charts.ArcRendererConfig(
                arcWidth: 30,
                arcRendererDecorators: [new charts.ArcLabelDecorator()])

        ),
    ),),
    Flexible(
      flex:5,
          child:
    Card(
      child:
      new charts.PieChart(
          seriesList,
          animate: animate,
          defaultRenderer: new charts.ArcRendererConfig(
              arcWidth: 30,
              arcRendererDecorators: [new charts.ArcLabelDecorator()])

      ),
    ),),
  ],
);

0 commentaires