Question

我有一个来自Charts_flutter 0.5.0的简单条形图，我想在另一个页面中调用它，或者我的目标是在其中添加更多的图，例如饼图和其他一些图。 / p>

 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）：[错误：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（）小部件来实现，它比硬代码大小更好（我认为）。使用flexible时，您可以在两个图表上都定义例如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()])

      ),
    ),),
  ],
);

在flutter中调用多个不同的图表-Charts_flutter 0.5.0程序包

3 个答案: