代码之家 › 专栏 › 技术社区 › THI

在另一个容器中显示甜甜圈图图例-SAP UI5

sap-fiori sapui5

0

THI · 技术社区 · 4 年前

我有两个并排的甜甜圈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);
},

0 回复 | 直到 3 年前

1

Boghyon Hoffmann 3 年前

该物业 renderTo 等待功能 返回DOM引用。

{ // vizProperties
  legendGroup: {
    renderTo: () => this.byId("legendContainer").getDOMRef()
  }
}

样品: https://embed.plnkr.co/Q5WktICjpfQrrLEo

但仅此而已。它只是将图例组呈现给给定的DOM引用。为了应用设计的样式,DOM引用必须是SVG元素。阿尔索 无交互 在这种情况下,如果图例容器在VizFrame之外,则支持鼠标悬停效果和通过单击图例选择数据。