jQuery简单实现人口趋势动态图

jQuery简单实现人口趋势动态图

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>人口趋势图</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
#container{
  
}
#container div {
    position:absolute;
    width: 100px;
    height: 20px;
    background-color: orange;
    line-height: 20px;
    text-align: center;
    transition:all 0.5s linear;
    white-space:no-warp;
    overflow:hidden;
    text-overflow:ellipisis;
    font-size:12px;
}
#container div:nth-child(1) {
  background:skyblue;
}
#container div:nth-child(2) {
  background:orange;
}
#container div:nth-child(3) {
  background:pink;
}
#container div:nth-child(4) {
  background:green;
}
#container div:nth-child(5) {
  background:cyan;
}
button{
  display:block;
  position:absolute;

}
i{
 font-style:normal;
 float:right;
}
#msgBox{
  width:100px;
  background:skyblue;
  position:absolute;
  top:0;
  left:0;
  display:none;
  transition:opacity 0.5s linear;
}
</style>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="population.js"></script>
<script type="text/javascript">
    $(function() {
         var total=220;    
         init(population);  
      
     function init(populationData){
          var htmlStr="";
          var htmlStrPrefix="<div id='container'>";
          var htmlStrSuffix="</div><button id='dataBtn'>数据可视化</button><div id='msgBox'></div>";
         
          $.each(populationData,function(index,val){
                htmlStr+="<div id='"+val.id+"'>"+val.name+"<span></span><i></i></div>";
          });
          $("body").html(htmlStrPrefix+htmlStr+htmlStrSuffix);
          
         $("#container").find("div").each(function(index,value){
             $(this).css({
                 top:index==0?"6px":(index*26+6)+"px",
                 left:"12px"
             })
          });
          
          $("#container").find("div").each(function(index,value){
                  var matchData=getData($(this).attr("id"))[0];
                  var yearData=getData($(this).attr("id"))[1];                  
                  $(this).css({
                            width : Math.floor(matchData[0]/total)*12+"px"
                         }).find("span").text(":"+yearData[0]);
                  $(this).find("i").text(matchData[0]);                         
          });
          $("#dataBtn").css({
             top:(26*population.length+6)+"px"
          });
     }
     
     function getData(id){
        var searchData=[];
        $.each(population,function(index,val){
              if(val.id==id){
                searchData.push(val.data);
                searchData.push(val.year);
                searchData.push(val.name);
              }
          });
          return searchData;
     }
    $("#dataBtn").click(function(){
           $("#dataBtn").attr("disabled","disabled");
             var counter=0;
             var matchData=[];
             var yearData=[];
             var timer=setInterval(function(){
                 $("#container").find("div").each(function(index,value){
                     matchData=getData($(this).attr("id"))[0];
                     yearData=getData($(this).attr("id"))[1];
                     var sortIndex=getSortIndex(counter,matchData[counter]);
                        $(this).css({
                                 width : Math.floor(matchData[counter]/total)*12+"px",
                                 top: sortIndex==0?"6px":(sortIndex*26+6)+"px"
                             }).find("span").text(":"+yearData[counter]);
                        $(this).find("i").text(matchData[counter]);                                     
                    });
                     counter++;
                     if(counter>=matchData.length){
                         clearInterval(timer);
                         counter=0;
                         $("#dataBtn").removeAttr("disabled");
                     }
                  },500);               
       });
       function getSortIndex(searchIndex,val){
        var temp=[];
        var sortIndex=-1;
        
        $.each(population,function(index,val){
           temp.push(val.data[searchIndex]);
        });
        temp=sort(temp);
        temp.forEach(function(value,index){
              if(value==val) sortIndex=index;
       })
        return sortIndex;
    }        
    
    function sort(arr) {
            arr.sort(function(a, b) {
                return a < b ? 1 : -1
            });
            return arr;
       }         
    });
</script>
</head>
<body>
</body>
</html>

==========================population.js ========================

population=[
   {
      id:'hnp',
      name:"河南",
      data:[2568,3820,4236,3820,4236,4888,5500,6910,7550,8120,9678,10654,11200,11580,11690,12180],
      year:[1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005]
   },
   {
      id:'gdp',
      name:"广东",
      data:[2258,3059,3456,5530,6950,7200,8578,9755,10560,11689,12650,14880,16580,18000,21560,23000],
      year:[1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005]

   },
   {
      id:'sdp',
      name:"山东",
      data:[1200,1516,2236,3678,4200,5889,6200,7755,8200,9689,12000,13100,14250,15000,16000,17500],
      year:[1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005]
   },
   {
      id:'jsp',
      name:"江苏",
      data:[1305,1416,1936,3178,4100,6089,7200,8955,9200,10689,11000,13800,15000,16820,18300,21400],
      year:[1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005]
   },
   {
      id:'scp',
      name:"四川",
      data:[1206,1316,1436,1678,2200,3889,4200,4755,5200,5689,7300,7800,9200,11200,12300,13400],
      year:[1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005]
   },
   {
      id:'hbp',
      name:"湖北",
      data:[1206,1286,1386,1578,1900,3089,3800,4355,4900,5389,6700,7200,8600,9500,11300,12700],
      year:[1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005]
   }
];

====================效果截图====================

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页