Chart.js、Chrome、Javalin：语法错误 - 输入意外结束

编程问答 2022-04-28

问题描述

这段代码有很多问题，这是我正在做的 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,'rgba(75,192,0.2)'
                        ],borderColor: [
                            'rgba(255,1)',1)'
                        ],borderWidth: 1
                    }]
                },options: {
                    
                    //cutoutPercentage: 40,responsive: false,}
            });
        </script>

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

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

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

供参考：

Here is just the HTML page being loaded locally

Here is the HTML being loaded in the browser through the javalin framework

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javalinjavascriptsyntax-error