apicloud apicloud

注册
查看: 280|回复: 4

[模块教程] pieChart模块demo

主题:
14
帖子:
438
云币:
10511

[模块教程] pieChart模块demo

280 4 | 发表于 2019-4-26 14:06:13 |阅读模式 | |
var chartId;
    var pieChart;
    var element = [];
    apiready = function(){
       pieChart = api.require('pieChart');
      //可以从后台取类似格式的数据
       var dataArr = [{ value: 20,color: '#FF6600',name:'旅游'}, {value: 20,color: '#660099',name:'美食'}, {value: 20,color: '#FF33FF',name:'影院'}, {value: 20,color: '#66CCFF',name:'服装'}, {value: 20,color: '#00CCFF',name:'首饰'}];
       for(var i in dataArr){
            var color = dataArr.color;
            var name = dataArr.name;
            var value = dataArr.value;
           //插入一个右侧的颜色代表显示
            $("#showSort").append('<div style="font-size:0.67rem;width:100%;height:25px;line-height:25px;"><div style="background:'+color+';width:40px;height:15px;margin:5px;float:left;"></div style="float:left;">'+name+'</div>');
          //定义重组图形的显示数组  
          if(element==undefined){
                element = {
                    value:'',
                    color:''
                }
            }
            element['value'] = value;
            element['color'] = color;
       }
       var height = $("#showSort").height();
       var left = api.winWidth/2-183;
       var top = api.winHeight/2-100;
       $("#showSort").css({'height':height,'left':left,'top':top});
        pieChart.open({
            x: api.winWidth / 2,
            y: api.winHeight / 2,
            radius: 100,
            center: {
                title: '标题',
                subTitle: '子标题'
            },
            elements: element,
            fixed: false
        }, function(ret, err) {
            if (ret) {
                alert(JSON.stringify(ret));
                chartId = ret.id;
            } else {
                alert(JSON.stringify(err));
            }
        });
    }
//刷新图形数据
function refresh(){
        var pieChart = api.require('pieChart');
        var reElement = [{ value: 10,color: '#FF6600'}, {value: 40,color: '#660099'}, {value: 20,color: '#FF33FF'}, {value: 5,color: '#66CCFF'}, {value: 15,color: '#00CCFF'}]
        pieChart.reloadData({
            id: chartId,
            elements: reElement
        }, function(ret, err) {
            if (ret) {
                alert(JSON.stringify(ret));
            } else {
                alert(JSON.stringify(err));
            }
        });
    }
//隐藏图形
    function hideChart(){
        pieChart.hide({
            id: chartId
        });
    }
//显示图形
    function showChart(){
        pieChart.show({
            id: chartId
        });
    }
//关闭图形并退出当前win
    function closeChart(){
        api.closeWin({
            name: 'test'
        });
        pieChart.close({
            id: chartId
        });
    }
//重置图形位置
    function resetChart(){
        var pieChart = api.require('pieChart');
        pieChart.setFrame({
            id: chartId,
            x: api.winHeight/4,
            y: api.winWidth/2,
            anim: true
        });
      //修改右侧显示位置
       var top = api.winHeight/4-100;
       $("#showSort").css({'top':top});

    }

分享一个pieChart模块的简单写法,大家可以根据自己的需求进行改动。

本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

版主年中人气投票活动:7月4日-7月31日
如有我的回答有帮到您,欢迎为我投上您神圣的一票,谢谢!请投
1号嗯哼嗯哼 点击进入投票链接

版主

UID:546828

主题:
32
帖子:
3682
云币:
39067

端午节圣诞节捣蛋鬼APICloud五岁啦

发表于 2019-4-28 12:54:06 |
感谢分享
易大侠:社区美少女,论坛彭于晏,在社区已经连续11个月表现优异。
【2019年度最佳版主评选】给版主投票即可奖励50云币,截止至12月31日---我是10号版主,点击去投票

老司机

UID:673413

主题:
175
帖子:
12674
云币:
5646

圣诞节

发表于 2019-4-28 17:33:57 |
感谢分享

版主

UID:108295

主题:
81
帖子:
4370
云币:
2415

足球狗

发表于 2019-4-28 21:46:59 |
可以塞。
angelshelter:优秀模块开发者,在社区已经连续10个月表现优异
【2019年度最佳版主评选】给版主投票即可奖励50云币,截止至12月31日---我是1号版主,点击去投票

版主

UID:453379

主题:
18
帖子:
6289
云币:
8868

端午节圣诞节捣蛋鬼APICloud五岁啦

发表于 2019-4-29 09:52:45 |
感谢分享
辉哥_0808:优秀版主,在H5模块征集活动中,位列第一名,在社区已经连续17个月表现优异
【2019年度最佳版主评选】给版主投票即可奖励50云币,截止至12月31日---我是11号版主,点击去投票
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表