大数跨境
首页
>
Access导出带图表的 HTML 报表：技术实现详解
>
0
0

Access导出带图表的 HTML 报表：技术实现详解

Access导出带图表的 HTML 报表：技术实现详解 Access开发
2025-11-10
0
导读：上周我分享了把表中数据导出为 HTML 的实现；这次聚焦进阶：如何把图表也导出到 HTML 中并保持交互性与可移植性。

Hi，大家好！

上周我分享了把表中数据导出为 HTML 的实现；这次聚焦进阶：如何把图表也导出到 HTML 中并保持交互性与可移植性。

开始前，给大家再汇报一下框架的情况，由于近两月参与其他项目的交付，框架开发有所延后；现已调整优先级，计划本月先发布一版可用实现，后续再按需迭代与优化。本来我也是游刃有余，现在是匆匆忙忙，不过这个Flag先立下了。


在 Access 开发中，我们经常需要将数据以可视化的方式呈现。今天分享一个实用技术：使用 VBA 生成包含交互式图表的 HTML 报表。


一、技术方案选择

Access 导出图表到 HTML 主要有两种方式：


使用内置 OutputTo：会将图表转为静态图片，文件体积大

使用 JavaScript 图表库：生成可交互的矢量图表，文件小且效果好

本文采用第二种方案，使用 Chart.js 库实现。


二、创建表与窗体

接着，我们要准备好数据，可以像这样：


1.png

表有了，那我们再创建一个简单的窗体：


2.png


三、核心实现代码

以下是一个完整的导出函数，从数据库读取数据并生成带图表的 HTML：

' 导出带 Chart.js 图表的 HTMLPublicSub ExportHTMLWithChartJS()    Dim rs As DAO.Recordset    Dim html AsString    Dim labels AsString    Dim dataValues AsString        ' 获取数据    Set rs = CurrentDb.OpenRecordset("SELECT 月份, 销售额 FROM tblSales ORDER BY 月份")        ' 构建图表数据    labels = ""    dataValues = ""    DoWhileNot rs.EOF        labels = labels & "'" & rs!月份 & "',"        dataValues = dataValues & rs!销售额 & ","        rs.MoveNext    Loop    rs.Close        ' 去掉最后的逗号    If Len(labels) > 0Then        labels = Left(labels, Len(labels) - 1)        dataValues = Left(dataValues, Len(dataValues) - 1)    EndIf        ' 构建 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 "图表导出完成！", vbInformationEndSub' UTF-8 写入函数PrivateSub WriteUTF8File(filePath AsString, content AsString)    Dim stream AsObject    Set stream = CreateObject("ADODB.Stream")    With stream        .Type = 2        .Charset = "utf-8"        .Open        .WriteText content        .SaveToFile filePath, 2        .Close    EndWith    Set stream = NothingEndSub


四、技术要点说明

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'


输出的样式：


3.png

五、常见问题

Q1：图表不显示？
检查浏览器控制台是否有 JavaScript 错误，通常是数据格式问题。

Q2：离线使用怎么办？
下载 Chart.js 文件到本地，修改引用路径：


六、扩展应用

这个技术可以应用到：

  • MRP 运算结果可视化

  • 库存波动趋势分析

  • 生产进度监控仪表板

  • 质量分析图表

通过 VBA 自动化生成，可以实现定时导出、批量生成等功能。

如果你觉得这篇技术分享有用，欢迎点赞收藏。需要完整示例代码的朋友，可以在评论区留言交流。




【声明】内容源于网络
0
0
Access开发
面向Access爱好者与Access专业开发人员的技术服务平台，日常分享Access开发学习与实践中的点滴。
内容 187
粉丝 0
Access开发 面向Access爱好者与Access专业开发人员的技术服务平台，日常分享Access开发学习与实践中的点滴。
总阅读251
粉丝0
内容187