Sapui5 在另一个容器中显示圆环图图例-SAP UI5

我有两个甜甜圈图表并排，他们有相同的传说。每个图表都位于一个框架中，并具有固定的宽度。我想在这些图表下面的普通HBox中显示图例。目前，如果我使图例对一个图表可见而对另一个图表隐藏，由于viz框架的宽度限制，很少有图例项不可见，并进入“椭圆”。因此，仅显示一个图表的图例并不能解决此问题。我试图浏览链接上的甜甜圈图表文档： 我看到了许多布局对齐、位置等属性。LegendGroup有一个属性：renderTo，它似乎非常适合在另一个容器中显示图例项。但我不知道如何使用它。当我试图传递DOM元素ID时，我想在其中显示图例，但它抛出错误“r不是函数”

legendGroup.renderTo:Legend Group可以渲染到其他DOM元素。其返回值必须是Dom元素

请告知是否有任何方法可以将图例显示到另一个容器中

View.xml：

   <HBox id="ChartContainer" justifyContent="Center" width="500px">
       <viz:VizFrame id="Chart1" vizType="donut" height="150px" width="250px"></viz:VizFrame>   
      <viz:VizFrame id="Chart2" vizType="donut" height="150px" width="250px"></viz:VizFrame>
  </HBox>
  <HBox id="LegendContainer" width="100px" height="100px"></HBox>

    drawDonutChart: function (data) {
        var oVizFrame = controller.getView().byId("Chart1");
        if (oVizFrame !== undefined) {
            oVizFrame.destroyFeeds();
            oVizFrame.destroyDataset();
        }
        var oDataset = new sap.viz.ui5.data.FlattenedDataset({
            dimensions: [{
                name: 'Employee Status',
                value: "{EmployeeStatus}"
            }],


            measures: [{
                name: 'Salary',
                value: '{Salary}'
            }],


            data: {
                path: "modelName>/DonutChart/EmpSalary"
            }
        });
        oVizFrame.setDataset(oDataset);
        oVizFrame.setVizType('donut');
        oVizFrame.setVizProperties({
            tooltip: {
                visible: true
            },
            title: {
                visible: true,
                text: "Emp Salary"
            },
            legend: {
                showFullLabel: true,
                visible: true,
                postRenderer: function (legends) {
                    console.log(legends);
                }
            },
            legendGroup: {
                //  layout: {
                //      alignment: "center",
                //      position: "bottom"
                //  },
                *renderTo: document.getElementById("LegendContainer")*
               // this seems to be a good option but results in error
            },
            dataLabel: {
                line: {
                    visible: true,
                    color: "#a8a8a8"
                },
                type: "value",
                visible: true,
                distance: 0.25
            }
        });


        var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
                'uid': "size",
                'type': "Measure",
                'values': ["Salary"]
            }),


            feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
                'uid': "color",
                'type': "Dimension",
                'values': ["Employee Status"]
            });
        oVizFrame.addFeed(feedValueAxis);
        oVizFrame.addFeed(feedCategoryAxis);
    }