使用Chart.js创建混合图表时遇Unexpected end of input语法错误

核心问题及修复点 #

• 变量名拼写错误：定义的变量是resolveddData（多了一个d），但数据集里引用的是resolvedData，导致未定义变量，需修正为统一的变量名。
• 语法括号不匹配：
  • options中的plugins对象缺少闭合大括号，需补充}
  • 代码末尾多余的});无对应包裹函数，直接删除
• 缺失labels配置：data对象未引入已定义的labels变量，Chart.js需要该属性渲染x轴标签，需在data中添加labels: labels。

修正后的完整代码 #

<div id="chartContainer" style="width: 100%; height: 150px;">
    <canvas id="ticketCountChart" width="1100" height="180"></canvas>
</div>

<script>
        var ctx = document.getElementById('ticketCountChart').getContext('2d');

        var newTicketData = @Model.DashboardMetrics.HourlyTicketData;
        var resolvedData = @Model.DashboardMetrics.HourlyResolvedTicketsData; // 修正变量名

        var labels = newTicketData.map(item => item.Hour);

        var lineBarChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels, // 添加labels配置
                datasets: [
                    {
                        type: 'line',
                        label: 'New Tickets',
                        data: newTicketData.map(item => item.NewTicketsCount),
                        borderColor: 'rgba(75, 192, 192, 1)',
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        fill: true
                    },
                    {
                        type: 'bar',
                        label: 'Resolved Tickets',
                        data: resolvedData.map(item => item.ResolvedTicketsCount),
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Hour'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Number of Tickets'
                        }
                    }
                },
                plugins: {
                    title: {
                        display: true,
                        text: 'Tickets Overview (Last 24 Hours)'
                    },
                    legend: {
                        display: true,
                        position: 'bottom'
                    },
                    tooltip: {
                        callbacks: {
                            label: function (tooltipItem) {
                                var label = tooltipItem.dataset.label || '';
                                var value = tooltipItem.raw;
                                return label + ': ' + value;
                            }
                        }
                    }
                } // 补充plugins的闭合大括号
            }
        });
</script>

内容的提问来源于stack exchange，提问作者Daniel .Comerford