Question

我有一个应用程序的基本代码，该代码只需在4个选项卡之间导航，而在第三个选项卡上，我试图使用Charts_flutter添加图形

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      color: Colors.yellow,
      home: DefaultTabController(
        length: 4,
        child: Scaffold(
          body: TabBarView(
            children: [
              Container(
                color: Colors.yellow,
              ),
              Container(
                color: Colors.white,
                child: GenesTableTab(),
              ),
              Container(
                color: Colors.lightGreen[100],
                child: charts.ScatterPlotChart(
                  _createSampleData(),
                  animate: false,
                ),
              ),
              Container(
                color: Colors.red,
              ),

我正在尝试使用charts_flutter绘制散点图。
具体来说，我依靠的是example from the docs

因此以下代码片段直接来自文档：

List<charts.Series<LinearSales, int>> _createSampleData() {
  final data = [
    new LinearSales(0, 5, 3.0, 'circle', null, null),
    new LinearSales(10, 25, 5.0, null, null, null),
    new LinearSales(12, 75, 4.0, null, null, null),
    // Render a hollow circle, filled in with white.
    new LinearSales(13, 225, 5.0, 'circle', charts.MaterialPalette.white, 2.0),
    new LinearSales(16, 50, 4.0, null, null, null),
    new LinearSales(24, 75, 3.0, null, null, null),
    new LinearSales(25, 100, 3.0, 'circle', null, null),
    new LinearSales(34, 150, 5.0, null, null, null),
    new LinearSales(37, 10, 4.5, null, null, null),
    // Render a hollow circle, filled in with white.
    new LinearSales(45, 300, 8.0, 'circle', charts.MaterialPalette.white, 2.0),
    new LinearSales(52, 15, 4.0, null, null, null),
    // Render a hollow square, filled in with white.
    new LinearSales(56, 200, 7.0, null, charts.MaterialPalette.white, 2.0),
  ];

  final maxMeasure = 300;

  return [
    new charts.Series<LinearSales, int>(
      id: 'Sales',
      // Providing a color function is optional.
      colorFn: (LinearSales sales, _) {
        // Bucket the measure column value into 3 distinct colors.
        final bucket = sales.sales / maxMeasure;

        if (bucket < 1 / 3) {
          return charts.MaterialPalette.blue.shadeDefault;
        } else if (bucket < 2 / 3) {
          return charts.MaterialPalette.red.shadeDefault;
        } else {
          return charts.MaterialPalette.green.shadeDefault;
        }
      },
      domainFn: (LinearSales sales, _) => sales.year,
      measureFn: (LinearSales sales, _) => sales.sales,
      radiusPxFn: (LinearSales sales, _) => sales.radius,
      fillColorFn: (LinearSales row, _) => row.fillColor,
      strokeWidthPxFn: (LinearSales row, _) => row.strokeWidth,
      data: data,
    )
      // Accessor function that associates each datum with a symbol renderer.
      ..setAttribute(
          charts.pointSymbolRendererFnKey, (int index) => data[index].shape)
      // Default symbol renderer ID for data that have no defined shape.
      ..setAttribute(charts.pointSymbolRendererIdKey, 'rect')
  ];
}

class LinearSales {
  final int year;
  final int sales;
  final double radius;
  final String shape;
  final charts.Color fillColor;
  final double strokeWidth;

  LinearSales(this.year, this.sales, this.radius, this.shape, this.fillColor,
      this.strokeWidth);
}

运行应用程序时，可以看到网格，但是看不到任何要点。我在做什么错了？

是这样的：

散点图未显示在颤动应用程序上

0 个答案: