HighChart清除并初始化

我正在尝试使用使用DropDownList值动态填充的HighCharts。假设我在DropDownList中有三个值，这三个值有不同的数据集，将绑定到HighChart。我做了如下工作，效果很好：

LoadTopsideModuleData();
    function LoadTopsideModuleData() {
        $.ajax({
            url: url9,
            type: "GET",
            data: { 'id': reportId, 'moduleId': moduleId },
            success: function (data) {
                if (data && data != null) {
                    for (var i = 0; i < data.length; i++) {
                        baseTopsideModuleDry.push(data[i].BaseDry);
                        baseTopsideModulebaseOp.push(data[i].BaseOp);
                    }

                    var chartTopsideModule = {
                        chart: {
                            renderTo: 'containerTopsideModule',
                            type: 'column'
                        },
                        title: {
                            text: 'B11P-A Weight By Disciplines'
                        },
                        subtitle: {
                            text: ''
                        },
                        xAxis: {
                            categories: [
                                'Structural Primary',
                                'Structural Secondary',
                                'Mechanical',
                                'Piping',
                                'Electrical',
                                'Instrument',
                                'Telecommunication',
                                'Safety',
                                'Architectural  ',
                                'Other/ Future Load  ',
                                'Live Load'
                            ],
                            crosshair: true
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: 'Weight Data'
                            }
                        },
                        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,
                                borderWidth: 0
                            }
                        },
                        series: [
                            {
                                name: 'Dry',
                                data: baseTopsideModuleDry
                            }, {
                                name: 'Operating',
                                data: baseTopsideModulebaseOp
                            }]
                    };

                    chart = new Highcharts.Chart(chartTopsideModule);
                }
            },
            error: function (xhr, status, error) {
                showErrorPopup('Error', error);
            }
     });
}

现在，当我更改DropDownList值时，它不会从图表中清除以前的数据集。在此处共享截图：

图1：初始加载时

屏幕截图1

图2：当更改DropDownList值时，图表将以如下方式呈现之前的数据集、分散视图

屏幕截图2

我试图在DropDownList事件中清除HighChart，但未能做到，因为它没有：

    var chart;
    $("#topsideModuleName").change(function () {            
        var moduleIdChange = $("#topsideModuleName").val();
        $.ajax({
            url: url9,
            type: "GET",
            data: { 'id': reportId, 'moduleId': moduleIdChange },
            success: function (result) {
                chart.destroy(); //Clear chart object when initialization
                LoadTopsideModuleData();
            },
            error: function (xhr, status, error) {
                showErrorPopup('Error', error);
            }
        });
    });

是否有任何解决方法可以在图表中一次呈现特定数据集？如果有人对此提出建议，请告知。