QuickChart：動態圖表生成的高效解決方案

QuickChart 概述

QuickChart 是一個靈活的圖表生成工具，允許使用者通過簡單的 API 或 URL 請求創建各種類型的圖表。它是建立在流行的開源庫 Chart.js 之上，這使得它繼承了 Chart.js 的強大功能和靈活性，同時提供了更簡便的使用方式。QuickChart 將複雜的圖表配置轉換為圖像，使其適用於各種平台和環境。

基本上，QuickChart 接收 Chart.js 配置對象，然後將其渲染為圖像。這些配置可以通過 JSON 或 JavaScript 格式發送，使用簡單的 URL 或通過 POST 請求提交。

核心特點

QuickChart 提供多種類型的圖表，包括：

• 線形圖（Line Charts）
• 條形圖（Bar Charts）
• 餅圖（Pie Charts）
• 環形圖（Doughnut Charts）
• 雷達圖（Radar Charts）
• 極地區域圖（Polar Area Charts）
• 氣泡圖（Bubble Charts）
• 散點圖（Scatter Charts）
• 混合圖表（Mixed Charts）
• 時間序列圖（Time Series Charts）

此外，QuickChart 還提供 QR 碼生成功能，可以根據需要自定義 QR 碼的大小、顏色和錯誤校正級別。

QuickChart 的優勢

1. 簡單直觀的使用方式

QuickChart 最大的優勢之一是其簡單的使用方式。只需構建一個 URL 或發送一個 API 請求，即可生成複雜的圖表。這種方法不需要任何前端框架或複雜的 JavaScript 代碼，特別適合後端開發者或不熟悉前端技術的人員使用。

2. 適用於多種環境

QuickChart 生成的圖表是靜態圖像，這使得它們非常適合嵌入到不支持動態內容的環境中，如電子郵件、SMS、聊天機器人或報表。這解決了在這些環境中實現數據可視化的常見挑戰。

3. 高度可定制性

雖然 QuickChart 使用簡單，但它提供了豐富的自定義選項。使用者可以調整圖表的尺寸、背景顏色、字體、數據標籤等各個方面。此外，QuickChart 支持多種 Chart.js 插件，如數據標籤、註解和自定義顏色方案。

4. 無需 API 密鑰

QuickChart 的基本功能不需要 API 密鑰，這使得它可以輕鬆集成到各種項目中，特別適合快速原型設計或小型項目。

5. 多平台集成能力

QuickChart 可以與多種平台和工具集成，如 AppSheet、AppInventor 等。這使得它成為各種應用場景的理想選擇，無論是企業儀表板、移動應用還是教育工具。

6. 支持多種圖表格式

QuickChart 支持多種輸出格式，包括 PNG、WebP、SVG 和 PDF，滿足不同場景的需求。使用者還可以選擇不同的 Chart.js 版本（如 v2、v3 或 v4）來利用最新的功能或保持與現有代碼的兼容性。

如何使用 QuickChart

基本用法

使用 QuickChart 的最簡單方法是通過 URL 調用。以下是一個基本的 URL 結構：

https://quickchart.io/chart?c={type:'bar',data:{labels:['January','February','March','April','May'],datasets:[{label:'Users',data:[120,60,50,180,120]}]}}

這個 URL 會生成一個顯示每月用戶數量的條形圖。

參數說明

QuickChart API 支持以下主要參數：

• c或chart：Chart.js 配置對象（必需）
• width：圖像寬度，默認為 500 像素
• height：圖像高度，默認為 300 像素
• devicePixelRatio：輸出的設備像素比，設置為 1 表示普通分辨率，2 表示視網膜屏幕，默認為 2
• backgroundColor：背景顏色，可以是 RGB、HEX、HSL 或顏色名稱，默認為透明
• version：Chart.js 版本，默認為 2
• format：輸出格式，可以是 png、webp、svg 或 pdf，默認為 png
• encoding：編碼方式，url 或 base64，默認為 url

創建線形圖示例

以下是創建簡單線形圖的示例：

這段代碼會生成一個顯示貓和狗數量變化的線形圖。

創建餅圖示例

這個餅圖展示了五個月份的數據分佈。

使用 POST 方法

對於複雜的圖表配置，可以使用 POST 方法發送 JSON 數據：

{
  "chart": "bar",
  "data": {
    "labels": ["January", "February", "March", "April", "May"],
    "datasets": [
      {
        "label": "Sales",
        "data": [12, 19, 3, 5, 2]
      }
    ]
  },
  "options": {
    "title": {
      "display": true,
      "text": "Sales Data"
    }
  }
}

生成 QR 碼

QuickChart 也提供 QR 碼生成功能：

https://quickchart.io/qr?text=Hello+world&size=600&dark=000000&light=ffffff

這個 URL 會生成一個包含”Hello world”文本的 QR 碼，尺寸為 600x600 像素，黑色數據點和白色背景。

實際應用場景

在 NodeJS 應用中使用 QuickChart

對於 TypeScript/Node.js 開發者，可以使用官方的 quickchart-js 庫：

import QuickChart from 'quickchart-js';

const chart = new QuickChart();
chart.setConfig({
  type: 'bar',
  data: {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [{
      label: '2024 年銷售',
      data: [50, 75, 90, 110]
    }]
  }
});

// 獲取圖表 URL
const chartUrl = chart.getUrl();

// 或者保存為文件
await chart.toFile('./my-chart.png');

與 AppSheet 集成

QuickChart 可以與 AppSheet 無縫集成，創建動態數據可視化。通過從 AppSheet 提取數據並構建 QuickChart URL，可以在應用中顯示高質量的圖表，無需任何擴展。

在 AppInventor 中使用

對於使用 MIT AppInventor 的開發者，可以利用 QuickChart API 創建圖表，無需安裝任何擴展。這使得移動應用開發者能夠輕鬆地在其應用中包含數據可視化。

結論

QuickChart 是一個強大而靈活的工具，適合快速創建和嵌入圖表。它的簡單性、多樣性和高度可定制性使其成為各種應用場景的理想選擇，從簡單的網頁到複雜的企業應用。對於全棧開發者，尤其是使用 TypeScript 和 Node.js 的開發者，QuickChart 提供了一種輕量級的解決方案，可以輕鬆地將數據可視化集成到各種項目中。

無論您是需要在電子郵件中嵌入圖表，還是在 Web3 應用中展示數據趨勢，QuickChart 都能提供簡單而有效的解決方案。通過簡單的 URL 調用或 API 請求，您可以創建專業且吸引人的圖表，提升您的應用或報告的數據表現力。