在controller中制作SAP图表

在controller中制作SAP图表

Charts.view.xml

<mvc:View
    controllerName="sap.ui.taking.controller.Charts"
    xmlns="sap.m"
    xmlns:viz="sap.viz.ui5.controls"
    xmlns:layout="sap.ui.layout"
    xmlns:core="sap.ui.core"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds"
    xmlns:viz.data="sap.viz.ui5.data">
    <layout:FixFlex>
        <layout:flexContent>
            <viz:Popover id="idPopover"/>
            <viz:VizFrame id="idVizFrame" height="100%" width="100%"/>
        </layout:flexContent>
    </layout:FixFlex>
</mvc:View>

student.json

{
    "StudentCollection":[
        {
            "id": 1,
            "name": 100,
            "age": 110,
            "dept": 100,
            "income": 3500
        },
        {
            "id": 2,
            "name": 200,
            "age": 210,
            "dept": 100,
            "income": 3500
        },
        {
            "id": 3,
            "name": 300,
            "age": 310,
            "dept": 100,
            "income": 3500
        },
        {
            "id": 4,
            "name": 400,
            "age": 410,
            "dept": 100,
            "income": 3500
        },
        {
            "id": 5,
            "name": 500,
            "age": 510,
            "dept": 100,
            "income": 3500
        },
        {
            "id": 6,
            "name": 600,
            "age": 610,
            "dept": 100,
            "income": 3500
        },
        {
            "id": 7,
            "name": 700,
            "age": 710,
            "dept": 100,
            "income": 7500
        },
        {
            "id": 8,
            "name": 800,
            "age": 810,
            "dept": 100,
            "income": 7500
        },
        {
            "id": 9,
            "name": 900,
            "age": 910,
            "dept": 100,
            "income": 7500
        },
        {
            "id": 10,
            "name": 1000,
            "age": 1100,
            "dept": 100,
            "income": 7500
        },
        {
            "id": 11,
            "name": 1100,
            "age": 1200,
            "dept": 100,
            "income": 7500
        },
        {
            "id": 12,
            "name": 1200,
            "age": 1300,
            "dept": 100,
            "income": 7500
        }
    ]    
}

Charts.controller.js

sap.ui.define([
    'sap/ui/core/mvc/Controller',
    'sap/ui/model/json/JSONModel',
    'sap/viz/ui5/data/FlattenedDataset',
    'sap/viz/ui5/format/ChartFormatter',
    'sap/viz/ui5/api/env/Format',
    'sap/viz/ui5/controls/common/feeds/FeedItem'
], function(Controller,JSONModel,FlattenedDataset,ChartFormatter,Format,FeedItem) {
    'use strict';
    return Controller.extend("sap.ui.taking.controller.Line",{
        onInit:function(){
            var oModel = new JSONModel(sap.ui.require.toUrl("sap/ui/taking/odata/student.json"));
            this.getView().setModel(oModel,"student");
            oModel.setProperty("/StudentCollection",oModel);
            var oVizFrame = this.getView().byId("idVizFrame");
            //判断规则
            var oRule = function(data){
                console.log(data);
                return data.income>3500 ? true:false;          
            };
            oVizFrame.setVizType("line");
            oVizFrame.setVizProperties({
                title:{
                    text: "年度收入表",  //设置标题的文本
                    alignment: "center",  //设置标题的位置["left","center","right"]
                    style:{
                        color: "purple",    //设置标题文本的颜色
                        fontFamily: "LiSu", //设置标题文本的字体
                        fontSize: "50px"    //设置标题文本的字体大小
                    }
                },
                tooltip:{
                    background:{
                        borderColor: "red", //设置工具提示的边框颜色
                        color: "transprent", //设置工具提示的背景颜色
                    },
                    bodyDimensionLabel:{
                        color: "blue"  //设置工具提示中维度的字体颜色
                    },
                    bodyDimensionValue:{
                        color: "blue"   //设置工具提示中维度对应值的颜色
                    },
                    bodyMeasureLabel:{
                        color: "orange"  //设置工具提示中度量的字体颜色
                    },
                    bodyMeasureValue:{
                        color: "orange"  //设置工具提示中度量对应值的颜色
                    },
                    formatString: "0.0", //格式化工具提示中度量对应值的
                    separationLine:{
                        color:"black" //设置当选取两个值以上时，出现分割线
                    },
                },
                legend: {
                    drawingEffect: "glossy",    //设置legend主题为光泽
                    hoverShadow:{
                        color: "orange" //设置光标落在legend上背景颜色    
                    },
                    hoverSelectedShadow:{
                        color: "yellow" //设置光标选中legend后点击背景颜色
                    },
                    label: {
                        style: {
                            color: "green", //修改displayName文字颜色
                            fontFamily: "LiSu"
                        },
                    },
                    title:{
                        visible: "true",    //设置legend标题可见
                        text: "月收入",     //设置legend标题文本
                        style:{
                            color: "green"  //设置legend标题文本颜色
                        }
                    }
                },
                plotArea: {
                    background:{
                        color: "pink",  //设置plotArea背景颜色
                        drawingEffect: "glossy" //设置plotArea主题为光泽
                    },
                    dataLabel: {
                        formatString: "0.0",
                        visible: true,  //设置数据标题可见
                        style:{
                            color: "#FA5882"    //设置数据标题颜色
                        }
                    },
                    dataPoint:{
                        stroke:{
                            visible: "true",    //设置数据点可见
                            color: "green"  //设置数据点颜色
                        }
                    },
                    dataPointStyle: {
                        rules:[
                            {
                                callback:oRule,
                                properties: {
                                    color:"sapUiChartPaletteSequentialHue1" //根据callback返回的值(true/false)更改颜色
                                },
                                displayName:"月收入>3500", //右侧显示的规则
                            }
                        ],
                        others:{
                            properties: {
                                color: "sapUiChartPaletteSequentialHue1Light2"
                            },
                            displayName: "月收入<3500",
                            dataName:{  //设置数据字段别名
                                id: "月份",
                                income: "月收入"
                            }
                        }
                    }
                },
            });
            //获取坐标值
            var dataset = {
                data : { 
                    path : "student>/StudentCollection" 
                },
                dimensions : [
                    { 
                        name : '月份', value : "{student>id}" 
                    }
                ],
                measures : [
                    { 
                        name : 'income', value : "{student>income}" 
                    },
                ],
            };
            var oDataset = new FlattenedDataset(dataset);
            oVizFrame.setDataset(oDataset);
            //设置Dimension
            var feedDimension = new FeedItem({
                "uid": "categoryAxis",
                "type": "Dimension",
                "values": ["月份"]
            });
            //设置Measure
            var feedMeasure = new FeedItem({
                "uid": "valueAxis",
                "type": "Measure",
                "values": ["income"]
            });
            oVizFrame.addFeed(feedDimension);
            oVizFrame.addFeed(feedMeasure);
        }
    });
});

效果展示