带有Angular6的堆积列Highchart无法正常工作

Question

我正在尝试通过链接中的Angular标准示例来首次使用angular6实现堆积的柱状图

https://www.tutorialspoint.com/angular_highcharts/angular_highcharts_column_stacked.htm

但这给了我网页上的空白容器。有什么需要补充的吗？

下面，我附上我的html和ts文件以供参考。

app.module.ts 

 imports: [

      ...

        HighchartsChartModule

    ],

.HTML file 

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">

    <highcharts-chart

        [HighCharts]="highcharts"

        [options]="chartOptions"

    ></highcharts-chart>

</div>

.ts file 

 highcharts = Highcharts;

    chartOptions = {

        chart: {

            type: 'column'

        },

        title: {

            text: 'Monthly Average Temperature'

        },

        subtitle: {

            text: 'Source: WorldClimate.com'

        },

        legend: {

            layout: 'vertical',

            align: 'left',

            verticalAlign: 'top',

            x: 250,

            y: 100,

            floating: true,

            borderWidth: 1,

        },

        xAxis: {

            categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'], title: {

                text: null

            }

        },

        yAxis: {

            min: 0,

            title: {

                text: 'Population (millions)',

                align: 'high'

            },

            labels: {

                overflow: 'justify'

            }

        },

        tooltip : {

            valueSuffix: ' millions'

        },

        plotOptions: {

            column: {

                dataLabels: {

                    enabled: true

                }

            },

            series: {

                stacking: 'normal'

            }

        },

        credits:{

            enabled: false

        },

        series: [

            {

                name: 'Year 1800',

                data: [107, 31, 635, 203, 2]

            },

            {

                name: 'Year 1900',

                data: [133, 156, 947, 408, 6]

            },

 请分享您的建议/建议。