Simulator Screen Shot - iPhone 12 Pro Max - 2021-05-04 at 00.31.45.png

image.png

image.png

image.png

附上开发环境：

MacBook-Pro:~ xun$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.3, on macOS 11.2.3 20D91 darwin-x64, locale
    zh-Hans)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
[!] Xcode - develop for iOS and macOS
    ! CocoaPods 1.9.1 out of date (1.10.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see
      https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.55.2)
[✓] Connected device (2 available)

一 基本集成

折线图是一个 Widget，和普通 Widget一样声明即可：

LineChart(
              sampleData(),
            ),

LineChart的构造参数是一个LineChartData，其属性如下：

  /// 配置文件
  LineChartData sampleData() {
    return LineChartData(
      //? 是否可以点击
      lineTouchData: LineTouchData(
        enabled: enableLineTouchData,
      ),
      //? 网格线配置
      gridData: FlGridData(
        show: showGridData,
      ),
      axisTitleData: _buildFlAxisTitleData(),
      //? 标题
      titlesData: _buildTitles(),
      //? 边框
      borderData: _buildBorderData(),
      minX: 0,
      maxX: 14,
      maxY: 6,
      minY: 0,
      //? 线条数据
      lineBarsData: linesBarDatas(),
    );
  }

二 线条配置

配置了三条线，所以lineBarsData对应的数组有三个元素。

//? 绿线的配置
LineChartBarData(
        //? 取样点
        spots: [
          FlSpot(1, 1),
          FlSpot(3, 4),
          FlSpot(5, 1.8),
          FlSpot(7, 5),
          FlSpot(10, 2),
          FlSpot(12, 2.2),
          FlSpot(13, 1.8),
        ],
        //? 是否是曲线
        isCurved: isCurved1,
        // curveSmoothness: 0,
        colors: const [
          Color(0x444af699),
        ],
        //? 线的宽度
        barWidth: 4,
        //? 线头是否是圆形
        isStrokeCapRound: true,
        //? 是否显示数据点
        dotData: FlDotData(
          show: false,
        ),
        //? 是否显示线上区域
        aboveBarData: BarAreaData(show: showAboveBarData, colors: [
          const Color(0x444af699),
        ]),
      )

看下LineChartBarData属性：

三 边框配置

图表四个方向的边框，有总显示开关，决定是否显示和隐藏所有，如果开启，又想隐藏个别边框，需要设置透明色。

 //? 边框信息
  FlBorderData _buildBorderData() {
    return FlBorderData(
        show: showBorderData,
        border: Border(
          bottom: showBottomBorder
              ? BorderSide(
                  color: Color(0xff4e4965),
                  width: 4,
                )
              : BorderSide(
                  color: Colors.transparent,
                ),
          left: showLeftBorder
              ? BorderSide(
                  color: Color(0xff4e4965),
                  width: 2,
                )
              : BorderSide(
                  color: Colors.transparent,
                ),
          right: BorderSide(
            color: Colors.transparent,
          ),
          top: BorderSide(
            color: Colors.transparent,
          ),
        ));
  }

FlBorderData对应边框信息，有两个参数，show就是显示与隐藏的边框，border是边框数据。

四 坐标轴配置

FlTitlesData可以配置4条坐标轴，也有一个总开关，如果要显示坐标轴，就设为true，然后配置对应位置的数据：

  //? 坐标配置
  FlTitlesData _buildTitles() {
    return FlTitlesData(
      //? 下边标题
      bottomTitles: _buildBottomTitle(),
      //? 左侧标题
      leftTitles: _buildLeftTitle(),
    );
  }

每个位置对应的是SideTitles，设置如下：

 SideTitles _buildLeftTitle() {
    return SideTitles(
      showTitles: showlLeftTitles,
      getTextStyles: (value) => const TextStyle(
        color: Color(0xff75729e),
        fontWeight: FontWeight.bold,
        fontSize: 14,
      ),
      getTitles: (value) {
        switch (value.toInt()) {
          case 1:
            return '1m';
          case 2:
            return '2m';
          case 3:
            return '3m';
          case 4:
            return '5m';
          case 5:
            return '6m';
        }
        return '';
      },
      margin: 8,
      reservedSize: 30,
    );
  }

五 标题配置

标题是显示在坐标轴后面的文字标题，每个轴对应一个。

  //? 标题配置
  FlAxisTitleData _buildFlAxisTitleData() {
    return FlAxisTitleData(
      leftTitle: AxisTitle(titleText: "侧轴标题", showTitle: showAxisLeftTitle),
      bottomTitle: AxisTitle(titleText: "底部标题", showTitle: showAxisBottomTitle),
    );
  }

六 配置触摸

附上源码