Как на fl_chart в одной линейной диаграмме вывести два графика и подогнать их рисунок по минимумах и максимумах?

Для рисования двух графиков на одной линейной диаграмме с использованием fl_chart в Flutter, вы можете использовать компонент LineChart. Для того, чтобы подогнать рисунок по минимумам и максимумам, вам понадобится контролировать значения осей X и Y, а также установить параметры отображения для линий графиков.

Вот пример кода, который показывает, как рисовать два графика на одной линейной диаграмме с использованием fl_chart:

import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';

class TwoLineChartsScreen extends StatefulWidget {
  @override
  _TwoLineChartsScreenState createState() => _TwoLineChartsScreenState();
}

class _TwoLineChartsScreenState extends State<TwoLineChartsScreen> {
  final List<FlSpot> data1 = [
    FlSpot(0, 2.0),
    FlSpot(1, 1.5),
    FlSpot(2, 2.2),
    FlSpot(3, 1.8),
    FlSpot(4, 3.5),
    FlSpot(5, 2.5),
  ];

  final List<FlSpot> data2 = [
    FlSpot(0, 1.0),
    FlSpot(1, 1.2),
    FlSpot(2, 1.5),
    FlSpot(3, 1.0),
    FlSpot(4, 2.0),
    FlSpot(5, 1.8),
  ];

  double getMinYValue() {
    double minValue = data1[0].y;
    data1.forEach((spot) {
      if (spot.y < minValue) minValue = spot.y;
    });

    data2.forEach((spot) {
      if (spot.y < minValue) minValue = spot.y;
    });

    return minValue;
  }

  double getMaxYValue() {
    double maxValue = data1[0].y;
    data1.forEach((spot) {
      if (spot.y > maxValue) maxValue = spot.y;
    });

    data2.forEach((spot) {
      if (spot.y > maxValue) maxValue = spot.y;
    });

    return maxValue;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Two Line Charts'),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: LineChart(
          LineChartData(
            minX: 0,
            maxX: 5,
            minY: getMinYValue() - 0.5,
            maxY: getMaxYValue() + 0.5,
            titlesData: FlTitlesData(
              bottomTitles: SideTitles(
                showTitles: true,
                interval: 1,
                getTitles: (value) {
                  return value.toInt().toString();
                },
              ),
              leftTitles: SideTitles(
                showTitles: true,
                interval: 0.5,
                getTitles: (value) {
                  return value.toStringAsFixed(1);
                },
              ),
            ),
            lineBarsData: [
              LineChartBarData(
                spots: data1,
                color: Colors.blue,
                isCurved: true,
                barWidth: 2,
                dotData: FlDotData(show: false),
                belowBarData: BarAreaData(show: false),
              ),
              LineChartBarData(
                spots: data2,
                color: Colors.red,
                isCurved: true,
                barWidth: 2,
                dotData: FlDotData(show: false),
                belowBarData: BarAreaData(show: false),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

В этом примере, мы создаем класс TwoLineChartsScreen, который является состоянием виджета. У нас есть два списки data1 и data2, которые содержат значения точек для каждого графика.

Мы вводим два метода, getMinYValue и getMaxYValue, чтобы найти минимальное и максимальное значение Y из наших данных. Мы используем эти значения для установки минимальной и максимальной границ на оси Y в LineChartData. Для оси X мы устанавливаем минимальное значение 0 и максимальное значение 5.

Затем мы создаем LineChart, который принимает LineChartData. Мы устанавливаем minX, maxX, minY и maxY в LineChartData, чтобы определить границы графика.

Мы также устанавливаем параметры для отображения графиков с помощью LineChartBarData. Мы используем цвета Colors.blue и Colors.red, чтобы указать цвета графиков. Мы также устанавливаем значение isCurved в true, чтобы сделать график кривым.

Наша диаграмма будет иметь интервалы для меток по оси X и Y, которые мы устанавливаем в titlesData с помощью FlTitlesData. Мы используем SideTitles для установки меток и параметров для оси X и Y.

Наконец, мы помещаем нашу LineChart внутрь контейнера и выводим его в Scaffold в методе build.

Этот код рисует два графика на одной линейной диаграмме и подгоняет их рисунок по минимумам и максимумам. Вы можете изменить значения в списках data1 и data2, чтобы отобразить свои данные, и настроить другие параметры по своему усмотрению.