chart-dashboard

適用：使用者想「看趨勢」「畫成圖」「做儀表板」——單位每月件數、問卷結果、品管指標、研究成果的統計圖。

先問清楚

• 數字從哪裡來？
• 已經在他自己的 Google 試算表裡 → 用 sheet-viewer 的做法讀（UberTeach.sheets.read），再畫圖。
• 是這個工具自己存的紀錄（例如 form-app、staff-survey 收的）→ 讀完全部紀錄再統計（listAll()，一頁最多 50 筆，只讀第一頁會無聲地少算）。
• 是固定的數字（年度報告、研究成果）→ 直接寫在頁面裡，或放一個 data.csv 在資料夾裡讀進來。
• 圖上會不會認得出是誰？只畫彙總（件數、平均、比例）。每個人一條線、或人數少到認得出是誰的分組（例如某單位只有 2 個人）就不要畫。

病人資料不行；員工的人事資訊（工號、排班、考核）會讓工具變成二級（data.contains_staff_info）。

• 誰要看？統計圖多半給同仁看 → hospital；研究成果要公開 → public（公開的應用讀不了試算表、也不能存資料，數字只能寫在頁面或檔案裡）。
• 要讓科室主管在平台上看到這個工具的指標，另外照 app-metrics skill 回報，不用另做一張圖給他。

做法

• archetype: A，skills_used: [chart-dashboard]（另外用到的 skill 一起列，例如 sheet-viewer）。
• 圖表套件從平台載入，不要從 CDN 載入（上線後會被擋）：

```html

<script src="https://platform.wanfangai.tw/lib/chart.js@4.5.1/chart.umd.min.js"></script>

```

平台提供哪些套件與版本，看 GET https://platform.wanfangai.tw/lib/index.json（llms.txt §4.9）。版本要寫死，不要寫 latest。

預設用 Chart.js；要做多張圖的儀表板、或需要中文介面範例多的，可以用平台的 ECharts 精簡版（echarts.common.min.js）。

不要用 D3 的 csvParse、Plotly、ApexCharts——上線後會壞、發佈不了，或授權不允許醫院免費使用。

平台沒有、而他一定要的套件：把檔案下載進應用資料夾（lib/），用相對路徑載入；檢核擋下 eval、new Function 的套件就換一個。

• 一張圖講一件事：趨勢用折線、比較用長條、組成用堆疊長條（少用圓餅圖，超過 5 塊就看不清楚）。

標題寫結論（「9 月退件率降到 1.8%」），座標軸寫單位，數字標出來源與更新時間。

• 每張圖旁邊放一個同樣數字的表格（可以收起來）：看不到圖的人、要抄數字的人都用得到。
• 顏色：同一個指標在每張圖都用同一個顏色；不要只靠紅綠區分（色弱的人分不出來）。
• 手機上：圖的高度固定（例如 280px）、maintainAspectRatio: false，圖例放在下面。

骨架

<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>檢體退件率｜檢驗科</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; padding: 16px; max-width: 960px; }
    .chart { position: relative; height: 280px; }
    table { border-collapse: collapse; margin-top: 8px; }
    td, th { border: 1px solid #ccc; padding: 4px 8px; text-align: right; }
  </style>
</head>
<body>
  <h1>9 月退件率降到 1.8%</h1>
  <p>資料來源：檢驗科每月統計｜更新：2026-10-01</p>
  <div class="chart"><canvas id="c" aria-label="每月退件率折線圖" role="img"></canvas></div>
  <details><summary>看數字</summary><table id="t"></table></details>
  <script src="https://platform.wanfangai.tw/lib/chart.js@4.5.1/chart.umd.min.js"></script>
  <script>
    const rows = [ // 或從試算表、紀錄、data.csv 讀進來
      { month: '2026-07', rate: 2.6 },
      { month: '2026-08', rate: 2.1 },
      { month: '2026-09', rate: 1.8 },
    ];
    new Chart(document.getElementById('c'), {
      type: 'line',
      data: {
        labels: rows.map((r) => r.month),
        datasets: [{ label: '退件率（%）', data: rows.map((r) => r.rate), borderColor: '#2a7', tension: 0.2 }],
      },
      options: { maintainAspectRatio: false, plugins: { legend: { position: 'bottom' } }, scales: { y: { beginAtZero: true } } },
    });
    const t = document.getElementById('t');
    const head = t.insertRow();
    for (const h of ['月份', '退件率（%）']) head.insertCell().textContent = h;
    for (const r of rows) {
      const tr = t.insertRow();
      tr.insertCell().textContent = r.month;
      tr.insertCell().textContent = String(r.rate);
    }
  </script>
</body>
</html>

存成 PDF

使用者要把儀表板（圖與數字）印出來、或存成檔案交出去時，用瀏覽器的「列印 → 另存為 PDF」，不用套件（jsPDF 沒有中文字型，不要用）。

2026-10-15 用 Chrome 實測：書架的中文字型會嵌進 PDF、長表格跨頁時表頭會重複、圖表完整。

• 放一顆按鈕：<button type="button" class="no-print" onclick="window.print()">存成 PDF</button>，

旁邊一句「在列印視窗的『目的地』選『另存為 PDF』；不要日期與網址就取消勾選『頁首及頁尾』」。

• 在 <style> 最後加列印樣式——選單、按鈕不印，表格的列不切半、每頁重複表頭，圖不超出紙張：

```css

@media print {

@page { size: A4; margin: 15mm; }

nav, button, .no-print { display: none !important; }

body { padding: 0; font-size: 11pt; color: #000; background: #fff; }

h1, h2, h3 { break-after: avoid; }

tr, img, canvas, figure, .card, .chart { break-inside: avoid; }

thead { display: table-header-group; }

table { width: 100%; }

canvas, img { max-width: 100% !important; height: auto !important; }

• { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

}

```

有 Chart.js 圖表時再加這兩行，圖會照紙的寬度重畫、印出來比較清楚（不加也印得出來，只是放大縮小過）：

```js

addEventListener('beforeprint', () => { for (const c of Object.values(Chart.instances)) c.resize(680, 300); });

addEventListener('afterprint', () => { for (const c of Object.values(Chart.instances)) c.resize(); });

```

• 只想印某一塊（例如只要圖不要明細）：其他區塊加 class="no-print"。
• 想讓每台電腦印出來的字都一樣，用書架的黑體：<link rel="stylesheet" href="https://platform.wanfangai.tw/lib/noto-sans-tc@5.3.1/400.css">，font-family: 'Noto Sans TC', system-ui, sans-serif（粗體再載 700.css）。

發佈前檢查

• 有「存成 PDF」的：在瀏覽器按一次看預覽——中文正常、按鈕與選單沒印出來、表格沒切半、圖完整。
• 圖表套件是從 https://platform.wanfangai.tw/lib/ 或應用自己的資料夾載入，沒有任何外部 CDN。
• 圖上只有彙總數字，認不出是誰；每張圖有表格、有來源與更新時間。
• 資料來自紀錄時，統計是讀完全部頁數算的。
• 發佈試用版後，請他在手機上看一次。