Current state:

now

Expected:

aim_1 aim_2

I tried,

  behaviors: [charts.SeriesLegend(desiredMaxColumns: 2)],

But, it has been fixed to two columns. The number of lines and the legend length are variable.

What should I do?

回答1:

This isn't an out-of-the-box solution but you can create your own custom legend builder and layout your legend however you see fit by extending the charts.LegendContentBuilder class.

class CustomLegendBuilder extends charts.LegendContentBuilder{
  @override
  Widget build(BuildContext context, LegendState legendState, Legend legend, {bool showMeasures}) {
    /*
      Implement your custom layout logic here. You should take into account how long
      your legend names are and how many legends you have. For starters you
      could put each legend on its own line.
    */

    return Container(
      color: Colors.red,
      height: 25.0,
      child: Text('MY CUSTOM LEGEND'),
    );
  }
}

Now when you construct your chart add the following behavior:

...
  behaviors: [
    charts.SeriesLegend.customLayout(
      CustomLegendBuilder(),
      // Other legend properties here
    ),
  ],
...

回答2:

Sample code for this problem.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(),
      body: SimpleLineChart.withRandomData(),
    ));
  }
}

class SimpleLineChart extends StatelessWidget {
  final List<charts.Series> seriesList;

  SimpleLineChart(this.seriesList);

  factory SimpleLineChart.withRandomData() {
    return SimpleLineChart(
      _createRandomData(),
    );
  }

  /// Create random data.
  static List<charts.Series<LinearSales, num>> _createRandomData() {
    final random = Random();
    List<charts.Series<LinearSales, int>> s = [];
    for (var i = 0; i < random.nextInt(6); ++i) {
      final data = [
        LinearSales(0, random.nextInt(100)),
        LinearSales(1, random.nextInt(100)),
        LinearSales(2, random.nextInt(100)),
        LinearSales(3, random.nextInt(100)),
      ];
      String title1 = random.nextInt(1000).toString();
      String title2 = random.nextInt(10000).toString();
      s.add(
        charts.Series<LinearSales, int>(
          id: 'legend_${title1}_${title2}',
          domainFn: (LinearSales sales, _) => sales.year,
          measureFn: (LinearSales sales, _) => sales.sales,
          data: data,
        ),
      );
    }
    return s;
  }

  @override
  Widget build(BuildContext context) {
    return charts.LineChart(
      seriesList,
      behaviors: [charts.SeriesLegend()],
    );
  }
}

/// Sample linear data type.
class LinearSales {
  final int year;
  final int sales;

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

回答3:

I tried "desiredMaxColumns: 5" with 10 items. But, it did not work. I could see 6 legends.

来源：https://stackoverflow.com/questions/59111701/how-can-i-automatically-wrap-the-charts-flutter-legends

标签

Flutter

legend