Hi，大家好！
上週我分享了把表中數據導出為 HTML 的實現；這次聚焦進階：如何把圖表也導出到 HTML 中並保持交互性與可移植性。開始前，給大家再彙報一下框架的情況，由於近兩月參與其他項目的交付，框架開發有所延後；現已調整優先級，計劃本月先發布一版可用實現，後續再按需迭代與優化。本來我也是遊刃有餘，現在是匆匆忙忙，不過這個Flag先立下了。
在 Access 開發中，我們經常需要將數據以可視化的方式呈現。今天分享一個實用技術：使用 VBA 生成包含交互式圖表的 HTML 報表。
一、技術方案
選擇Access 導出圖表到 HTML 主要有兩種方式：使用內置 OutputTo：會將圖表轉為靜態圖片，文件體積大使用 JavaScript 圖表庫：生成可交互的矢量圖表，文件小且效果好本文采用第二種方案，使用 Chart.js 庫實現。
二、創建表與窗體
接着，我們要準備好數據，可以像這樣：
表有了，那我們再創建一個簡單的窗體：
三、核心實現代碼
以下是一個完整的導出函數，從數據庫讀取數據並生成帶圖表的 HTML：
' 導出帶 Chart.js 圖表的 HTML
Public Sub ExportHTMLWithChartJS()
Dim rs As DAO.Recordset
Dim html As String
Dim labels As String
Dim dataValues As String
' 獲取數據
Set rs = CurrentDb.OpenRecordset("SELECT 月份, 銷售額 FROM tblSales ORDER BY 月份")
' 構建圖表數據
labels = ""
dataValues = ""
Do While Not rs.EOF
labels = labels & "'" & rs!月份 & "',"
dataValues = dataValues & rs!銷售額 & ","
rs.MoveNext
Loop
rs.Close
' 去掉最後的逗號
If Len(labels) > 0 Then
labels = Left(labels, Len(labels) - 1)
dataValues = Left(dataValues, Len(dataValues) - 1)
End If
' 構建 HTML
html = "<!DOCTYPE html>" & vbCrLf
html = html & "<html lang='zh-CN'>" & vbCrLf
html = html & "<head>" & vbCrLf
html = html & " <meta charset='utf-8'>" & vbCrLf
html = html & " <meta name='viewport' content='width=device-width, initial-scale=1'>" & vbCrLf
html = html & " <title>銷售趨勢圖</title>" & vbCrLf
' 引入 Chart.js
html = html & " <script src='https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js'></script>" & vbCrLf
html = html & " <style>" & vbCrLf
html = html & " body { font-family: 'Microsoft YaHei', sans-serif; margin: 20px; background: #f5f5f5; }" & vbCrLf
html = html & " .container { max-width: 1200px; margin: 0 auto; background: white; padding: 30px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }" & vbCrLf
html = html & " h1 { color: #333; text-align: center; }" & vbCrLf
html = html & " .chart-container { position: relative; height: 400px; margin-top: 30px; }" & vbCrLf
html = html & " </style>" & vbCrLf
html = html & "</head>" & vbCrLf
html = html & "<body>" & vbCrLf
html = html & " <div class='container'>" & vbCrLf
html = html & " <h1>銷售趨勢分析</h1>" & vbCrLf
html = html & " <p style='text-align: center; color: #666;'>數據更新時間：" & Now & "</p>" & vbCrLf
' 圖表容器
html = html & " <div class='chart-container'>" & vbCrLf
html = html & " <canvas id='salesChart'></canvas>" & vbCrLf
html = html & " </div>" & vbCrLf
html = html & " </div>" & vbCrLf
' JavaScript 圖表代碼
html = html & " <script>" & vbCrLf
html = html & " const ctx = document.getElementById('salesChart');" & vbCrLf
html = html & " new Chart(ctx, {" & vbCrLf
html = html & " type: 'bar'," & vbCrLf
html = html & " data: {" & vbCrLf
html = html & " labels: [" & labels & "]," & vbCrLf
html = html & " datasets: [{" & vbCrLf
html = html & " label: '銷售額（萬元）'," & vbCrLf
html = html & " data: [" & dataValues & "]," & vbCrLf
html = html & " borderColor: 'rgb(75, 192, 192)'," & vbCrLf
html = html & " backgroundColor: 'rgba(75, 192, 192, 0.2)'," & vbCrLf
html = html & " tension: 0.1" & vbCrLf
html = html & " }]" & vbCrLf
html = html & " }," & vbCrLf
html = html & " options: {" & vbCrLf
html = html & " responsive: true," & vbCrLf
html = html & " maintainAspectRatio: false," & vbCrLf
html = html & " plugins: {" & vbCrLf
html = html & " legend: { display: true, position: 'top' }," & vbCrLf
html = html & " title: { display: false }" & vbCrLf
html = html & " }" & vbCrLf
html = html & " }" & vbCrLf
html = html & " });" & vbCrLf
html = html & " </script>" & vbCrLf
html = html & "</body>" & vbCrLf
html = html & "</html>"
' 保存文件
WriteUTF8File "C:\Users\Desktop\html\SalesChart.html", html
MsgBox "圖表導出完成！", vbInformation
End Sub
' UTF-8 寫入函數
Private Sub WriteUTF8File(filePath As String, content As String)
Dim stream As Object
Set stream = CreateObject("ADODB.Stream")
With stream
.Type = 2
.Charset = "utf-8"
.Open
.WriteText content
.SaveToFile filePath, 2
.Close
End With
Set stream = Nothing
End Sub四、技術要點説明
4.1 數據格式化Chart.js 需要 JavaScript 數組格式的數據：標籤：['一月', '二月', '三月']數值：[100, 200, 150]在 VBA 中通過字符串拼接實現，注意去掉最後的逗號。
4.2 圖表類型Chart.js 支持多種圖表類型，只需修改 type 參數：line：折線圖bar：柱狀圖pie：餅圖doughnut：環形圖radar：雷達圖
4.3 響應式設計關鍵配置：配合 CSS：
4.4 中文支持必須做到三點：HTML 頭部聲明：<meta charset='utf-8'>使用 UTF-8 保存文件指定中文字體：font-family: 'Microsoft YaHei'輸出的樣式：
五、常見問題
Q1：圖表不顯示？檢查瀏覽器控制枱是否有 JavaScript 錯誤，通常是數據格式問題。
Q2：離線使用怎麼辦？下載 Chart.js 文件到本地，修改引用路徑。
六、擴展應用
這個技術可以應用到：
MRP 運算結果
可視化庫存波動趨勢分析
生產進度監控儀表板
質量分析圖表
通過 VBA 自動化生成，可以實現定時導出、批量生成等功能。如果你覺得這篇技術分享有用，歡迎點贊收藏。需要完整示例代碼的朋友，可以在評論區留言交流。
