Flutter圖表庫fl_chart的使用解析(二)-折線圖

附上開發環境：

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，其屬性如下：

屬性名稱	描述	默認值
lineBarsData	圖表要展示的線的數組，數組的每一位代表一條線。	[]
betweenBarsData	填充2條圖表線之間的區域	[]
titlesData	座標，可以設置四個方向的標題	FlTitlesData（）
axisTitleData	標題	FlAxisTitleData（）
extraLinesData	額外的水平和垂直線的圖形細節
lineTouchData	觸摸交互詳細信息	LineTouchData（）
rangeAnnotations	在圖表後面顯示範圍註釋，請檢查RangeAnnotations	RangeAnnotations（）
showingTooltipIndicators	根據提供的位置（x）顯示工具提示，以及LineBarSpot的列表	[]
gridData	網格數據	FlGridData（）
borderData	邊框數據	FlBorderData（）
minX	獲取x軸的最小值x，如果爲null，從lineBars中讀取值	null
maxX	獲取x軸的最大x，如果爲null，從lineBars中讀取值	null
minY	獲取y軸的最小y，如果爲null，從lineBars中讀取值	null
maxY	獲取y軸的最大y，如果爲null，從lineBars中讀取值	null
clipData	將圖表裁剪到邊框（防止繪圖超出邊框）	FlClipData.none（）
backgroundColor	圖表後面繪製的背景色	null

  /// 配置文件
  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屬性：

屬性名稱	描述	默認值
show	是否顯示或隱藏線條	True
spots	要展示的線條數據點，參考 FlSpot	[]
colors	線條顏色，如果提供了多種顏色，則將爲漸變色	[Colors.redAccent]
colorStops	獲取漸變顏色的停止位置，瞭解更多	null
gradientFrom	確定漸變梯度的開始，每個數字應介於0和1之間。閱讀更多	Offset（0，0）
gradientTo	確定漸變的結束，每個數字應介於0和1之間。閱讀更多	Offset（1，0）
barWidth	線條的寬度	2.0
isCurved	是平滑曲線還是折線	false
curveSmoothness	曲線角的平滑度半徑（當isCurved爲true時起作用）	0.35
preventCurveOverShooting	防止在線性序列點上繪製曲線時出現過沖，請檢查此問題	false
preventCurveOvershootingThreshold	應用防止過沖算法的閾值	10.0
isStrokeCapRound	確定條形線的起點和終點是直角頭還是圓頭	false
belowBarData	線條下面填充，參考BarAreaData	BarAreaData
aboveBarData	線條上面填充，參考BarAreaData](https://github.com/imaNNeoFighT/fl_chart/blob/master/repo_files/documentations/line_chart.md#BarAreaData)	BarAreaData
dotData	數據點，參考FlDotData	FlDotData（）
showingIndicators	根據提供的索引顯示座標	[]
dashArray	破折號偏移量和長度的圓形數組。例如，該數組[5, 10]將導致長5像素的短劃線，然後是10像素長的空白。該陣列[5, 10, 5]將導致5像素破折號，10像素破折號，5像素破折號，5像素破折號，10像素破折號等。	Null
shadow	線條陰影，參見“陰影”。	陰影（）
isStepLineChart	如果設置爲true，則使用繪製“折線圖”樣式的圖表lineChartStepData。	false
lineChartStepData	保存用於表示步驟折線圖的數據，並且僅在[isStepChart]爲true時纔有效。	LineChartStepData（）

三 邊框配置

圖表四個方向的邊框，有總顯示開關，決定是否顯示和隱藏所有，如果開啓，又想隱藏個別邊框，需要設置透明色。

 //? 邊框信息
  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,
    );
  }

屬性名稱	描述	默認值
showTitles	確定是顯示還是隱藏標題	false
getTitles	該函數可檢索相關軸上具有給定值的標題，如果要通過顯示大數字的指示符來設置數字格式器，請不要觸摸它。	defaultGetTitle
reservedSize	保留的標題空間，如果設置axisTitleData，這裏要留出空間，不然會重疊	22
textStyle	文字屬性TextStyle the style to use for title text	TextStyle(color: Colors.black, fontSize: 11)
margin	文字和邊框的間距	6
interval	間隔幾個座標顯示	null
rotateAngle	旋轉標題的順時針角度	0.0
checkToShowTitle	確定以提供的值顯示或不顯示標題	show all

五 標題配置

標題是顯示在座標軸後面的文字標題，每個軸對應一個。

  //? 標題配置
  FlAxisTitleData _buildFlAxisTitleData() {
    return FlAxisTitleData(
      leftTitle: AxisTitle(titleText: "側軸標題", showTitle: showAxisLeftTitle),
      bottomTitle: AxisTitle(titleText: "底部標題", showTitle: showAxisBottomTitle),
    );
  }

六 配置觸摸

屬性名稱	描述	默認值
enabled	是否允許觸摸行爲	true
touchTooltipData	一個LineTouchTooltipData，它確定如何顯示在觸摸點的頂部工具提示（表示該工具提示氣泡的外觀）	LineTouchTooltipData
getTouchedSpotIndicator	回調的檢索列表TouchedSpotIndicatorData由給定列表LineBarSpot用於顯示上觸摸點的指標	defaultTouchedIndicators
touchSpotThreshold	觸摸精度的閾值	10
handleBuiltInTouches	如果您想要內置的觸摸處理功能，請將其設置爲true（在提示的位置上顯示工具提示氣泡和指示符）	true
getTouchLineStart	控制線條的起點，默認值是圖表的底部	defaultGetTouchLineStart
getTouchLineEnd	控制線的結束位置，默認爲接觸點	defaultGetTouchLineEnd
touchCallback	偵聽此回調以檢索觸摸事件，它提供了LineTouchResponse	null

附上源碼