金融資料視覺化與互動圖表

01金融資料為何需要視覺化

前四章已完成複利試算、貨幣時間價值、JSON 債券資料庫與 Python 股票報酬分析。這些工具能產生終值、現值、報酬率與波動度等數字，但單看數字，未必能快速理解金融變化——複利資產成長 4.32 倍不如折線圖直覺；債券價格與殖利率的反向關係，不如價格－殖利率曲線清楚。

假設本金 100,000 元、年報酬率 5%、投資 30 年，部分年度終值如下表。表格能呈現精確數字，但不容易感受到成長速度的加速：

金融圖表常回答的問題

• 資產如何隨時間變化？（折線圖）
• 哪一項資產報酬較高、波動較大？（長條圖／散布圖）
• 兩個變數是否具有關係？（散布圖）
• 某項金融指標是否出現異常？（折線圖＋閾值線）
• 資金在不同類別的分配比例為何？（圓餅圖，類別≤5）

金融圖表的三個層次

02常見金融圖表類型與選擇指南

03Chart.js 與 Plotly 的分工

Chart.js 核心優點——容易嵌入 HTML，不需 Python 環境；可與前端表單整合，使用者輸入後即時更新圖表；適合靜態網站部署。

<!-- 固定主要版本（正式專案建議）-->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>

<!-- ⚠️ Chart.js 必須在 visualization.js 之前載入 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<script src="js/visualization.js"></script>

Plotly 核心優點——可直接使用 Pandas DataFrame，不需手動轉換格式；hover 提示可顯示詳細資訊，支援縮放與拖曳；write_html() 輸出獨立 HTML，瀏覽器直接開啟。

# 安裝 Plotly（在虛擬環境中執行）
python -m pip install plotly
python -m pip install pandas plotly   # 若尚未安裝 Pandas，一次安裝兩個
python -c "import plotly; print(plotly.__version__)"

04建立金融視覺化頁面結構

financial-platform/
├─ visualization.html          ← 前台金融圖表頁面（新增）
├─ css/
│  └─ visualization.css        ← 圖表頁面樣式（新增）
├─ js/
│  └─ visualization.js         ← Chart.js 程式（新增）
├─ python/
│  └─ stock-charts.py          ← Plotly 分析程式（新增）
├─ data/
│  └─ multi-stock-prices.csv   ← 三檔股票資料（新增）
└─ output/
   ├─ stock-price-chart.html
   ├─ cumulative-return-chart.html
   └─ risk-return-chart.html

05Chart.js 基本結構與關鍵設定

建立圖表的四個步驟：① 取得 canvas 元素 → ② 準備資料（labels 橫軸標籤、datasets 數值陣列）→ ③ 設定圖表類型與選項 → ④ 呼叫 new Chart(canvas, config) 建立圖表物件。

// 取得 canvas 元素
const canvas = document.getElementById("compoundChart");

// 建立圖表
const chart = new Chart(canvas, {
  type: "line", // 圖表類型：line / bar / scatter / pie
  data: {
    labels: ["0年","1年","2年","3年"],       // 橫軸標籤
    datasets: [{
      label: "複利成長",                       // 圖例名稱
      data: [100000, 105000, 110250, 115763], // 數值
      borderWidth: 3,   // 線條粗細
      tension: 0.25,    // 曲線平滑度（0=折線）
      pointRadius: 2,   // 資料點大小
    }]
  },
  options: {
    responsive: true,               // 自動調整寬度
    maintainAspectRatio: false,     // 允許 CSS 控制高度
    plugins: {
      title: { display: true, text: '複利資產成長' },
    },
    scales: {
      x: { title: { display: true, text: '投資期間' } },
      y: { beginAtZero: true, title: { display: true, text: '資產金額（元）' } }
    }
  }
});

Chart.js 關鍵選項說明

06金融視覺化 HTML 頁面

visualization.html 包含四個區域：頁首導覽列、複利成長比較卡、債券價格－殖利率曲線卡、圖表判讀提醒。

