如何在Angular 15 TypeScript中通过下拉框切换Highcharts图表类型？

代码核心问题分析 #

1. 条件判断错误：第一个if(value="line")使用了赋值运算符=而非比较运算符，导致该分支永远为真，后续所有分支不会执行，应改为严格相等===。
2. 图表销毁逻辑缺失：仅切换到bar类型时销毁旧图表，其他类型切换时旧图表未清除，会引发DOM重复渲染或冲突。
3. 空指针风险：调用this.chartData.destroy()前未判断实例是否存在，若首次切换或实例未初始化会直接报错。

修正后的完整代码 #

onOptionsSelected(value: string) {
    console.log("选中的值是: " + value);
    
    // 统一销毁已有图表，避免重复渲染
    if (this.chartData) {
        this.chartData.destroy();
        this.chartData = undefined; // 清空实例引用
    }

    // 用switch替代多层else if，代码更易维护
    switch(value) {
        case "line":
            this.showChart1();
            break;
        case "bar":
            this.showChart2();
            break;
        case "area":
            this.showChart3();
            break;
        case "column":
            this.showChart4();
            break;
        default:
            console.warn("不支持的图表类型: " + value);
    }
}

补充说明 #

确保每个showChartX方法在创建新图表后，将实例赋值给this.chartData，示例如下（以Chart.js为例）：

showChart1() {
    this.chartData = new Chart('chart-container', {
        type: 'line',
        data: this.chartDataset,
        options: {}
    });
}

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