angular2 - 动态渲染高级图表

Question

我试图通过angular2中的配置文件动态呈现图表（highcharts）。配置文件包含在component.ts中推送到数组列表的对象列表，并通过HTML文件中的ngFor指令读取。虽然图表在各自的div中完美呈现，但删除div1会呈现空白页面，即div2和div3被隐藏，而删除其他div（div2或div3）则不会影响其他图表。

Config.ts

export const configs = [
{   chart:{
        type:'line',
        renderTo: 'Div1'
    },
    placeholder : 'line_chart',
    title : {text : 'abc'},
    xAxis:{categories:[]},
    plotOptions: {
        line: {
            dataLabels: {enabled: true},
        }
    },
    series: []
},
{
    chart:{
        type:'bar',
        renderTo: 'Div2'
    },
    placeholder : 'bar_chart',
    title: {text: 'def'},
    xAxis: {
        categories: [],
        title: {
            text: null
        }
    },
    yAxis: {
        min: 0,
        title: {text: 'xyz'},
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    },
    series: []
},
{
    chart:{
        type:'pie',
        renderTo: 'Div3'
    },
    placeholder : 'pie_chart',
    title: {text: 'pqr'},
    tooltip: {pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'},
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
            }
        }
    },
    xAxis : {categories: []},
    series: []
}

app.component.ts

export class AppComponent implements OnInit{
title = 'Graphs';
charts = [];
constructor(private graphService: GraphsService){}

ngOnInit(): void{

    configs.forEach(config => {
        this.graphService.getData(config.chart.type, config.placeholder).then(dataList => {
            config.series.push(dataList[config.placeholder]);
            config.xAxis.categories = dataList[config.placeholder].name;
            this.charts.push(config);
        })
    });
    console.log(this.charts);
}
}

HTML文件

<div *ngFor="let chart of charts">
    <chart [options]="chart"></chart>
</div>
<div id="Div1"></div>
<div id="Div2"></div>
<div id="Div3"></div>