AppSheet 教學：如何透過 QuickChart.io 實現動態雷達圖

今天我們要來解決一個 AppSheet 使用者常遇到的問題：如何在 AppSheet 中製作「雷達圖」(Radar Chart)？AppSheet 本身內建的圖表功能中並沒有直接支援雷達圖，但別擔心！我們可以透過一個強大的免費 API 服務——QuickChart.io——來實現這個功能，並且能將其動態嵌入到我們的 AppSheet 應用程式中。

為什麼選擇 QuickChart.io？

AppSheet 雖然提供了多種圖表類型，但在某些特定視覺化需求上，例如雷達圖，我們就需要尋求外部工具的協助。QuickChart.io 是一個開源的圖表生成服務，它允許我們透過 API（簡單來說就是一個網址）傳遞圖表設定和數據，然後它會回傳一張圖表圖片。這種方式非常適合嵌入到 AppSheet 中。

實作步驟

我們的目標是根據 AppSheet 中的數據（例如：每日血壓記錄中的高壓、低壓、心跳數值）動態生成雷達圖。

1. 準備雷達圖的 JSON 設定 (在 QuickChart.io 網站)

首先，我們需要到 QuickChart.io 網站來「設計」我們的雷達圖。

• 前往 QuickChart.io 網站： https://quickchart.io/

• 找到雷達圖範例或使用 Chart Maker：

  • 你可以在其 Docs -> Chart Types -> Radar chart 找到雷達圖的 JSON 設定範例。

  • 或者直接使用 Chart Maker (https://quickchart.io/chart-maker/)，在左側編輯區修改圖表設定。

  一個基本的雷達圖 JSON 結構如下（影片範例）：

  {
    type: 'radar', // 圖表類型為雷達圖
    data: {
      labels: ['高壓', '低壓', '心跳'], // 雷達圖的軸標籤
      datasets: [{
        label: '健康狀況', // 圖例標籤
        data: [120, 80, 60] // 對應的數據，順序需與 labels 一致
      }]
    }
  }

  Json

  你可以先在 QuickChart.io 的編輯器中調整這些設定，直到預覽的雷達圖符合你的基本需求。

2. 取得圖表模板的短網址 (Template URL)

當你在 QuickChart.io 的 Chart Maker 中調整好圖表後，它會提供一個「Chart URL」。但為了方便在 AppSheet 中動態修改數據，我們需要的是一個「模板短網址」。

• 在 Chart Maker 編輯好圖表後，點擊下方的 "Save as template" 按鈕。

• 系統會彈出一個視窗，提供一個類似這樣的短網址：
  https://quickchart.io/chart/render/sf-xxxxxxxxxxxxxxxxx (後面的 sf-xxxx 是一組唯一的 ID)
  這個網址就是我們雷達圖的「基底模板」。

3. 理解動態數據傳遞方式

QuickChart.io 允許我們在模板網址後面附加參數來動態修改圖表數據。對於單一數據集的雷達圖，最常用的參數是 data1。

• 格式：模板短網址?data1=[數值1,數值2,數值3]

• 例如，如果我們的模板短網址是 https://quickchart.io/chart/render/sf-32d96ffe-8d2b-4e1b-be04-b642a6bbb094，而我們想傳入高壓 130、低壓 70、心跳 80 的數據，那麼完整的圖片網址就會是：
  https://quickchart.io/chart/render/sf-32d96ffe-8d2b-4e1b-be04-b642a6bbb094?data1=[130,70,80]

4. 在 AppSheet 中設定虛擬欄位 (Virtual Column)

現在回到你的 AppSheet 應用程式編輯器。

• 新增虛擬欄位： 在你存放數據的資料表 (Table) 中，新增一個虛擬欄位 (Add Virtual Column)。

• 欄位命名： 例如取名為「雷達圖」。

• 設定欄位類型 (Type)： 將類型設定為 Image。

• 設定公式 (App formula)：
  假設你的模板短網址是 https://quickchart.io/chart/render/sf-32d96ffe-8d2b-4e1b-be04-b642a6bbb094 (請替換成你自己的短網址 ID)，並且你的資料表中有 [高壓]、[低壓]、[心跳] 這三個欄位。
  公式將會是：

  "https://quickchart.io/chart/render/sf-32d96ffe-8d2b-4e1b-be04-b642a6bbb094?data1=" & LIST([高壓], [低壓], [心跳])

  • 說明：

    • 前半部分 "..." 是固定的模板網址和 data1= 參數，用雙引號包起來表示字串。

    • & 是字串連接符號。

    • LIST([高壓], [低壓], [心跳]) 會將這三個欄位的值組合成一個列表，例如 [121,74,74]，AppSheet 在連接時會自動將其轉換成 QuickChart.io 需要的格式 [121,74,74]（注意，AppSheet 的 LIST() 函數輸出結果會自動符合 QuickChart 的數組格式要求，若直接字串連接則需要手動添加 [ ] 和 ,）。

• 儲存設定： 按下 "Done" 和 "Save"。

成果展示

完成以上設定後，當你在 AppSheet 中檢視每一筆資料的詳細視圖 (Detail View) 時，你就會看到一個根據該筆資料的「高壓」、「低壓」、「心跳」數值動態生成的雷達圖圖片。

![alt text](https://i.imgur.com/Y9A9cM6.png)

(示意圖：AppSheet 中顯示的動態雷達圖)

進階客製化

QuickChart.io 還支援許多其他的客製化選項，例如：

• 圖表大小： 可以在 Chart Maker 設定，或透過 URL 參數 (如 &width=500&height=300)。

• 背景顏色： 可以在 Chart Maker 設定，或透過 URL 參數 (如 &backgroundColor=green)。

• 多組數據 (datasets)： 雷達圖也可以比較多組數據，這時 JSON 結構會更複雜，URL 參數也會變成 data1, data2 等。

你可以參考 QuickChart.io 的官方文件來探索更多可能性。

總結

透過 QuickChart.io，我們成功地為 AppSheet 應用程式加入了原本不支援的動態雷達圖功能。這種方法不僅免費，而且彈性很高，可以應用到各種需要圖表視覺化的場景。希望今天的教學對你有幫助！

---

資源連結：

• QuickChart.io 官方網站：https://quickchart.io/

• QuickChart.io Chart Maker：https://quickchart.io/chart-maker/

• QuickChart.io 雷達圖文件：https://quickchart.io/documentation/chart-types/radar-chart/

• QuickChart.io 短網址與模板說明：https://quickchart.io/documentation/usage/short-urls-and-templates/

希望這篇文章對您有所幫助！