Angular2 Highcharts：基于面板宽度的饼图大小

我已经创建了一个饼图，并将此饼图放置在面板中。我的面板宽度可以是600或400，具体取决于用户设置。当大小为600时，饼图和图例显示正确。但当其为400时，图例显示在面板外部。有没有办法减小饼图的大小？在这种情况下，如果大小不够，也可以在底部显示图例

我的plnkr

我的绘图选项

 plotOptions: {
                pie: {

                    innerSize: 120,
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true,
                    states: {
                      hover: {
                        halo: {
                          size: 0
                        }
                      }
                    }
                }
            },

响应代码：

响应：{

                    rules: [{
                            condition: {
                                maxWidth: 500
                            },
                            chartOptions: {
                                legend: {
                                    align: 'center',
                                    verticalAlign: 'top',
                                    layout: 'horizontal',
                                    labelFormatter: function () {
                                       return '<div style="width:180px"><span class="pull-left" style= "font-weight: 500; padding-bottom: 5px; font-family:Helvetica ">' + this.name +
                '</span><span class="pull-right" style= "font-weight: 500" >' + this.value +
                '</span></div> ';
                                    }
                                },
                                pie: {
                                    size: 100,
                                    innerSize: 40
                                }
                            }
                        }]
                }

规则：[{
条件：{
最大宽度：500
},
图表选项：{
图例：{
对齐：'居中'，
垂直排列：“顶部”，
布局：“水平”，
labelFormatter:函数（）{
返回“”+此名称+
''+这个值+
' ';
}
},
馅饼：{
尺码：100，
内部尺寸：40
}
}
}]
}

您看过Highcharts响应规则吗？是的，我已经试过了，在问题中添加了我的回答代码。但是现在图例出现在图表上方。这是因为您将垂直对齐设置为顶部-将其设置为底部