charts - 在 flutter 中调用多个不同的图表 - charts_flutter 0.5.0 Package

Question

我有一个来自 charts_flutter 0.5.0 包的简单条形图，我想像这样在另一个页面中调用它，或者我的目标是像饼图一样将更多图表放入其中。

 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: ListView(
        children: <Widget>[
          SimpleBarChart(seriesList), //<-- I've added this line
        ],
      ),
    );
  }

图表的代码是这样的:在这里找到更多: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);
}

目前我得到一个白页，有这个错误

E/flutter (14450): [ERROR:flutter/shell/common/shell.cc(184)] Dart 错误:未处理的异常:

E/flutter (14450): 无法 HitTest 从未布局过的渲染框。

E/flutter (14450): 在此 RenderBox 上调用了 hitTest() 方法:

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

E/flutter (14450): 不幸的是，这个对象的几何形状此时未知，可能是因为它从未被布局过。这意味着它无法进行准确的 HitTest 。如果您尝试在布局阶段本身执行 HitTest ，请确保您只命中已完成布局的测试节点(例如，节点的子节点，在其 layout() 方法被调用后)。

这是包裹:https://pub.dartlang.org/packages/charts_flutter#-readme-tab-

Answer 1

仅供将来看到此问题并希望添加多个不同图表的其他人使用:

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(),
                  ),
                ],
              ),
        ],
      )