如何在JSP文件中集成使用Chart.js库并正常渲染图表

原代码问题排查 #

• 存在无效script标签：多余的未闭合script标签、<script type="test.jsp">属于非法声明，会阻塞浏览器解析代码
• DOM加载时机错误：绘图逻辑放在head中执行时，body内的canvas元素还未渲染，获取DOM会返回null，导致绘图失败
• 多文件拆分不符合需求：拆分了主逻辑JSP和test.jsp，需要合并为单文件实现

单JSP完整实现代码 #

所有逻辑均在同一个JSP文件中完成，不需要额外的HTML、JS或JSP文件，点击按钮直接生成带图表的新窗口：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图表触发页</title>
</head>
<body>
    <button id="showChartBtn">查看框架星数统计</button>

    <script type="text/javascript">
        document.getElementById('showChartBtn').onclick = function () {
            // 打开指定尺寸的空白新窗口
            const newWin = window.open('', '_blank', 'width=800,height=580');
            // 直接向新窗口写入完整页面代码
            newWin.document.write(`
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>星数统计</title>
    <script type="text/javascript">
        // 此处粘贴Chart.js库的完整压缩源码即可，无需引用外部JS文件
    </script>
</head>
<body>
    <canvas id="myChart" width="800" height="400"></canvas>
    <script type="text/javascript">
        // 等待页面元素加载完成后再绘图
        window.onload = function () {
            const ctx = document.getElementById('myChart').getContext('2d');
            const stars = [135850, 52122, 148825, 16939, 9763];
            const frameworks = ['React', 'Angular', 'Vue', 'Hyperapp', 'Omi'];
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: frameworks,
                    datasets: [{
                        label: 'Github Stars',
                        data: stars
                    }]
                }
            });
        }
    </script>
</body>
</html>
            `);
            newWin.document.close();
        }
    </script>
</body>
</html>

注意事项 #

• Chart.js源码可以从官方渠道下载后直接复制到上述对应script标签内，即可实现完全无外部资源依赖，所有代码都在当前JSP文件中运行
• 绘图逻辑放在window.onload回调中，确保canvas元素渲染完成后再执行，避免DOM为空的报错
• 移除了所有无效的标签声明，避免语法错误导致页面空白

内容的提问来源于stack exchange，提问作者OutOfMemoryError