Razor视图动态渲染Highcharts图表遇语法错误，求非Ajax解决方案

问题根源 #

你遇到的「Uncaught SyntaxError: missing ) after argument list」错误，基本是Razor循环渲染JS代码时，数据序列化不规范、引号冲突或代码拼接结构错误导致的——比如直接嵌入C#对象时没转成合法JSON，或者字符串中的双引号破坏了JS语法结构。

分步解决方法 #

1. 确认后端数据结构（示例） #

假设你后端的分组数据是如下结构，确保数据层级清晰：

public class ChartDataset
{
    public string GroupTitle { get; set; }
    public List<string> XCategories { get; set; }
    public List<ChartSeries> SeriesList { get; set; }
}

public class ChartSeries
{
    public string SeriesName { get; set; }
    public List<decimal> DataPoints { get; set; }
}

// 传递到视图的模型
public List<ChartDataset> GroupedChartData { get; set; }

2. Razor视图中正确渲染图表 #

核心是用Json.Serialize()将C#对象转为合法JSON，避免手动拼接的语法错误：

@{
    var chartCounter = 0;
}

@foreach (var dataset in Model.GroupedChartData)
{
    chartCounter++;
    // 生成唯一的图表容器
    <div id="column-chart-@chartCounter" style="width: 600px; height: 400px; margin: 20px 0;"></div>

    <script>
        Highcharts.chart('column-chart-@chartCounter', {
            chart: {
                type: 'column'
            },
            title: {
                text: '@Html.Raw(dataset.GroupTitle)'
            },
            xAxis: {
                categories: @Html.Raw(Json.Serialize(dataset.XCategories))
            },
            yAxis: {
                min: 0,
                title: {
                    text: '数值'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: @Html.Raw(Json.Serialize(dataset.SeriesList))
        });
    </script>
}

3. 关键注意点 #

• 强制使用Json.Serialize()：自动处理引号转义、JSON格式校验，彻底避免手动拼接字符串导致的语法错误。
• 用@Html.Raw()输出JSON：防止Razor将JSON中的双引号转义为HTML实体（如"），导致JS无法解析。
• 保证容器ID唯一：通过循环计数器chartCounter生成唯一ID，避免JS选择器冲突。
• 处理特殊字符：如果分组标题包含引号、换行等特殊字符，用@Html.Raw()包裹，避免破坏JS字符串结构。

验证步骤 #

1. 打开浏览器开发者工具的「Elements」面板，检查渲染后的JS代码，确认categories和series部分是合法的JSON格式，无多余引号或缺失括号。
2. 查看「Console」面板，确认无语法错误，图表正常渲染。

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