Question

我使用Viz库在UI5中创建了一个瀑布图。

瀑布图的JSON数据如下：

{ "Rowsets" : { 
    "DateCreated" : "2017-03-27T19:20:57", "Version" : "15.1 SP2 Patch 5 (Jul 20, 2016)", "StartDate" : "2017-03-27T18:20:55-0500", "EndDate" : "2017-03-27T19:20:55-0500", "CachedTime" : "", 
    "Rowset" : [ 
    { "Columns" : { 
        "Column" : [ 
        { "Name" : "Status", "SourceColumn" : "Status", "Description" : "", "SQLDataType" : 1, "MinRange" : 1.0, "MaxRange" : 1.0 }, 
        { "Name" : "Hours", "SourceColumn" : "Hours", "Description" : "", "SQLDataType" : 8, "MinRange" : 1.0, "MaxRange" : 1.0 }, 
        { "Name" : "Type", "SourceColumn" : "Type", "Description" : "", "SQLDataType" : 1, "MinRange" : 1.0, "MaxRange" : 1.0 } ] }, 
    "Row" : [ 
        { "Status" : "Full Production Time", "Hours" : 7.85, "Type" : "null" }, 
        { "Status" : "Quality Loss", "Hours" : 0.15, "Type" : "null" }, 
        { "Status" : "Net Run Time", "Hours" : 8.00, "Type" : "subtotal:2" }, 
        { "Status" : "Performance Loss", "Hours" : 69.00, "Type" : "null" }, 
        { "Status" : "Run Time", "Hours" : 77.00, "Type" : "subtotal:2" }, 
        { "Status" : "Unplanned DownTime", "Hours" : 76.00, "Type" : "null" }, 
        { "Status" : "Scheduled Time", "Hours" : 153.00, "Type" : "subtotal:2" }, 
        { "Status" : "Planned DownTime", "Hours" : 15.00, "Type" : "null" }, 
        { "Status" : "Available Time", "Hours" : 168.00, "Type" : "subtotal:2" }, 
        { "Status" : "Total Time", "Hours" : 168.00, "Type" : "subtotal:1" } ]
         } ]
     }
 }

瀑布图：

瀑布图的视图：

<l:FixFlex id='chartFixFlex' minFlexSize="250">
<l:flexContent>
<viz:Popover id="idPopOver">
</viz:Popover>
<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}"
height='100%' width="100%" vizType='horizontal_waterfall'>
<viz:dataset>
<viz.data:FlattenedDataset
data="{/Rowsets/Rowset/0/Row}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Type" value="{Type}" />
<viz.data:DimensionDefinition name="Status" value="{Status}" />
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Hours" value="{Hours}" />
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem uid="valueAxis" type="Measure" values="Hours" />
<viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="Status" />
<viz.feeds:FeedItem uid="waterfallType" type="Dimension" values="Type" />
</viz:feeds>
</viz:VizFrame>
</l:flexContent>
</l:FixFlex>

瀑布图的控制器：

var sURL = ** URL whihc brings bak above mentioned JSON Data **
var oChartModel = new sap.ui.model.json.JSONModel;
oChartModel.loadData(sURL,{},false);

var oVizFrame = this.oVizFrame = this.byId("idVizFrame");

oVizFrame.setVizProperties({
    plotArea : {
        dataLabel : {
            visible : true
        }
    },

    valueAxis : {

        title : {
            visible : true
        }
    },

    categoryAxis : {
        title : {
            visible : true
        }
    },

    legend: {
                            title: {
                                visible: false
                            },
                            label: {
                                text: {
                                      positiveValue: "Hours"
                                }
                            }
    },

    title : {
        visible : true,
        text : 'Waterfall Chart'
    }

});

oVizFrame.setModel(oChartModel);

现在，图表看起来不错，运行正常。但我得到了图表需要以相反的顺序显示状态的要求 - 基本上所有的状态都应该翻转。总时间应该在最高点，而完全生产应该在最底层。

根据我的逻辑，在瀑布图中，每个状态都是上述几种状态的小计，具体取决于JSON数据中显示的条件。所以现在要翻转状态，我无法弄清楚我的JSON数据应该如何显示，以便状态以相反的顺序和正确的格式显示。

有任何反馈或建议吗？

此致

Answer 1

你能发布你当前的JSON文件吗？你看过Sample: Waterfall - Horizontal了吗？如果忽略“餐厅”到“零售”的顶部栏并在垂直轴上交换/翻转图例，这是您要查找的图形吗？您也可以来回地将数据集从“小”切换为“中”。

您可以查看此示例的相应编码。如果切换到调试器并显示“网络”，则在将数据集更改为“小”或“中”时，您还可以找到用于此示例的相应.json文件。

Answer 2

我可以通过重新调整我的JSON数据来翻转订单。

我的新JSON如下：

{ "Rowsets" : { 
    "DateCreated" : "2017-03-27T19:40:28", "Version" : "15.1 SP2 Patch 5 (Jul 20, 2016)", "StartDate" : "2017-03-27T18:40:26-0500", "EndDate" : "2017-03-27T19:40:26-0500", "CachedTime" : "", 
    "Rowset" : [ 
    { "Columns" : { 
        "Column" : [ 
        { "Name" : "Status", "SourceColumn" : "Status", "Description" : "", "SQLDataType" : 1, "MinRange" : 1.0, "MaxRange" : 1.0 }, 
        { "Name" : "Hours", "SourceColumn" : "Hours", "Description" : "", "SQLDataType" : 8, "MinRange" : 1.0, "MaxRange" : 1.0 }, 
        { "Name" : "Type", "SourceColumn" : "Type", "Description" : "", "SQLDataType" : 1, "MinRange" : 1.0, "MaxRange" : 1.0 } ] }, 
    "Row" : [ 
        { "Status" : "Total Time", "Hours" : 168.00, "Type" : "total" }, 
        { "Status" : "Available Time", "Hours" : 168.00, "Type" : "total" }, 
        { "Status" : "Planned DownTime", "Hours" : -15.00, "Type" : "null" }, 
        { "Status" : "Scheduled Time", "Hours" : 153.00, "Type" : "subtotal:1" }, 
        { "Status" : "Unplanned DownTime", "Hours" : -76.00, "Type" : "null" }, 
        { "Status" : "Run Time", "Hours" : 77.00, "Type" : "subtotal:1" }, 
        { "Status" : "Performance Loss", "Hours" : -69.00, "Type" : "null" }, 
        { "Status" : "Net Run Time", "Hours" : 8.00, "Type" : "subtotal:1" }, 
        { "Status" : "Quality Loss", "Hours" : -0.15, "Type" : "null" }, 
        { "Status" : "Full Production Time", "Hours" : 7.85, "Type" : "subtotal:1" } ]
         } ]
     }
 }

我希望它有所帮助！

使用JSON模型

2 个答案: