Part1:今日目標

1.前言
2.簡介: fl_chart繪圖套件

Part2:今日內容

1.前言

為了幫助使用者更好地了解其攝護腺肥大病況的發展，我們決定將測驗總分的歷史數據以折線圖呈現。透過視覺化，資料的趨勢將變得更加清晰，將能夠更方便地進行比較。

考慮到我是第一次開發App的新手，且面臨實作時間壓力，因此在選擇繪圖套件時有以下主要目標：

• 易上手：我們希望選擇一個容易上手的繪圖套件，能夠快速實現折線圖的功能。
• 官方文件清晰：我們需要套件的官方文件清晰明瞭，最好還有範例程式碼，這樣我們可以迅速理解如何使用它，並且能夠快速進行程式碼的修改和適應。

在搜尋網路和跟神隊友溝通後，選定使用fl_chart這個繪圖套件，來繪製測驗歷史走勢的折現圖。今天就讓我們來認識熟悉一下這個套件的內容和操作方式，後續鐵人賽將以fl_chart套件來進行介面實作。

2.簡介 fl_chart 繪圖套件

(1) fl_chart 是什麼?

• fl_chart是一個Flutter套件，用於在Flutter應用程式中繪製圖表。

(2) fl_chart 支援繪製哪些圖形?

• 折線圖 (Line Chart)
  可以顯示單一或多條線。提供多種自定義選項，如點樣式、線樣式和顯示區域。

• 條形圖 (Bar Chart)
  支持群組和堆疊的條形圖。提供多種自定義選項，如邊框和背景顏色。

• 圓餅圖 (Pie Chart)
  顯示部分和整體之間的關係。提供多種自定義選項，如切片顏色和邊框。

• 散點圖 (Scatter Chart)
  用於顯示數據集中的點。可以自定義點的大小和顏色。

• 雷達圖 (Radar Chart)
  用於顯示多個數據系列的多變量數據。可以自定義雷達的形狀和顏色。

其他功能: 觸控互動(Touch Interaction)，使用者可以直接在圖表上進行交互。以下是 fl_chart 中觸控互動的一些具體功能：

• 點擊和長按(Click and Long Press)：使用者可以點擊或長按圖表上的某一點或區域，從而獲得該點或區域的具體數據詳情。

• 拖曳和移動(Drag and Pan)：使用者可以拖曳圖表進行移動，這在查看大量數據時特別實用，因為它讓使用者能夠探索圖表的不同部分。

• 提示工具(Tooltip)：當使用者觸摸圖表的某一部分時，可以顯示一個提示框，提供有關該部分的更多詳細資訊。

• 重點顯示(Highlight)：當使用者觸摸圖表的某一點或區域時，該點或區域可能會被重點顯示，從而使其更加突出。

這些觸控互動功能不只讓圖表更加親民，也提供了一個直覺的方式來探索和理解數據。在手機應用程式中，這些功能特別重要，因為它們能充分發揮觸控螢幕的效益。

(3) 選用LineChart: 繪製測驗總分的歷史走勢圖

連結: 官方文件

• 創建折線圖：使用 LineChart widget，創建一個折線圖。使用 LineChartData 參數將數據傳遞給 LineChart，並在 LineChartData 中配置圖表的外觀和數據。

• 內置動畫：當您更改圖表的狀態時，它會內部動畫到新的狀態，使用 implicit animations。可以通過設置 swapAnimationDuration 和 swapAnimationCurve 屬性來控制動畫的持續時間和曲線。

• 配置圖表數據：可以在 LineChartData 中配置以下屬性：

  • lineBarsData：用於顯示圖表線的數據列表
  • betweenBarsData：用於填充兩個圖表線之間區域的數據列表
  • titlesData：用於配置標題的數據
  • minX 和 maxX：用於指定 x 軸的最小和最大值
  • baselineX：用於指定 x 軸的基線
  • minY 和 maxY：用於指定 y 軸的最小和最大值
  • baselineY：用於指定 y 軸的基線，等等。

• 配置折線圖的線條：可以在 LineChartBarData 中配置以下屬性：

  • spots：用於指定折線經過的坐標點
  • color：用於指定線條的顏色
  • gradient：用於指定漸變效果
  • barWidth：用於指定線條的寬度，等等。

• 觸控互動：可以配置 LineTouchData 控制觸控互動的方式，包括顯示提示訊息、指示器等。

• 配置提示資訊：可以使用 LineTouchTooltipData 配置提示資訊的樣式和位置，以及根據觸摸點顯示不同的信息。

官方文件提供多個範例圖片和原始碼(Source Code)展示如何設定不同樣式和功能的折線圖。透過這些範例和詳細的說明文件，能協助開發者快速實作自己設計的折線圖。

3.其他 Flutter 繪圖套件

資料來源

除了 fl_chart 之外，還有許多其他的 Flutter 繪圖套件。以下是一些相關的套件：

• syncfusion_flutter_charts
  這是一個包含資料視覺化小部件的 Flutter 圖表庫，如笛卡爾和圓形圖表，用於創建實時、交互式、高性能的動畫圖表。

• graphic
  這是一個數據視覺化和 Flutter 繪圖庫的語法。

• charts_painter
  這是一個高度可自訂和可擴展的 Flutter 圖表庫，使用自定義畫家製作。

• k_chart
  這是一個在 Flutter 中添加 K 圖的套件，支持拖動、縮放、長按和拋出。其中，K圖（K-line chart）是一種用於展示金融市場中資產價格變化的圖表形式，也稱為蠟燭圖。這種圖表以蠟燭形狀表示特定時間段的資產價格變動，通常包括四個重要的價格點：開盤價、收盤價、最高價和最低價。

• flutter_audio_waveforms
  可以輕鬆地將音頻波形添加到您的應用程序中，並提供多種自定義選項。

無論生活帶我們去哪裡，手足之情仍然是不變的力量和快樂來源
No matter where life takes us, the bond of siblinghood remains a constant source of strength and joy
年紀越大越覺得有手足很幸福，感謝爸媽讓我有一位很棒的弟弟，能一起討論資訊議題、互相交流意見，給予我許多勇氣和智慧，Love you, Bro!
今天要聽方大同的《Nothing's gonna change my love for you》