Question

我试图在径向图上显示百分比值，但是径向图的percent属性仅允许我显示0到100之间的值。

我该怎么做？

Answer 1

使用id__xmlview0查看，以及ID为RadialMicroChart1的图表：

$("#__xmlview0--RadialMicroChart1 > svg > text").text(yourText)

即使您有多个图表，它也将起作用。

Answer 2

SAP不允许径向微图的值超过100％，您可以尝试使用JQuery来设置值，并操纵分数和总计以适合您的情况。

使用图表的唯一ID作为第一个图表chartRadial1的元素。

更新：

请记住，根据视图的布局，孩子可能会发生变化，因此您必须对nth and children selectors进行更多研究，以确保您选择了正确的孩子，但在本例中，{{ 3}}。

svg's 6th child

var percent = $(".sapSuiteRMCFont");
percent.text("200%");

或在控制器和视图中：

press: function(oEvent) {
  var myVal = 150,
    myTotal = 200,
    actTotal = 100,
    newVal = (myVal * actTotal) / myTotal;
  this.getView().byId("chartRadial1").setPercentage(newVal);
  //with the given id in xml view, you can be certain only the text for chartRadial1 will change using child selector
  setTimeout(function() {
    $("div#__xmlview2--chartRadial1 > svg.sapSuiteRMC.sapSuiteRMCSizeResponsive.sapSuiteRMCNeutralTextColor :nth-child(6)").text(myVal + "%");
  }, 500);
}

div#__xmlview2--chartRadial1>svg.sapSuiteRMC.sapSuiteRMCSizeResponsive.sapSuiteRMCNeutralTextColor :nth-child(6) {
  font-family: fantasy !important;
}

div#__xmlview2--chartRadial2>svg.sapSuiteRMC.sapSuiteRMCSizeResponsive.sapSuiteRMCNeutralTextColor :nth-child(6) {
  font-family: arial !important;
}

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="sap.sample.Detail" xmlns:semantic="sap.m.semantic" xmlns:c="sap.suite.ui.microchart">
  <content>
    <Label text="6.25rem x 6.25rem" width="12.5rem" class="sapUiSmallMargin" />
    <FlexBox width="6.25rem" height="6.25rem">
      <items>
        <c:RadialMicroChart id="chartRadial1" size="Responsive" percentage="99" press="press"></c:RadialMicroChart>
      </items>
    </FlexBox>
    <FlexBox width="6.25rem" height="6.25rem">
      <items>
        <c:RadialMicroChart id="chartRadial2" size="Responsive" percentage="99" press="press"></c:RadialMicroChart>
      </items>
    </FlexBox>
  </content>
</mvc:View>

sapui5如何在径向图上显示超过100％的值

2 个答案: