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

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

  •  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
  •  1
  •   Boghyon Hoffmann    3 年前

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

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

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

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