<!-- ③ 儀表板：2 欄 Grid -->
<div class="dashboard-grid">

  <!-- 圖表卡片 A：複利成長比較 -->
  <article class="chart-card">
    <div class="card-header">
      <p class="chart-category">複利理財</p>
      <h2>單利與複利成長比較</h2>
    </div>

    <!-- 三欄輸入 Grid -->
    <div class="input-grid">
      <div class="form-group">
        <label for="principal">本金（元）</label>
        <input type="number" id="principal" min="1" step="1000" value="100000">
      </div>
      <div class="form-group">
        <label for="annualRate">年報酬率（%）</label>
        <input type="number" id="annualRate" step="0.1" value="5">
      </div>
      <div class="form-group">
        <label for="investmentYears">投資年數</label>
        <input type="number" id="investmentYears" min="1" max="100" step="1" value="30">
      </div>
    </div>

    <button type="button" id="updateCompoundChart" class="primary-button">更新複利圖表</button>
    <div id="compoundMessage" class="message" aria-live="polite"></div>

    <!-- canvas：Chart.js 繪圖區域 -->
    <div class="chart-container">
      <canvas id="compoundChart" aria-label="單利與複利成長比較圖"></canvas>
    </div>
    <div id="compoundSummary" class="chart-summary"></div>
  </article>

  <!-- 圖表卡片 B：債券價格殖利率曲線（結構相同，欄位改為面額／票面利率／到期年數）-->
  <article class="chart-card">...</article>

</div>

<!-- ⑤ Chart.js 必須在 visualization.js 之前載入 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<script src="js/visualization.js"></script>

07圖表頁面 CSS 重點

/* ── 儀表板：2欄 Grid ── */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 桌面版 2 欄 */
  gap: 24px;
}

/* ── 圖表容器：設定高度讓 Chart.js 正確渲染 ── */
.chart-container { position: relative; min-height: 360px; margin-top: 12px; }

/* ── RWD 斷點 ── */
@media (max-width: 960px) {
  .dashboard-grid { grid-template-columns: 1fr; } /* 960px 以下：單欄 */
}
@media (max-width: 700px) {
  .input-grid { grid-template-columns: 1fr; }     /* 手機版：單欄輸入 */
  .chart-container { min-height: 300px; }          /* 手機版降低最小高度 */
}

08複利成長資料設計：單利 vs 複利公式

09債券價格－殖利率曲線的金融原理

凸性（Convexity）的直覺——債券價格－殖利率曲線不是直線，而是向上凸起的曲線。這意味著：殖利率下降 1% 帶來的價格上漲，通常大於殖利率上升 1% 帶來的價格下跌。這就是凸性對投資人有利的直覺解釋。

10Chart.js 完整互動程式

程式分為兩個圖表模組：複利成長比較圖與債券價格－殖利率曲線。每個模組包含：資料產生函數、圖表建立/更新函數、輸入驗證函數與事件監聽。

"use strict";

// ── ① 取得所有 HTML 元素 ────────────────────────
const principalInput = document.getElementById("principal");
const annualRateInput = document.getElementById("annualRate");
const investmentYearsInput = document.getElementById("investmentYears");
const updateCompoundButton = document.getElementById("updateCompoundChart");
const compoundMessage = document.getElementById("compoundMessage");
const compoundSummary = document.getElementById("compoundSummary");
const faceValueInput = document.getElementById("faceValue");
const couponRateInput = document.getElementById("couponRate");
const maturityYearsInput = document.getElementById("maturityYears");
const updateBondButton = document.getElementById("updateBondChart");
const bondMessage = document.getElementById("bondMessage");
const bondSummary = document.getElementById("bondSummary");

// ── ② 圖表物件（初始為 null，更新前先 destroy） ──
let compoundChart = null;
let bondChart = null;

// ── ③ 工具函數 ──────────────────────────────────
function getNumber(inputEl) {
  const v = inputEl.value.trim();
  return v === "" ? Number.NaN : Number(v);
}
function formatCurrency(amount) {
  return new Intl.NumberFormat("zh-TW", {
    style: "currency", currency: "TWD", maximumFractionDigits: 0
  }).format(amount);
}

// ── ④ 複利輸入驗證 ──────────────────────────────
function validateCompoundInputs(principal, ratePercent, years) {
  if (Number.isNaN(principal) || Number.isNaN(ratePercent) || Number.isNaN(years))
    return "請完整輸入本金、報酬率與年數。";
  if (principal <= 0) return "本金必須大於 0。";
  if (ratePercent <= -100) return "報酬率不得小於或等於 -100%。";
  if (years <= 0) return "投資年數必須大於 0。";
  if (!Number.isInteger(years)) return "投資年數請輸入整數。";
  if (years > 100) return "投資年數請勿超過 100 年。";
  return "";
}

// ── ⑤ 產生複利資料（逐年計算單利與複利） ──────
function generateCompoundData(principal, annualRate, years) {
  const labels = [], simpleValues = [], compoundValues = [];
  for (let year = 0; year <= years; year++) {
    const simple = principal * (1 + annualRate * year);          // 單利
    const compound = principal * Math.pow(1 + annualRate, year); // 複利
    labels.push(`${year}年`);
    simpleValues.push(Math.round(simple));
    compoundValues.push(Math.round(compound));
  }
  return { labels, simpleValues, compoundValues };
}

