使用fl_chart 实现一张坐标轴画两条折线

以下是一个示例，使用fl_chart库绘制两条折线图：

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

class CoordinateChart extends StatefulWidget {
  @override
  _CoordinateChartState createState() => _CoordinateChartState();
}

class _CoordinateChartState extends State<CoordinateChart> {
  List<FlSpot> line1 = [
    FlSpot(0, 3),
    FlSpot(1, 4),
    FlSpot(2, 3.5),
    FlSpot(3, 5),
    FlSpot(4, 4.5),
    FlSpot(5, 6),
  ];

  List<FlSpot> line2 = [
    FlSpot(0, 1),
    FlSpot(1, 2),
    FlSpot(2, 1.5),
    FlSpot(3, 3),
    FlSpot(4, 2.5),
    FlSpot(5, 4),
  ];

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 1.5,
      child: LineChart(
        LineChartData(
          lineTouchData: LineTouchData(enabled: false),
          gridData: FlGridData(
            show: true,
            horizontalInterval: 1.0,
            getDrawingHorizontalLine: (value) {
              return FlLine(
                color: Colors.grey[300],
                strokeWidth: 1.0,
              );
            },
            verticalInterval: 1.0,
            getDrawingVerticalLine: (value) {
              return FlLine(
                color: Colors.grey[300],
                strokeWidth: 1.0,
              );
            },
          ),
          titlesData: FlTitlesData(
            show: true,
            bottomTitles: SideTitles(
              showTitles: true,
              reservedSize: 22,
              textStyle: TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.bold,
                fontSize: 14,
              ),
              margin: 10,
              getTitles: (value) {
                switch (value.toInt()) {
                  case 0:
                    return 'Jan';
                  case 1:
                    return 'Feb';
                  case 2:
                    return 'Mar';
                  case 3:
                    return 'Apr';
                  case 4:
                    return 'May';
                  case 5:
                    return 'Jun';
                }
                return '';
              },
            ),
            leftTitles: SideTitles(
              showTitles: true,
              textStyle: TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.bold,
                fontSize: 14,
              ),
              margin: 10,
              reservedSize: 22,
              getTitles: (value) {
                switch (value.toInt()) {
                  case 0:
                    return '0';
                  case 1:
                    return '1k';
                  case 2:
                    return '2k';
                  case 3:
                    return '3k';
                  case 4:
                    return '4k';
                  case 5:
                    return '5k';
                  case 6:
                    return '6k';
                }
                return '';
              },
            ),
          ),
          borderData: FlBorderData(
            show: true,
            border: Border.all(
              color: Colors.grey[300],
              width: 1,
            ),
          ),
          minX: 0,
          maxX: 5,
          minY: 0,
          maxY: 6,
          lineBarsData: [
            LineChartBarData(
              spots: line1,
              isCurved: true,
              colors: [Colors.blue],
              barWidth: 2,
              isStrokeCapRound: true,
              dotData: FlDotData(show: false),
            ),
            LineChartBarData(
              spots: line2,
              isCurved: true,
              colors: [Colors.red],
              barWidth: 2,
              isStrokeCapRound: true,
              dotData: FlDotData(show: false),
            ),
          ],
        ),
      ),
    );
  }
}

这个示例创建了一个CoordinateChart小部件，它包含两个List<FlSpot>，分别表示两条折线的坐标点。

在LineChartData中，我们使用FlGridData来添加网格线。我们还使用FlTitlesData添加了Y轴和X轴标签。FlBorderData用于绘制边框。最后，我们使用LineChartBarData添加两条折线图，每个数据点都是一个FlSpot。我们使用不同的颜色、线宽和isCurved属性为每个线条设置了不同的属性。

最后，我们将LineChart小部件包装在AspectRatio小部件中，以确保它在不同屏幕大小的情况下保持相同的宽高比。