ASP.NET MVC中HighCharts动态渲染偶发Error #13的解决办法问询

问题说明 #

在ASP.NET MVC视图中通过HighCharts从控制器GetDataFromDatabase接口获取JSON数据渲染柱状图，前端增改数据后重新渲染时，偶发Highcharts Error #13（该错误表示渲染目标容器不存在、未加载完成，或数据与配置不匹配导致渲染失败）。

现有代码的核心问题 #

1. 全局数组baseTopsideModuleDry和baseTopsideModulebaseOp未重置，多次调用LoadDynamicData会导致数据累加，最终数据长度与x轴categories数量不匹配
2. 未正确销毁旧图表实例，重复调用Highcharts.chart会引发DOM绑定冲突
3. 未确保渲染容器#containerDatabaseData在调用时已完全加载

可行解决办法 #

1. 每次渲染前重置数据数组 #

避免多次调用后数据累加，确保数据长度与x轴分类匹配：

var baseTopsideModuleDry = [];
var baseTopsideModulebaseOp = [];

function LoadDynamicData(data) {
    // 重置全局数组，清空历史数据
    baseTopsideModuleDry = [];
    baseTopsideModulebaseOp = [];

    if (data && data != null) {
        // 原有循环逻辑
        for (var i = 0; i < data.length; i++) {
            baseTopsideModuleDry.push(data[i].BaseDry);
            baseTopsideModulebaseOp.push(data[i].BaseOp);
        }
        // ... 后续渲染代码
    }
}

2. 销毁旧图表实例，避免DOM冲突 #

在创建新图表前，检查并销毁已存在的图表实例：

function LoadDynamicData(data) {
    baseTopsideModuleDry = [];
    baseTopsideModulebaseOp = [];

    // 销毁旧图表（jQuery方式，需引入jQuery）
    const $container = $('#containerDatabaseData');
    if ($container.highcharts()) {
        $container.highcharts().destroy();
    }

    // 原生JS方式（无需jQuery）
    // const chartContainer = document.getElementById('containerDatabaseData');
    // const existingChart = Highcharts.charts.find(chart => chart.renderTo === chartContainer);
    // if (existingChart) existingChart.destroy();

    if (data && data != null) {
        // ... 原有循环和渲染逻辑
    }
}

3. 确保渲染容器存在且可用 #

添加容器存在性检查，避免在容器未加载时执行渲染：

function LoadDynamicData(data) {
    const chartContainer = document.getElementById('containerDatabaseData');
    if (!chartContainer) return; // 容器不存在直接终止

    baseTopsideModuleDry = [];
    baseTopsideModulebaseOp = [];

    // ... 销毁旧图表、处理数据逻辑

    if (data && data != null) {
        // ... 渲染图表
    }
}

4. 优化数据兼容性处理 #

确保数据为有效数字，若后端返回数据长度不足x轴分类数量，补0填充：

for (var i = 0; i < data.length; i++) {
    // 转换为数字，空值或非数值用0替代
    baseTopsideModuleDry.push(parseFloat(data[i].BaseDry) || 0);
    baseTopsideModulebaseOp.push(parseFloat(data[i].BaseOp) || 0);
}

// 确保数据长度与x轴categories数量一致（当前categories共11项）
const categoryCount = 11;
while (baseTopsideModuleDry.length < categoryCount) {
    baseTopsideModuleDry.push(0);
    baseTopsideModulebaseOp.push(0);
}

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