sapui5代码中使用jquey插件flot画图

最新推荐文章于 2022-03-15 14:03:11 发布

原创最新推荐文章于 2022-03-15 14:03:11 发布 · 861 阅读

0 ·

CC 4.0 BY-SA版权

SAPUI5 专栏收录该内容

31 篇文章

订阅专栏

本文介绍如何在Web应用中使用Flot图表库绘制蜘蛛图，并提供了具体代码实例。通过下载并配置Flot类库资源，开发者可以轻松实现数据可视化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载js类库放到app的js目录下面

修改文件manifest.json

    "resources": {
            "js": [
                {
                    "uri": "js/jquery.flot.js"
                },
                {
                    "uri": "js/jquery.flot.stack.js"
                },
                {
                    "uri": "js/JUMFlot.min.js"
                }
            ],
            "css": [
                {
                    "uri": "css/style.css"
                }
            ]

controller js代码中画图即可，比如

plotspider: function() {
        var d1 = [ [0,10], [1,20], [2,80], [3,70], [4,60] ];
        var d2 = [ [0,30], [1,25], [2,50], [3,60], [4,95] ];
        var d3 = [ [0,50], [1,40], [2,60], [3,95], [4,30] ];
        var data = [
                { label: "Pies", color:"green",data: d1,
                 spider: {show: true, lineWidth: 12} },
            { label: "Apples",color:"orange",data: d2,
             spider: {show: true} },
            { label: "Cherries",color:"red",data: d3,
             spider: {show: true} }     
        ];
        var options = {
            series:{ 
                editMode: 'v',editable:true,
                spider:{
                    active: true,highlight: {mode: "area"},
                    legs: { 
                            data: [{label: "SAP"},{label: "Huawei"},{label: "Lenovo"},{label: "三桶油"},{label: "中国电信"}],
                        legScaleMax: 1, legScaleMin:0.8
                    },
                    spiderSize: 0.9      
                }
            },
            grid:{ 
                hoverable: true,clickable: true, editable:true,
                tickColor: "rgba(0,0,0,0.2)",mode: "spider"
            }
        };
        $.plot($("#flotContainer"), data, options);
      },