我已经创建了显示Highcharts的Html。我已经使用了以下代码，并基于容器ID显示Highcharts。如果我向html div添加if条件，它会给出错误Highcharts错误#13：www.highcharts.com/errors/13/"。当我删除if条件时，它工作正常。你能帮助我如何使用条件语句和highcharts吗？下面是代码：

HTML格式

<table style="margin-top:30px" *ngIf=isChartOneAvailable>
                <tr style="width: 100%">
                    <td style="width: 25%">
                        <div id="container"></div>
                    </td>
                    <td style="width: 25%">
                        <div id="container1"></div>
                    </td>
                    <td style="width: 25%">
                        <div id="container2"></div>
                    </td>
                    <td style="width: 25%">
                        <div id="container3"></div>
                    </td>
                </tr>
            </table>

.ts

ngOnInit() {
    this.displayGraph();
}

private async displayGraph(): Promise<boolean> {
    try {
        let data: any[] = [1, 2, 3, 7, 8, 9, 10, 11, 12, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 7, 8, 9, 10, 11, 12, 14, 15, 16, 17, 18, 19, 45, 66, 33, 777, 3345, 234, 23, 46, 7, 8, 999, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50];
        let unit = 'KW'
        let effUnit = 'KW';
        var effName = 'effName';

        Highcharts.chart({
            chart: {
                renderTo: 'container',
                type: 'scatter',
                zoomType: 'xy',
                width: 300,
                height: 300
            },
            title: {
                text: ''
            },
            xAxis: {
                title: {
                    text: 'Measured Electric Power [KW]'
                },
                startOnTick: true,
                endOnTick: true,
                showLastLabel: true
            },
            yAxis: {
                title: {
                    text: 'Fitted Electric Power [KW]'
                }
            },
            plotOptions: {
                scatter: {
                    marker: {
                        radius: 3,
                        lineColor: "#0000ff",
                        states: {
                            hover: {
                                enabled: true,
                                lineColor: '#0000ff'
                            }
                        }
                    },
                    states: {
                        hover: {
                            enabled: false
                        }
                    },
                    tooltip: {
                        headerFormat: '<b>FittedPowerData</b><br>',
                        pointFormat: `{point.x} ${unit}, {point.y} ${unit}`
                    }
                }
            },
            exporting: {
                filename: 'Scatter_Chart_' + 'Himanshu',
                csv: {
                    columnHeaderFormatter: function (item, key) {
                        if (key) {
                            return effName + "(" + effUnit + ")"
                        }
                        return false
                    }
                },
                buttons: {
                    contextButton: {
                        menuItems: ["printChart",
                            "separator",
                            "downloadPNG",
                            "downloadJPEG",
                            "downloadPDF",
                            "downloadSVG",
                            "separator",
                            "downloadCSV",
                            "downloadXLS",
                        ]
                    }
                }
            },
            series: [{
                name: 'Fitted Power Data',
                data: data,
                type: 'scatter'
            }, {
                type: 'line',
                name: "Mean Function Regression Fit | Rsquared of {{0.71782}} | CVRMSE of {{13.95104}}",
                data: JSON.stringify([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]).includes("NaN") ? [] : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
                marker: {
                    enabled: false
                },
                states: {
                    hover: {
                        lineWidth: 0
                    }
                },
                enableMouseTracking: false
            }],
            credits: {
                enabled: false
            }
        });
    } catch (error) {
        this.errorService.handleUserActionError(error);
    } finally {
        return false;
    }
}