我有两个并排的甜甜圈VizFrame图表,它们有相同的传说。我想在这些图表下方的普通HBox中显示图例。
目前,如果我使图例对一个图表可见,对另一个图表隐藏,由于VizFrame的宽度限制,很少有图例项不可见,并变成“椭圆”。因此,仅显示一个图表的图例并不能解决问题。
我试着在链接上查看甜甜圈图表的文档
https://ui5.sap.com/docs/vizdocs/index.html#reference/chartProperty/Charts/Pie%20%20(2)/Donut%20Chart
。我看到了许多布局对齐、位置等属性。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>
View1.controller.js
// FlattenedDataset required from "sap/viz/ui5/data/FlattenedDataset"
// FeedItem required from "sap/viz/ui5/controls/common/feeds/FeedItem"
drawDonutChart: function (data) {
var oVizFrame = controller.getView().byId("Chart1");
if (oVizFrame !== undefined) {
oVizFrame.destroyFeeds();
oVizFrame.destroyDataset();
}
var oDataset = new 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({
// ...
legendGroup: {
renderTo: document.getElementById("LegendContainer") // this seems to be a good option but results in error
},
// ...
});
var feedValueAxis = new FeedItem({
uid: "size",
type: "Measure",
values: [ "Salary" ]
});
var feedCategoryAxis = new FeedItem({
uid: "color",
type: "Dimension",
values: [ "Employee Status" ]
});
oVizFrame.addFeed(feedValueAxis);
oVizFrame.addFeed(feedCategoryAxis);
},