在 flutter 中調用多個不同的圖表 - charts_flutter 0.5.0 包

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)：無法對從未布局的渲染框進行命中測試。

E/flutter (14450)：在這個 RenderBox 上調用了 hitTest() 方法：

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

E/flutter (14450)：不幸的是，這個物體的幾何形狀目前未知，可能是因為它從未被布置過。 這意味着它無法准確地進行命中測試。 如果您嘗試在布局階段本身執行命中測試，請確保僅命中已完成布局的測試節點（例如，在調用 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(),
                  ),
                ],
              ),
        ],
      )

Answer 2

問題是因為您將空對象 ( seriesList ) 傳遞到BarChart構造函數中。

嘗試這個：

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
  );
}

Answer 3

要在一個屏幕中獲得多個圖表，您可以使用比硬編碼尺寸更好的 Flexible() Widget 來實現（在我看來）。 使用靈活，您可以在兩者上定義例如 flex:5 ，它會自動將空間平均分配給兩個圖表

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

      ),
    ),),
  ],
);