组件方式开发 Web App全站-6-图表组件-散点图组件开发

来源：互联网发布：批处理软件编辑：程序博客网时间：2024/05/17 01:45

图表组件数据（数组套数组）
这里写图片描述

还有散点根据大小比例进行缩放，然后转成圆形

/* 散点图表组件对象 */var H5ponentPoint = function(name,cfg){    var component = new H5ComponentBase(name,cfg);    var base = cfg.data[0][1]; //以第一个数据的 比例大小 100%;    //输出每个Point    $.each(cfg.data,function(idx,item){        var point = $('<div class="point point_' + idx + '"></div>');        var name = $('<div class="name">' + item[0] + '</div>');        var rate = $('<div class="per">' + (item[1]*100) + '%</div>');        name.append(rate);        point.append(name);        var per = (item[1]/base * 100) + '%';        point.width(per).height(per);        if(item[2]){            point.css('background-color',item[2])        }        if(item[3] !== undefined && item[4]){            point.css('left',item[3]).css('top',item[4]);        }        component.append(point);    });    return component;}

html调用

<!DOCTYPE html><html><head>    <meta charset="UTF-8"/>    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">    <title>IT教育网2015课程学习情况</title>    <style type="text/css">        body{            margin: 0;            padding: 0;            background-color: #000;            font-size: 12px;        }        .iphone{            width: 340px;            height: 540px;            background-color: #fff;            position: absolute;            left: 50%;            top: 50%;            margin: -270px 0 0 -170px;        }    </style>    <script type="text/javascript" src="../js/lib/jquery.js"></script>    <script type="text/javascript" src="../js/H5ComponentBase.js"></script>    <link rel="stylesheet" type="text/css" href="../css/H5ComponentBase.css">    <!-- 引入散点图的资源 -->    <script type="text/javascript" src="../js/H5ComponentPoint.js"></script>    <link rel="stylesheet" type="text/css" href="../css/H5ComponentPoint.css">    <body>        <!-- 用于开发测试 H5ComponentBase 对象（基本的图文组件） -->        <div class="iphone">        </div>         <script type="text/javascript">            var cfg = {                type : 'point',                // text  : "大家好",                width : 300,                height : 300,                data:[                    ['A项',.4,'green'],                    ['B项',.2,'yellow',0,'-60%'],                    ['C项',.2,'red',0,'120%']                ],                css :{                    bottom:0,                    opacity:0,                },                animateIn:{bottom:'40%',opacity:1},                animateOut:{bottom:0,opacity:0},                center : true,            }            var h5 = new H5ponentPoint('bob',cfg);            $('.iphone').append(h5);            var leave = true;            $('body').click(function(){                leave =!leave;                $('.h5_component').trigger(leave ? 'onLeave' : 'onLoad')            })        </script>    </body></html>

修饰CSS样式

/* 散点图组件样式 */.h5_component_point{}.h5_component_point .point{    display: block;    position: absolute;    border-radius: 50%;}.h5_component_point .name{    height: 30px;    width:100%;    text-align: center;    font-size: 22px;    position:absolute;    top:50%;    /*垂直居中*/    margin-top:-15px;}.name .per{    font-size: .5em;}

0 0