0

我在这个代码上有很多问题，这是我正在学习数据表示的 uni 项目的一部分。

我正在使用 chart.js 库，这是示例饼图之一的代码，其中所有数据都被硬编码。当我在本地启动 HTML 文件时，此代码工作正常，出现图表，它是标签是动态的，一切都很好。

但是，一旦我将这个文件与项目的其余部分一起加载（这是一个使用 Javalin/JDBC 设置的 Java 接口，它正在加载所有 HTML 文件，最终将处理来自数据库的数据并将其注入 HTML 和JS) 图表不会出现在浏览器中。

我在此设置中使用了来自 chart.js 的其他图表，在此过程中我也遇到了此错误并且无法解决它，而是随着我继续弄乱代码而导致错误自行解决。

这是代码：

    <canvas id="myDoughnutChart" width=200 height=200></canvas>
        <script>
            
            var ctx = document.getElementById("myDoughnutChart");
            var myDoughnutChart = new Chart(ctx, {
                type: 'pie',
                data: {
                    datasets: [{
                        label: '# of Tomatoes',
                        data: [12, 19, 3, 5],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.5)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    
                    //cutoutPercentage: 40,
                    responsive: false,
        
                }
            });
        </script>

我已经使用检查功能仔细检查了浏览器中画布和脚本元素的状态，并且代码都在那里，与文件中的代码相同（javalin 设置没有错误解析任何内容）

我必须找到问题的唯一信息是 chrome 检查元素控制台中的错误： 输入意外结束 此错误消息的问题是它无法告诉我有关错误位置的任何信息作为 javalin 设置我正在使用（我的大学坚持我们用于该项目）将每个文件的 html 编译为一个长字符串，这意味着某些 chrome 检查元素功能无法使用。

现在我知道这个错误的罪魁祸首通常是缺少括号或其他东西。我已经检查了这个问题的脚本代码，但我对 javascript 很陌生，也许我错过了一些东西！无论如何，如果有人对这个问题有一些指示，任何反馈都将不胜感激。

以供参考：

这里只是本地加载的 HTML 页面

这是通过 javalin 框架加载到浏览器中的 HTML

4

0 回答 0