// ── ⑥ 建立/更新複利圖表 ─────────────────────────
function createOrUpdateCompoundChart(chartData) {
  if (compoundChart !== null) compoundChart.destroy();   // 必須先銷毀舊圖
  const canvas = document.getElementById("compoundChart");
  compoundChart = new Chart(canvas, {
    type: "line",
    data: {
      labels: chartData.labels,
      datasets: [
        { label: "單利成長", data: chartData.simpleValues, borderWidth: 2, pointRadius: 1, tension: 0.2 },
        { label: "複利成長", data: chartData.compoundValues, borderWidth: 3, pointRadius: 1, tension: 0.25 }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      interaction: { mode: "index", intersect: false },
      plugins: {
        title: { display: true, text: "單利與複利資產成長" },
        tooltip: { callbacks: {
          label: ctx => `${ctx.dataset.label}：${formatCurrency(ctx.parsed.y)}`
        }}
      },
      scales: {
        x: { title: { display: true, text: "投資期間" } },
        y: { beginAtZero: true,  // ← 縱軸從零開始，避免視覺放大
             title: { display: true, text: "資產金額" },
             ticks: { callback: v => Number(v).toLocaleString('zh-TW') } }
      }
    }
  });
}

// ── ⑦ 主更新函數（複利）─────────────────────────
function updateCompoundChart() {
  compoundMessage.textContent = "";
  const principal = getNumber(principalInput);
  const ratePercent = getNumber(annualRateInput);
  const years = getNumber(investmentYearsInput);
  const err = validateCompoundInputs(principal, ratePercent, years);
  if (err) { compoundMessage.textContent = err; return; }
  const annualRate = ratePercent / 100;
  const chartData = generateCompoundData(principal, annualRate, years);
  createOrUpdateCompoundChart(chartData);
  const finalSimple = chartData.simpleValues[chartData.simpleValues.length - 1];
  const finalCompound = chartData.compoundValues[chartData.compoundValues.length - 1];
  compoundSummary.innerHTML = `
    
期末單利金額：${formatCurrency(finalSimple)}
    
期末複利金額：${formatCurrency(finalCompound)}
    
複利高於單利：${formatCurrency(finalCompound - finalSimple)}
`;
}

// ── ⑧ 債券定價函數 ──────────────────────────────
function calculateBondPrice(faceValue, couponRate, marketYield, maturityYears) {
  const annualCoupon = faceValue * couponRate;
  let price = 0;
  for (let t = 1; t <= maturityYears; t++) {
    price += annualCoupon / Math.pow(1 + marketYield, t);  // 各期票息現值
  }
  price += faceValue / Math.pow(1 + marketYield, maturityYears);  // 面額現值
  return price;
}

// ── ⑨ 產生債券曲線資料（殖利率 0.5%～10%，間距 0.25%）
function generateBondCurveData(faceValue, couponRate, maturityYears) {
  const labels = [], prices = [];
  for (let yld = 0.5; yld <= 10.0001; yld += 0.25) {
    const marketYield = yld / 100;
    const price = calculateBondPrice(faceValue, couponRate, marketYield, maturityYears);
    labels.push(`${yld.toFixed(2)}%`);
    prices.push(Math.round(price));
  }
  return { labels, prices };
}

// ── ⑩～⑫ 建立/更新債券圖表、輸入驗證、主更新函數（結構與複利圖表相同）
// ── ⑬ 事件監聽與初始化 ──────────────────────────
updateCompoundButton.addEventListener("click", updateCompoundChart);
updateBondButton.addEventListener("click", updateBondChart);

// 頁面載入時自動顯示預設值圖表
updateCompoundChart();
updateBondChart();

11Chart.js 重要選項詳解

12建立多檔股票示範資料

為製作風險－報酬散布圖，建立三檔股票的 CSV 資料，各有不同的報酬與波動特徵：

date,symbol,close
2026-01-02,STOCK_A,100
2026-01-05,STOCK_A,102
...
2026-01-15,STOCK_A,112
2026-01-02,STOCK_B,100
2026-01-05,STOCK_B,105
...
2026-01-15,STOCK_B,118
2026-01-02,STOCK_C,100
2026-01-05,STOCK_C,100.5
...
2026-01-15,STOCK_C,104.5

13Plotly 完整股票圖表程式

本程式讀取三檔股票 CSV，產生三種圖表：股票價格走勢、累積報酬率比較、風險－報酬散布圖。跟第四章一樣，這是 Python 程式，無法在瀏覽器中直接執行。

from pathlib import Path
import math, sys
import pandas as pd
import plotly.express as px

TRADING_DAYS = 252

# ── 計算報酬率與統計指標 ──────────────────────
def calculate_metrics(data: pd.DataFrame) -> tuple[pd.DataFrame, pd.DataFrame]:
    result = data.copy()
    result["daily_return"] = (
        result.groupby("symbol")["close"].pct_change(fill_method=None)
    )
    result["cumulative_return"] = (
        result.groupby("symbol")["daily_return"]
        .transform(lambda r: (1 + r).cumprod() - 1)
    )
    summary_rows = []
    for symbol, group in result.groupby("symbol"):
        valid_returns = group["daily_return"].dropna()
        summary_rows.append({
            "symbol": symbol,
            "total_return": group["close"].iloc[-1] / group["close"].iloc[0] - 1,
            "annualized_return": valid_returns.mean() * TRADING_DAYS,
            "annualized_volatility": valid_returns.std(ddof=1) * math.sqrt(TRADING_DAYS),
        })
    return result, pd.DataFrame(summary_rows)

# ── 圖表 A：多檔股票價格走勢 ──────────────────
def create_price_chart(data: pd.DataFrame) -> None:
    fig = px.line(
        data, x='date', y='close', color='symbol', markers=True,
        title="股票價格走勢比較",
        labels={"date": "日期", "close": "收盤價", "symbol": "股票代號"}
    )
    fig.update_layout(hovermode="x unified")
    fig.write_html(PRICE_FILE, include_plotlyjs="cdn")

# ── 圖表 C：風險－報酬散布圖 ──────────────────
def create_risk_return_chart(summary: pd.DataFrame) -> None:
    d = summary.copy()
    d["annualized_return_pct"] = d["annualized_return"] * 100
    d["annualized_volatility_pct"] = d["annualized_volatility"] * 100
    d["total_return_pct"] = d["total_return"] * 100
    fig = px.scatter(
        d,
        x="annualized_volatility_pct",  # 橫軸：波動度（風險）
        y="annualized_return_pct",      # 縱軸：報酬率
        text="symbol",                   # 顯示股票代號
        size=d["total_return_pct"].abs() + 1,  # 點大小（防止負值）
        hover_name="symbol",
        title="資產風險－報酬比較",
        labels={
            "annualized_volatility_pct": "年化波動度（%）",
            "annualized_return_pct": "年化平均報酬率（%）",
        }
    )
    fig.update_traces(textposition="top center")
    fig.write_html(RISK_RETURN_FILE, include_plotlyjs="cdn")

14執行 Plotly 圖表程式

# 在專案資料夾執行（需先啟動虛擬環境）
python python\stock-charts.py

# 成功後 output/ 資料夾出現三份 HTML：
# output/
# ├─ stock-price-chart.html          ← 股票價格走勢
# ├─ cumulative-return-chart.html    ← 累積報酬率比較
# └─ risk-return-chart.html          ← 風險－報酬散布圖

# 直接以瀏覽器開啟，即可使用 hover / 縮放 / 拖曳功能

15將 Plotly 圖表整合至網站

<!-- 方式一：超連結開啟（最簡單）-->
<a href="output/risk-return-chart.html" target="_blank" rel="noopener">
  開啟風險報酬互動圖
</a>

<!-- 方式二：iframe 嵌入頁面（可直接在頁面看到互動圖）-->
<iframe
  src="output/risk-return-chart.html"
  title="股票風險報酬互動圖"   ← 無障礙標記必填
  width="100%"
  height="600"
  loading="lazy"              ← 延遲載入，提升頁面速度
></iframe>

16金融圖表的正確判讀

複利曲線：後期加速的真正原因——複利曲線後期逐漸變陡，不是因為報酬率提高，而是每年利息加入本金，使下一年的計息基礎增加。10 萬元以 5% 複利，第 1 年增加 5,000 元，第 20 年增加 13,266 元——利率沒變，基數變大了。

風險－報酬散布圖：四個象限解讀

股價圖 vs 累積報酬圖的差別——甲股票 1,000 元漲到 1,100 元（+10%）；乙股票 50 元漲到 60 元（+20%）。若只畫股價走勢，甲股票上漲幅度（100 元）看起來比乙股票（10 元）大得多，但報酬率其實乙股票更高。比較不同股票的投資績效，應使用累積報酬率圖，而非股價水準圖。

17避免誤導性金融圖表

18金融圖表的 RWD 與行動裝置設計

19金融圖表設計原則

20操作實務與測試

複利圖表七項測試

債券圖表五項關鍵測試

21常見錯誤與除錯

22關鍵字

23實作練習

Chart.js 是純前端技術，可以在瀏覽器中真的執行，所以本章的挑戰任務（04 分頁）延續第一～三章的模式：修改真正會執行的程式碼，系統會即時告訴你哪裡出錯。Plotly／Python 的部分則跟第四章一樣，請在自己電腦安裝好 Python + Pandas + Plotly 之後練習。