无法用innerHTML正确加载Highcharts图表至div的问题排查

尝试实现点击Checkbox切换图表功能，已通过Ajax调用后端函数获取ChartBuilderResult对象，但无法用innerHTML将返回内容填充到目标div中。

关键问题诊断 #

1. jQuery方法调用错误：使用jQuery对象时误用了原生JS的innerhtml属性，jQuery对应的方法是.html()。
2. Ajax数据类型不匹配：后端返回的是HTML局部视图，但Ajax请求设置了dataType: 'json'，导致jQuery尝试解析HTML为JSON失败。
3. 局部视图脚本语法错误：window[@{WriteLiteral(chartID); }];是无效语法，chartID本身是函数调用语句（如createChart123()），不能作为window的属性键名，且该语句未实际执行创建图表的函数。

修改步骤 #

1. 修正JavaScript代码 #

$(document).ready(function () {
    $('body').find('input[data-charttoggle-enabled="true"]').each(function () {
        var opt1 = $(this).attr('data-charttoggle-opt-1');
        var opt2 = $(this).attr('data-charttoggle-opt-2');
        var divtochange = $(this).parent().parent().parent().next();
        // 可优化为更稳定的id选择器：var divtochange = $('#top5');

        $.ajax({
            url: opt1,
            type: 'GET',
            dataType: 'html', // 改为html类型，匹配后端返回的局部视图
            context: this,                
            success: function (data) {                  
                $(divtochange).html(data); // 使用jQuery的.html()方法
            },
            error: Functions.Elements.ajaxError
        })
    });       
});

• 移除不必要的contentType: 'application/json'（GET请求无需设置，且后端接收普通GET参数）
• 将dataType改为html，确保jQuery正确处理返回的HTML内容
• 替换innerhtml为jQuery标准的.html()方法

2. 修正局部视图的脚本代码 #

原局部视图脚本：

<script>
    window[@{WriteLiteral(chartID); }];
</script>

修改为：

<script>
    @{WriteLiteral(chartID);}
</script>

• chartID变量的值是createChart{Model.Chart.ID}()，直接输出后会生成createChartXXX();，可直接执行创建图表的函数，同时避免原语法错误。

3. 验证后端返回内容 #

确保后端ChartBuilderToPartialView方法返回的PartialView正确渲染图表HTML和配置，Model.Renderer.RenderHtml(true)生成的图表容器与代码无异常。

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